출처
DOM 이란?
자바 스크립트는 HTML을 제어할 수 있게 도와주는 언어. DOM이란 Document Object Model로 문서 객체 모델이라 일컫는다.
•
렌더링 엔진 - 웹 문서를 해석할 수 있게 함
HTML문서를 객체화 하여서 자바스크립트로 접근할 수 있게 해준다.
Dom Tree구조
기본적으로 HTML은 트리구조를 가지고
하나의 부모와 n개의 자식요소를 가질 수 있다.
각각의 요소를 node라고 한다.
접근 → 제어
BOM 이란?
브라우저 자체를 접근하고 제어할 수 있게, 브라우저 자체를 객체화 한것을
Browser Object Model 이라고 한다.
CSS OM
CSS 오브젝트 모델은 CSS를 객체화 한 것
document
브라우저 내부의 웹 문서를 제어할 수 있게 하는 객체를 document - 웹페이지 자체를 의미
돔트리의 최상위 객체, 돔트리에 접근하기 위한 진입점
document.getRootNode()
최상위 노드인 document를 반환
자식요소 찾기
document.childNodes[1].childNodes[2].childNodes[1].textContent = '제목입니다.'
JavaScript
복사
이렇게 객체의 속성을 사용해서 자식요소에 접근해서 수정할 수 있다.
하지만 매번 이렇게 사용하기는 불편하니까, css선택자를 사용해서 접근하는 방법을 사용한다.
css 선택자 사용해서 제어하기
let domObject = document.querySelector('h1')
domObject.textContent = '변경합니다 ! '
JavaScript
복사
이렇게 쿼리 셀렉터로 css 요소에 접근해서 제어할 수 있다.