< Javascript > DOM 이해하기

자바스크립트는 웹 문서를 제어하기 위한 프로그래밍 언어다. 그렇다면 자바스크립트는 어떻게 웹 문서의 정보를 가져오고 제어하는 것 일까? 웹 문서의 텍스트나 이미지 등의 요소를 자바스크립트로 제어하기 위해서는 문서 객체 모델에 아는 것이 중요하다

DOM

DOM은 Document Object Model를 줄여말하는 것으로 문서 객체 모델이라고도 한다. 문서 객체 모델은 웹 문서의 html이나 div같은 요소들을 자바스크립트가 사용할 수 있게 객체를 사용해 문서를 해석하는 방법이라고 볼 수 있다.

웹 문서를 열 때 브라우저의 렌더링 엔진이 html로 작성된 코드를 한줄씩 읽어 객체화하여 자바스크립트에서 이 문서 객체에 접근할 수 있게 한다. 즉 스크립트 언어로 웹 문서의 요소를 제어할 수 있게 웹 문서를 객체화하고 이를 이용하는 방식을 문서 객체 모델이라고 생각할 수 있다

DOM 구조

DOM은 하나의 가지에서 갈라져 나가는 나무를 뒤집어 놓은 모습으로 생겼고 이를 DOM tree라고 한다. DOM에서 각각의 요소는 node라고 부른다. DOM구조의 최상위 노드 document는 웹 문서 영역을 제어하는 객체이며, 이 document를 통해 html의 원하는 요소에 접근할 수 있다.

DOM 구조 조회하기

DOM 구조는 console.dir을 사용하여 조회할 수 있다. 콘솔창을 열어 console.dir(document.body)를 치면 body의 자손을 요소를 모두 확인할 수 있다
console.log로 document.body를 조회했을때는 html문서같이 출력되는데 console.dir으로 요소를 조회하면 객체 형식으로 받아볼 수 있음

DOM 다루기

create

• document.createElement를 통해 html 요소 만들기

const newDiv = document.createElement('div');로 div요소를 하나 만들어 newDiv 변수에 할당해둔다. 이때 만들어진 div요소는 부모, 자식 관계없이 그냥 허공에 떠돌아다니는 요소이다

append

document.부모요소.append(요소)로 html 요소 부모노드에 달아주기

document.body.append(newDiv)로 body 요소에 자식으로 넣어준다 이때 newDiv는 body의 자식요소 맨 마지막 순서로 들어감

• insertBefore() - 특정 자식요소 이전에 넣어줌
• element.removeChild() - 자식요소 삭제
• element.replaceChild() - 자식요소 교체

등등 여런 매서드를 사용하여 여러 작업을 해줄 수 있다

read

querySelector()로 html 요소를 조회하기

const oneDiv= document.querySelector('.news') 클래스가 .new인 엘리먼트 중 첫번째 엘리먼트를 조회함 여러개의 요소를 한번에 조회하기 위해서는 querySelectorAll을 사용
이렇게 불러온 요소들은 배열처럼 사용할 수 있지만 배열이 아니라 '배열형' 객체임을 기억할 것

update

html 요소 변경하기

• textContent로 문자열 입력

const newDiv= document.querySelector('div');
newDiv.textContent = 'embargo';     	// <div>dev</div>

• classList.add로 클래스 추가하기

oneDiv.classList.add('news')			// <div class="news">dev</div>

delete

html 요소 삭제하기

• remove()로 지우기

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

• innerHTML로 지우기 (권장하지 않음)

document.querySelector('#container').innerHTML = '';

• 반복문과 removeChild로 지우기

//앞에서부터 하나씩 모두 지우기
const container = document.querySelector('#container');
while (container.firstChild) {
  container.removeChild(container.firstChild);
}

//맨 앞의 자식요소 남기면서 뒤에서부터 하나씩 지우기
const container = document.querySelector('#container');
while (container.children.length > 1) {
  container.removeChild(container.lastChild);
}

//클래스가 news인 것만 찾아서 지우기
const news = document.querySelectorAll('.news')
for (let news of news){
    tweet.remove()
}