JS문법4 - DOM

DOM

- JS가 웹 문서를 동적으로 다룰 수 있도록 문서에 있는 각 요소를 객체 형태로 처리하는 것

DOM 트리

- DOM은 웹 문서의 요소를 부모 요소와 자식 요소로 구분

- 웹 문서 구조를 부모/자식 관계로 표시하면 나무를 거꾸로 뒤집어 놓은 모습 -> DOM 트리

- 웹 문서의 태그는 요소 노드로 표현한다. (Element)

- 태그가 품고 있는 (Text)

- Attribute

 

getElementById()

- id 선택자를 사용해 접근하기

<div id="container">
	<h1 id="heading"></h1>
</div>

document.getElementById("heading"); //<h1 id="heading"></h1>

getElementByClassName

querySelector("#heading")

querySelector(".bright")

querySelectorAll(".bright")