TIL - 15일차 220211 (DOM)

오전 8:30 - 8:45 plan / 나의 하루 목표

오늘은 제가 부족하다고 생각하는 DOM 부분을 좀 꼼꼼하게 기록하고 DOM 으로 HTML을 잘 조작할 수 있도록 공부할 예정입니다.

오전 9:00 - 10:00 Algorithm Basic 1,2

오전 10:00 - 11:00 chapter / DOM 이해하기

What is DOM?

DOM은 Document Object Model의 약자로 HTML요소를 Javascript Object처럼 조작할 수 있는 모델입니다.

자바스크립트를 통해 DOM으로 HTML을 조작할 수 있습니다.

HTML에 Javascript 적용하기

HTML에 Javascript를 적용하기 위해서는 <script> 태그를 이용합니다.

// HTML 파일과 같은 디렉토리에 존재하는 myScript.js을 불러옵니다.
<script src="myScript.js"></script>

script 태그를 추가하는 두가지 대표적인 사례가 존재합니다. 하나는 head 태그에 추가하는 방법, 다른 하나는 /body 가 끝나기 전에 추가하는 방법입니다. 비교했을때 head 태그에 추가할 경우 제대로 출력을 하지않아 script 태그는 body가 끝나기 전에 추가해 사용합니다.

 

오전 11:00 - 12:00 chapter / DOM으로 HTML 조작하기

CREATE - createElement

document.createElement('div) // 새로운 div element를 만듭니다
const tweetDiv = document.createElement('div) // 새롭게 생성한 div element를 변수에 할당합니다

APPEND - append, appendChild

document.body.append(tweetDiv) // 변수 tweetDiv를 body에 넣어줍니다

READ - querySelector, querySelectorAll

const oneTweet = document.querySelector('.tweet') // 클래스 이름이 tweet인 HTML Element를 조회합니다
const tweets = document.querySelector('.tweet) // 클래스 이름이 tweet인 모든 HTML Element를 유사 배열로 받아옵니다

const oneTweet = document.getElementById('tweet') // querySelector와 비슷한 역할을 하는 오래된 방식

UPDATE - textContent, classList.add

tweetDiv.textContent = 'dev'; // 비어있는 div 엘리먼트에 문자열을 입력합니다
console.log(oneDiv) // <div>dev<div>

tweetDiv.classList.add('tweet') // <div class="tweet">dev<div> // tweet 클래스를 추가합니다

DELETE - remove, removeChild

tweetDiv.remove() // append 했던 엘리먼트를 삭제합니다

// innerHTML을 이용하는 방법은 분명 간편하고 편리한 방식이지만, innerHTML은 보안에서 몇가지 문제를 가지고있습니다.
document.querySelector('#container').innerHTML = ''; // id가 container인 엘리먼트 아래 모든 엘리먼트를 지웁니다

// 대신할 메서드로 반복문을 통해 자식엘리먼트가 남아있지 않을 때까지 첫번째 자식엘리먼트를 삭제하는 코드입니다.
const container = document.querySelector('#container');
while (container.firstChild) {
  container.removeChild(container.firstChild);
}
// container의 자식 엘리먼트가 1개만 남을 때까지, 마지막 자식 엘리먼트를 제거합니다.
const container = document.querySelector('#container');
while (container.children.length > 1) {
  container.removeChild(container.lastChild);
}
// 클래스 이름이 tweet 인 엘리먼트만 찾아서 지우는 방법도 있습니다.
const tweets = document.querySelectorAll('.tweet')
tweets.forEach(function(tweet){
    tweet.remove();
})
// or
for (let tweet of tweets){
    tweet.remove()
}

 

오후 1:00 - 2:00 quiz / DOM

오후 2:00 - 5:00 pair / 유효성 검사

오후 5:00 - 6:00 zoom / 주간 회고

오후 6:00 - 6:30 review / 일일 회고

오후 6:30 - 7:00 survey / Weekly Self Reflection

오후 9:00 - 11:00 개인 학습 시간

이정윤 페어님과 같이 진행한 롤챔프정보 만들기 마무리 했습니다.