🌲DOM (Document Object Model)
문서 객체 모델.
: HTML 문서의 계층적 구조와 정보를 표현하여 이를 제어할 수 있는 API
( html 구조가 저장된 객체이며, window 객체의 하위에 있다. 각 문서 구조의 컨트롤 및 이벤트 처리에 쓰이며, CSS의 값도 변경이 가능하다. )
➕
브라우저의 렌더링 엔진은
웹 문서를 로드한 후 파싱하여,
웹 문서를 브라우저가 이해할 수 있는 구조로 구성해
메모리에 적재하는데
➡️ 이를 DOM이라 한다.
모든 요소 · 요소의 어트리뷰트 · 텍스트를 각각의 객체로 만들고, 이들 객체를 (부모 자식 관계를 표현할 수 있는) 트리 구조로 구성한 것이 ➡️ DOM이다.
노드
모든 DOM 요소는 Node 객체를 물려받는다 ➡️ HTML 요소들은 노드에 속하며 노드의 기능을 전부 쓸 수 있다
DOM (Document Object Model)에서 모든 것은
노드(Node)로 표현된다. HTML 문서의 요소, 텍스트 내용, 주석 등은 모두 노드이다.⤵️
DOM은 각 노드에 해당하는 태그나 속성을 모두 '객체'로 제공한다.⤵️
HTML 문서의 요소들은 자바스크립트 내장 객체처럼 자유롭게 접근이 가능하며 동적으로 변경될 수 있다.
1. 문서 노드
- DOM 트리의 최상위에 존재하는 root 노드로,
document 객체를 가리킨다.
(document 객체 : 브라우저가 렌더링한 HTML 문서 전체를 가리키는 객체) - Window.document 혹은 document로 참조
- 요소, 어트리뷰트(속성), 텍스트 노드 접근시 문서 노드를 통해야 한다.
2. 요소 노드
HTML 요소를 가리키는 객체- 부모 자식 관계 존재 (부모 노드와 연결)
- 문서의 구조를 표현
- 어트리뷰트, 텍스트 노드에 접근하려면 먼저 요소 노드에 접근해야 한다.
3. 어트리뷰트 노드
HTML 요소의 속성을 가리키는 객체- 어트리뷰트 노드는 부모노드와 연결되어 있지 않다.
4. 텍스트 노드
HTML 요소의 텍스트를 가리키는 객체- 문서의 정보를 표현 (문서의 구조를 표현하는 요소 노드와 비교 !)
요소 노드 취득
🔹 id를 이용
◽ document.getElementById(id)
- 반드시 문서 노드를 통해 호출
id어트리뷰트 값에 의해서 요소 노드를한 개선택한다.
❔ 여러 개 선택된 경우 ➡ 첫번째 요소만 반환- 단일 HTMLElement를 반환하며 요소 노드 없을 시 null 반환
🔹 태그 이름을 이용
◽ document.getElementsByTagName(태그이름)
- 반드시 문서 노드를 통해 호출
- getElementById와 달리
여러 개 반환 가능 - HTMLCollection(live) 객체 반환(요소 노드 없을 시 빈 HTMLCollection 반환)
HTMLCollection(live) 객체는 유사 배열이다.
찾는 시점인 현재 위치 기준에서 윗부분에 있는 것들에 한하여 찾을 수 있다 🔹 class를 이용
◽ document.getElementsByClassName(클래스이름)
- 반드시 문서 노드를 통해 호출
- HTMLCollection(live)객체 반환(요소 노드 없을 시 빈 HTMLCollection 반환)
🔹 CSS 선택자를 이용
◽ document.querySelector(css선택자)
css선택자를 사용하여 요소 노드를한 개선택하며
❔ 여러 개 선택된 경우 ➡ 첫번째 요소만 반환- 단일 HTMLElement를 반환하며, 해당 요소 노드 없을 시 null반환
예시🔽
◽ document.querySelectorAll(css선택자)
- NodeList(non-live) 객체 반환
- 인수로 전달된 css 선택자가 문법에 맞지 않은 경우 DOMException 에러 발생
🔹 특정 요소 노드 취득 여부 확인
◽ Element: matches() method
document.querySelector(css선택자).matches(css선택자)
선택한 요소가 다른 css 선택자 문법의 요소로 취득할 수 있는지 확인 ➡️ true / false 반환
🤔 NodeList / HTMLCollection
둘 다 배열처럼 생겼으나 실제 배열이 아니기 때문에 사용할 수 있는 메소드가 제한된다. 특히 HTMLCollection은 사용할 수 있는 게 거의 없다.
NodeList에 지원하는 배열 메소드
forEach()
entries()
values()
keys()
length 프로퍼티는 둘 다 사용 가능하다.
forEach를 사용했더니 NodeList는 잘 출력되는 반면
HTMLCollection은 에러가 발생한다 배열로 변환하면 배열 메소드 사용 가능 🔽
Array.from()로 배열을 생성하거나스프레드 연산자를 이용하여 디스트럭처링
참조
https://developer.mozilla.org/en-US/
https://cucat.tistory.com/entry/%EB%AC%B8%EC%84%9C-%EA%B0%9D%EC%B2%B4-%EB%AA%A8%EB%8D%B8-DOM-%EB%85%B8%EB%93%9C-%EA%B5%AC%EC%A1%B0-%EA%B0%9C%EB%85%90