[WEB] DOM이란?

📄 DOM이란?

DOM은 Document Object Model의 줄임말로, 웹 페이지의 문서 구조를 객체로 나타낸 프로그래밍 인터페이스입니다.

웹 페이지의 HTML 등의 웹 문서를 트리 형태로 표현하고 각각 요소를 객체로 취급합니다.

DOM은 웹 페이지의 내용, 구조, 스타일 등을 동적으로 조작할 수 있는 기능을 제공합니다.

📄 DOM 요소에 접근하기

▪ 하나의 노드 선택

• document.getElementById

// id로 하나의 요소를 선택한다.
const elem = document.getElementById("one");
// 클래스 어트리뷰트의 값을 변경한다.
elem.className = "blue";

console.log(elem); // <li id="one" class="blue">Seoul</li>
console.log(elem.__proto__); // HTMLLIElement
console.log(elem.__proto__.__proto__); // HTMLElement
console.log(elem.__proto__.__proto__.__proto__); // Element
console.log(elem.__proto__.__proto__.__proto__.__proto__); // Node

• document.querySelector

// CSS 셀렉터를 이용해 요소를 선택한다
const elem = document.querySelector("li.red");
// 클래스 어트리뷰트의 값을 변경한다.
elem.className = "blue";

▪ 여러개의 노드 선택

• document.getElementsByClassName
• document.getElementsByTagName
• document.querySelectorAll

참고

• Virtual DOM: ReactJS implementation

• https://poiemaweb.com/js-dom