[JavaScript] DOM

JS DOM

• document객체의 속성과 메서드
• html에 js적용법 : <script src="myScriptFile.js"></script>
• <script>요소는 등장과 함께 실행된다.
• <script>넣는법 두가지가 있다.
• 요소란 대강 태그안에 들어가는 그거라고 생각하면 됨
• 1. head요소 안에 넣기
• 2. body요소 안에 넣기 // 비추
• js에서 DOM은 document객체에 구형되어있음.
• console.dir은 DOM을 객체의 모습으로 출력함
• 예) console.dir(document.body) = document.body.children
• 두번째 자식을 조회하려면 document.body.children[1]을 조회한다.
• console.dir(document.body.children[1]) 하면 부모가 나옴 > div#news-contents

DOM

• js로 DOM을 조작할 수 있어야함.
• html 시멘틱요소 : 의미적 가치가 있는 요소를 쓰는것, header, main, article등

CREATE

• div 요소 만들기

document.createElement('div')

• 작업결과를 변수에 할당하기

const tweetDiv = document.createElement('div')

APPEND

• body 트리에 연결안된 변수 tweetDiv를 트리에 넣는행위
• append 메서드를 사용해서 tweetDiv를 body에 넣어보자.

const container = document.querySelector('#container')
document.body.append(tweetDiv) 
append.container(tweetDiv)

READ

• DOM으로 HTML엘리먼트 정보 조회하기 위해서는 querySelector 첫번째 인자로 셀렉터를 전달하여 확인
• query : 질문하다, 조회하다
• 하나요소 찾기 querySelector(구 getElementById), 여러개찾기 querySelectorAll

const oneTweet = document.querySelector('.tweet')

• 이러면 많은 클래스 이름이 tweet인 요소중 하나에 할당됨 여러개를 할당하려면

const tweets = document.querySelectorAll('.tweet')

• 기존 div 클래스 container안에 새로운 div요소를 넣자.

const container = document.querySelector('#container')
append.container(tweetDiv)

UPDATE

• 빈 div태그 생성하고 업데이트해서 다양한 작업을 해보자.
• div사이에 문자열넣기

const oneDiv = document.createElement('div');
onediv.textContent = 'dev';
console.log(oneDiv) // <div>dev</div>

• div에 클래스넣기

oneDiv.classList.add('tweet')
console.log(oneDiv) // <div class="tweet">dev</div>

• 자식요소로 추가하기

const container = document.querySelector('#container')
container.append(oneDiv)

• setAttribute 메서드를 검색해서 다른 속성을 추가할 수 있다.

DELETE

• 삭제하려는 위치를 아는경우 remove메서드 사용

const container = document.querySelector('#container')
const tweetDiv = document.createElement('div')
container.append(tweetDiv)
tweetDiv.remove() 

• 여러개 자식요소 지우기 > innerHTML을 이용(보안상 비추)

document.querySelector('#container').innerHTML = ''; // 컨테이너 모든 자식요소 지우기

• 자식요소 지우기 > removeChild 모든 자식없애려면 반복문사용

const container = document.querySelector('#container');
while (container.firstChild) {
  container.removeChild(container.firstChild); //container의 모든자식 없애기
}

• 자식요소 하나만 남기고 지우기

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()
}