문서 객체 모델(DOM)

문서 객체 모델 알아보기

📌자바스크립트를 이용하여 웹 문서에 접근하고 제어할 수 있도록 객체를 사용해 웹 문서를 체계적으로 정리하는 방법

DOM 트리

HTML의 요소들은 트리 구조를 이룬다.

노드: 트리에서 가지가 갈라져 나간 항목

루트 노드: DOM 트리의 시작 부분인 html 노드

부모 노드와 자식노드

형제 노드

DOM의 기본 원칙

1. 모든 HTML 태그의 요소는 노드이다.
2. HTML 태그에서 사용하는 텍스트 내용은 자식 노드의 텍스트 노드이다.
3. HTML 태그에 있는 속성은 자식 노드인 속성 노드이다.
4. 주석은 주석 노드이다.

DOM 요소에 접근하고 속성 가져오기

id 선택자로 접근하는 getElementById() 메서드

<aside> 💡 요소명.getElementById("id명")

</aside>