브라우저 객체 모델(BOM)의 최상위 객체는 window라는 객체입니다. DOM은 이 window 객체의 하위 객체이다.
1.DOM의 주요 특징 및 개념
- 트리 구조: DOM은 트리 구조로 표현되며, 각 노드는 웹 페이지의 다양한 부분 (예: 요소, 속성, 텍스트 등)을 나타낸다.
- 라이브 (Live) 특성: DOM은 '라이브'라는 특성이 있다. 즉, DOM에 대한 변경은 즉시 웹 페이지에 반영된다.
- 조작 가능: 자바스크립트를 사용하여 DOM 요소를 선택, 수정, 추가 또는 제거할 수 있다.
// 요소 선택하기 let heading = document.getElementById('myHeading'); // 텍스트 변경하기 heading.textContent = 'New Heading Text'; // 클릭 이벤트 추가하기 heading.addEventListener('click', function() { alert('Heading clicked!'); });
window는 생략가능하다.
2.DOM tree
DOM Query (요소 접근방법)
1) 하나의 요소 노드 선택
document.getElementById(id)- id 어트리뷰트 값으로 요소 노드를 하나 선택한다. 여러개가 선택되면 첫번째 요소를 반환한다.
- Return: HTMLElement를 상속받은 객체
document.querySelector(cssSelector)- CSS 셀렉터를 사용해서 요소 노드 한 개를 선택하고, 여러개 선택한 경우 역시 첫번째 요소만 반환한다.
- Return: HTMLElement를 상속받은 객체
2) 여러 개의 요소 노드 선택
document.getElementsByClassName(class)- class 어트리뷰트 값으로 요소 노드를 모두 선택하고 공백 구분으로 여러개의 클래스를 지정할 수 있다.
- Return : HTMLCollection(live)
- 리턴 값이 HTMLCollection인 것은 복수 개가 반환될 때 리스트를 담아 반환하기 위한 객체인데, 배열과 비슷하지만 배열은 아닌 유사 배열 형태이다. 중요한 것은 HTMLCollection은 실시간으로 Node의 상태 변경을 반영한다.
document.getElementsByTagName(tagName)- 태그명으로 요소 노드를 모두 선택한다.
- Return : HTMLCollection (live)
document..querySelectorAll(selector)- 지정된 CSS 선택자를 사용해서 요소 노드 모두를 선택한다.
- Return: NodeList(non-live)
3) DOM traversing (탐색)
parentNode- 부모 노드를 탐색한다.
- Return: HTMLElement를 상속받은 객체
firstChildlastChild- 자식 노드를 탐색한다.
- Return: HTMLElement를 상속받은 객체
hasChildNodes()- 자식 노드 확인 후 유무에 따라 Boolean값 반환한다.
- Return: Boolean
childNodes- 자식 노드의 컬렉션 반환. 텍스트 요소를 포함한다.
- Return: NodeList (non-live)
children- 자식 노드의 컬렉션을 반환하는데
Element요소만 반환한다.
- Return: HTMLCollection (live)
previousSibling, nextSibling- 형제 노드를 탐색하며, 텍스트 요소를 포함한다.
- Return: HTMLElement를 상속받은 객체
previousElementSibling, nextElementSibling- 형제 노드를 탐색하며,
Element요소만 탐색한다.
- Return: HTMLElement를 상속받은 객체
Share article