자바스크립트는 웹 문서를 제어하기 위한 프로그래밍 언어다. 그렇다면 자바스크립트는 어떻게 웹 문서의 정보를 가져오고 제어하는 것 일까? 웹 문서의 텍스트나 이미지 등의 요소를 자바스크립트로 제어하기 위해서는 문서 객체 모델에 아는 것이 중요하다
DOM은 Document Object Model를 줄여말하는 것으로 문서 객체 모델이라고도 한다. 문서 객체 모델은 웹 문서의 html이나 div같은 요소들을 자바스크립트가 사용할 수 있게 객체를 사용해 문서를 해석하는 방법이라고 볼 수 있다.
웹 문서를 열 때 브라우저의 렌더링 엔진이 html로 작성된 코드를 한줄씩 읽어 객체화하여 자바스크립트에서 이 문서 객체에 접근할 수 있게 한다. 즉 스크립트 언어로 웹 문서의 요소를 제어할 수 있게 웹 문서를 객체화하고 이를 이용하는 방식을 문서 객체 모델이라고 생각할 수 있다
DOM은 하나의 가지에서 갈라져 나가는 나무를 뒤집어 놓은 모습으로 생겼고 이를 DOM tree라고 한다. DOM에서 각각의 요소는 node라고 부른다. DOM구조의 최상위 노드 document는 웹 문서 영역을 제어하는 객체이며, 이 document를 통해 html의 원하는 요소에 접근할 수 있다.
DOM 구조는 console.dir
을 사용하여 조회할 수 있다. 콘솔창을 열어 console.dir(document.body)
를 치면 body의 자손을 요소를 모두 확인할 수 있다
console.log
로 document.body
를 조회했을때는 html문서같이 출력되는데 console.dir
으로 요소를 조회하면 객체 형식으로 받아볼 수 있음
document.createElement를 통해 html 요소 만들기
const newDiv = document.createElement('div');
로 div요소를 하나 만들어 newDiv 변수에 할당해둔다. 이때 만들어진 div요소는 부모, 자식 관계없이 그냥 허공에 떠돌아다니는 요소이다
document.부모요소.append(요소)로 html 요소 부모노드에 달아주기
document.body.append(newDiv)
로 body 요소에 자식으로 넣어준다 이때 newDiv
는 body
의 자식요소 맨 마지막 순서로 들어감
insertBefore()
- 특정 자식요소 이전에 넣어줌element.removeChild()
- 자식요소 삭제 element.replaceChild()
- 자식요소 교체등등 여런 매서드를 사용하여 여러 작업을 해줄 수 있다
querySelector()로 html 요소를 조회하기
const oneDiv= document.querySelector('.news')
클래스가 .new
인 엘리먼트 중 첫번째 엘리먼트를 조회함 여러개의 요소를 한번에 조회하기 위해서는 querySelectorAll
을 사용
이렇게 불러온 요소들은 배열처럼 사용할 수 있지만 배열이 아니라 '배열형' 객체임을 기억할 것
html 요소 변경하기
textContent
로 문자열 입력const newDiv= document.querySelector('div');
newDiv.textContent = 'embargo'; // <div>dev</div>
classList.add
로 클래스 추가하기oneDiv.classList.add('news') // <div class="news">dev</div>
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()
}