39장 DOM(1.노드~2.요소 노드 취득)
DOM(Document Object Model)은 HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API, 즉 프로퍼티와 메서드를 제공하는 트리 자료구조다.
노드
1. HTML 요소와 노드 객체
HTML 요소는 HTML 문서를 구성하는 개별적인 요소를 의미한다. HTML 요소는 렌더링 엔진에 의해 파싱되어 DOM을 구성하는 요소 노드 객체로 변환된다. 이때 HTML 요소의 어트리뷰트는 노드로, HTML 요소의 텍스트 콘텐츠는 텍스트 노드로 변환된다.
HTML 문서는 HTML 요소들의 집합으로 이뤄지며, HTML 요소는 중첩 관계를 가진다. 이때 HTML 요소 간에는 중첩 관계에 의해 계층적인 부자 관계가 형성된다. 이러한 요소 간의 부자 관계를 반영하여 HTML 문서의 구성 요소인 HTML 요소를 객체화한 모든 노드 객체들을 트리 자료 구조로 구성한다.
트리 자료구조
트리 자료구조는 노드들의 계층 구조로 이뤄진다. 즉, 트리 자료구조는 부모 노드와 자식 노드로 구성되어 노드 간의 계층적 구조를 표현하는 비선형 자료구조를 말한다.
[알고리즘] 트리, 그래프
트리 단방향 그래프의 한 구조로, 하나의 뿌리로부터 가지가 사방으로 뻗은 형태입니다. 하나의 방향으로만 연결된 계층적 자료구조입니다. 하나의 데이터 아래에 여러 개의 데이터가 존재하는
comhwang.tistory.com
2. 노드 객체의 타입
DOM은 노드 객체의 계층적인 구조로 구성된다, 노드 객체는 종류가 있고, 상속 구조를 갖는다. 노드 객체는 총 12개의 종류(노드 타입)가 있다.
12개의 노드 타입 중 중요한 4개의 타입
- 문서 노드(document node)
- DOM 트리의 최상위에 존재하는 루트 노드로서 document 객체를 가리킨다.
- 브라우저가 렌더링한 HTML 문서 전체를 가리키는 객체로서 전역 객체 window의 document 프로퍼티에 바인딩 되어있어, 문서 노드는 window.document 또는 document로 참조할 수 있다.
- DOM 트리의 루트 노드이므로 DOM 트리의 노드들에 접근하기 위한 진입점 역할을 담당하며, 요소/어트리뷰트/텍스트 노드에 접근하려면 문서 노드를 통해야 한다.
- 요소 노드(element node)
- HTML 요소를 가리키는 객체다
- HTML 요소 간의 중첩에 의해 부자 관계를 가지며, 이 부자 관계를 통해 정보를 구조화한다. 따라서 요소 노드는 문서의 구조를 표현한다고 할 수 있다.
- 어트리뷰트 노드(attribute node)
- HTML 요소의 어트리뷰트를 가리키는 객체다.
- 어트리뷰트 노드는 부모 노드와 연결되어 있지 않고, 지정된 HTML 요소의 요소 노드와 연결되어 있다.
- 어트리뷰트 노드에 접근하여 어트리뷰트를 참조하거나 변경하려면 먼저 요소 노드에 접근해야 한다.
- 텍스트 노드(text node)
- HTML 요소의 텍스트를 가리키는 객체다.
- 요소 노드가 문서의 구조를 표현한다면 텍스트 노드는 문서의 정보를 표현한다고 할 수 있다.
- 텍스트 노드는 요소 노드의 자식 노드이며, 자식 노드를 가질 수 없는 리프 노드다.
- 텍스트 노드에 접근하려면 먼저 부모 노드인 요소 노드에 접근해야 한다.
3. 노드 객체의 상속 구조
DOM을 구성하는 노드 객체는 자신의 구조와 정보를 제어할 수 있는 DOM API를 사용할 수 있다. 이를 통해 노드 객체는 자신의 부모, 형제, 자식을 탐색할 수 있으며, 자신의 어트리뷰트와 텍스트를 조작할 수 있다.
DOM을 구성하는 노드 객체는 ECMAScript 사양에 정의된 표준 빌트인 객체가 아니라 브라우저 환경에서 추가적으로 제공하는 호스트 객체다. 하지만 노드 객체도 자바스크립트 객체이므로 프로토타입에 의한 상속 구조를 갖는다. 모든 노드 객체는 Object, EventTarget, Node 인터페이스를 상속받는다. 추가적으로 문서 노드는 Document, HTMLDocument 인터페이스를 상속받고 어트리뷰트 노드는 Attr, 텍스트 노드는 CharacterData 인터페이스를 각각 상속받는다.
이를 프로토타입 체인 관점에서 살펴보자. input 요소를 파싱하여 객체화한 input 요소 노드 객체는 HTMLInputElement, HTMLElement, Element, Node, EventTarget, Object의 prototype에 바인딩되어 있는 프로토타입 객체를 상속받는다. 즉, input 요소 노드 객체는 프로토타입 체인에 있는 모든 프로토타입의 프로퍼티나 메서드를 상속받아 사용할 수 있다.
노드 객체에는 노드 객체의 종류, 즉 노드 타입에 상관없이 모든 노드 객체가 공통으로 갖는 기능도 있고, 노드 타입에 따라 고유한 기능도 있다. 노드 객체는 공통된 기능일수록 프로토타입 체인의 상위에, 개별적인 고유 기능일수록 프로토타입 체인의 하위에 프로토타입 체인을 구축하여 노드 객체에 필요한 기능, 즉 프로퍼티와 메서드를 제공하는 상속 구조를 갖는다.
DOM은 HTML 문서의 계층적 구조와 정보를 표현하는 것을 물론 노드 객체의 종류, 즉 노드 타입에 따라 필요한 기능을 멛서드의 집한인 DOM API로 제공한다. 이 DOM API를 통해 HTML의 구조나 내용 또는 스타일 등을 동적으로 조작할 수 있다.
요소 노드 취득
HTML이 구조나 내용 또는 스타일 등을 동적으로 조작하려면 먼저 요소 노드를 취득해야 한다. 텍스트 노드는 요소 노드의 자식 노드이고, 어트리뷰트 노드는 요소 노드와 연결되어 있기 때문에 텍스트 노드나 어트리뷰트 노드를 조작하고자 할 때도 마찬가지다.
1. id를 이용한 요소 노드 취득
Document.prototype.getElementById 메서드는 인수로 전달한 id 어트리뷰트 값을 갖는 하나의 요소 노드를 탐색하여 반환한다.
id 값은 HTML 문서 내에서 유일한 값이어야 하며, class 어트리뷰트와는 달리 공백 문자로 구분하여 여러 개의 값을 가질 수 없다. 단, HTML 문서 내에 중복된 id 값을 갖는 HTML 요소가 여러 개 존재하더라도 getElementId 메서드는 인수로 전달된 id 값을 갖는 첫 번째 요소 노드만 반환한다.
<!DOCTYPE html>
<html lang="ko">
<body>
<div id="apple">hi</div>
<script>
console.log(apple === document.getElementById("apple")); // true
const $apple = document.getElementById("apple");
$apple.style.color = "red";
delete apple; // 암묵적 전역으로 생성된 전역 프로퍼티는 삭제되지만 전역 변수는 삭제되지 않는다.
console.log(apple); // <div id="apple">hi</div>
</script>
</body>
</html>
2. 태그 이름을 이용한 요소 노드 취득
Document.prototype/Element.prototype.getElementsByTagName 메서드는 인수로 전달한 태그 이름을 갖는 모든 요소 노드들을 탐색하여 반환한다. getElementsByTagName 메서드는 여러 개의 요소 노드 객체를 갖는 DOM 컬렉션 객체인 HTMLCollection 객체를 반환한다.
<!DOCTYPE html>
<html lang="ko">
<body>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
<ol>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ol>
<script>
// 태그 이름이 li인 요소 노드를 모두 탐색하여 반환한다.(ul>li, ol>li 모든 요소 반환)
const $elems = document.getElementsByTagName("li");
// *을 사용하면 모든 요소 노드를 탐색하여 반환한다.
const $all = document.getElementsByTagName("*");
console.log($elems); // HTMLCollection(6) [li,li,li,li,li,li]
[...$elems].forEach((ele) => {
ele.style.color = "red";
});
</script>
</body>
</html>
3. class를 이용한 요소 노드 취득
Document.prototype/Element.prototype.getElementsByClassName 메서드는 인수로 전달한 class 어트리뷰트 값을 갖는 모든 요소 노드들을 탐색하여 반환한다. 인수로 전달할 class 값은 공백으로 구분하여 여러 개의 class 를 지정할 수 있다. getElementsByClassName 메서드는 여러 개의 요소 노드 객체를 갖는 DOM 컬렉션 객체인 HTMLCollection 객체를 반환한다.
<!DOCTYPE html>
<html lang="ko">
<body>
<ul>
<li class="li unordered">li1</li>
<li class="li unordered">li2</li>
<li class="li unordered">li3</li>
</ul>
<ol>
<li class="li ordered">li1</li>
<li class="li ordered">li2</li>
<li class="li ordered">li3</li>
</ol>
<script>
// 클래스 이름이 'li'인 요소 노드를 모두 탐색하여 반환한다.
const $lis = document.getElementsByClassName("li");
console.log($lis); // HTMLCollection(6) [li.li.unordered, li.li.unordered, li.li.unordered, li.li.ordered, li.li.ordered, li.li.ordered]
// 클래스 이름이 'li unordered'인 요소 노드를 모두 탐색하여 반환한다.
const $ullis = document.getElementsByClassName("li unordered");
console.log($ullis); // HTMLCollection(3) [li.li.unordered, li.li.unordered, li.li.unordered]
</script>
</body>
</html>
4. CSS 선택자를 이용한 요소 노드 취득
CSS 선택자는 스타일을 적용하고자 하는 HTML 요소를 특정할 때 사용하는 문법입니다.
// 취득한 요소 노드 중 첫 버너째 요소 노드만 반환한다.
const $elem = document.querySelector('selector');
// 취득한 모든 요소 노드를 반환한다.
const $elems = document.querySelectorAll('selector');
| * | 전체 선택자 | 모든 요소를 선택 |
| p | 태그 선택자 | 모든 p 태그 요소를 모두 선택 |
| #foo | id 선택자 | id 값이 'foo'인 요소를 모두 선택 |
| .foo | class 선택자 | class 값이 'foo'인 요소를 모두 선택 |
| input[type=text] | 어트리뷰트 선택자 | input 요소 중에 type 어트리뷰트 값이 'text'인 요소를 모두 선택 |
| div p | 후손 선택자 | div 요소의 후손 요소 중 p 요소를 모두 선택 |
| div > p | 자식 선택자 | div 요소의 자식 요소 중 p 요소를 모두 선택 |
| p + ul | 인접 형제 선택자 | p 요소의 형제 요소 중에 p 요소 바로 뒤에 위치하는 ul 요소 선택 |
| p ~ ul | 일반 형제 선택자 | p 요소의 형제 요소 중에 p 요소 뒤에 위치하는 ul 요소를 모두 선택 |
| a:hover | 가상 클래스 선택자 | hover 상태인 a 요소를 모두 선택 |
| p::before | 가상 요소 선택자 | p 요소의 콘텐츠의 앞에 위치하는 공간선택, 일반적으로 content 프로퍼티와 함께 사용된다. |
CSS 선택자 문접은 getElementBy*** 메서드보다 다소 느린 것으로 알려져 있다. 하지만 CSS 선택자 문법을 사용하여 좀 더 주체적인 조건으로 요소 노드를 취득할 수 있고, 일관된 방식으로 요소 노드를 취득할 수 있다. 따라서 id 어트리뷰트가 있는 요소 노드를 취득하는 경우에는 getElementById 메서드를 사용하고 그 외의 경우에는 CSS 선택자 문법을 사용하는 것이 좋다.
5. 특정 요소 노드를 취득할 수 있는지 확인
Element.prototype.matches 메서드는 인수로 전달한 CSS 선택자를 통해 특정 요소 노드를 취득할 수 있는지 확인한다. 이벤트 위임을 사용할 때 유용하다.
const $apple = document.querySelector('.apple');
console.log($apple.matches('#fruits > li.apple')); // true
6. HTMLCollection과 NodeList
DOM 컬렉션 객체인 HTMLCollection과 NodeList는 DOM API가 여러 개의 결과값을 반환하기 위한 DOM 컬렉션 객체다.
HTMLCollection과 NodeList는 모두 유사 배열 객체이면서 이터러블이다. 따라서 for...of 와 스프레드 문법을 사용할 수 있다.
HTMLCollection과 NodeList의 중요한 특징은 노드 객체의 상태 변화를 실시간으로 반영하는 살아 있는 객체라는 것이다. HTMLCollection은 언제나 live 객체로 동작한다. 단, NodeList는 대부분의 경우 노드 객체의 상태 변화를 실시간으로 반영하지 않고 과거의 정적 상태를 유지하는 non-live 객체로 동작하지만 경우에 따라 live 객체로 동작할 때가 있다.
6.1 HTMLCollection
getElementsByTagName, getElementsByClassName 메서드가 반환하는 HTMLCollection 객체는 노드 객체의 상태 변화를 실시간으로 반영하는 살아 있는 DOM 컬렉션 개체다. 따라서 HTMLCollection 객체를 살아 있는 객체라고 부르기도 한다.
class 를 변경할 때 주의사항
<!DOCTYPE html>
<html lang="ko">
<head>
<style>
.red {color: red;}
.blue {color: blue;}
</style>
</head>
<body>
<ul id="fruits">
<li class="red">Apple</li>
<li class="red">Banana</li>
<li class="red">Orange</li>
</ul>
<script>
const $elems = document.getElementsByClassName("red");
console.log($elems); // HTMLCollection(3) [li.red, li.red, li.red]
for (let i = 0; i < $elems.length; i++) {
$elems[i].className = "blue";
}
console.log($elems); // HTMLCollection(1) [li.red]
</script>
</body>
</html>
위 예제는 모든 li 요소들이 blue로 변경되기 위한 코드지만, 실제로 blue로 변경된건 첫 번째와 세 번째 요소이다.
HTMLCollection 객체는 실시간으로 노드 객체의 상태 변경이 반영되어 요소를 제거합니다.
따라서 반복문 첫 번째 반복에서 $elems[0] 요소가 blue 로 변경되어 HTMLCollection 객체에는 첫 번째 요소가 실시간으로 제거됩니다. 두 번째 반복에서는 남아 있는 요소 중 두번째, 즉 $elems[1] 요소로 바뀐 처음에는 $elems[2] 였던 요소가 변경됩니다. 따라서 for 문으로 순회하면서 노드 객체의 상태를 변경해야 할 때 주의해야 합니다.
해결 방법으로는 for문을 역방향으로 순회하거나, while 문을 통해 노드 객체가 남아 있지 않을 때까지 무한 반복하기, forEach 문 사용하기 등이 있습니다.
6.2 NodeList
HTMLCollection 객체의 부작용을 해결학 위해 getElementByTagName, getElementsByClassName 메서든 대신 querySelectorAll 메서드를 사용하는 방법도 있다. querySelectorAll 메서드는 DOM 컬렉션 객체인 NodeList 객체를 반환한다. 이때 NodeList 객체는 실시간으로 노드 객체의 상태 변경을 반영하지 않는 객체입니다.
NodeList.prototype 은 forEacth와 item, entries, keys, values 메서드를 제공한다. NodeList 객체는 대부분의 경우 노드 객체의 상태 변경을 실시간으로 반영하지 않지만, childNodes 프로퍼티가 반환하는 NodeList 객체는 HTMLCollection 객체와 같이 실시간으로 노드 객체의 상태 변경을 반영하는 live 객체로 동작하므로 주의가 필요하다.
<!DOCTYPE html>
<html lang="ko">
<body>
<ul id="fruits">
<li>Apple</li>
<li>Banana</li>
</ul>
<script>
const $fruits = document.getElementById("fruits");
// fruits 요소의 자식 노드는 공백 텍스트 노드를 포함해 모두 5개다
const { childNodes } = $fruits;
console.log(childNodes); // NodeList(5) [text,li,text,li,text]
for (let i = 0; i < childNodes.length; i++) {
// removeChild 메서드가 호출될 때마다 NodeList 객체인 childNode가 실시간으로 변경된다
// 따라서 첫 번째, 세 번째, 다섯 번째 요소만 삭제된다.
$fruits.removeChild(childNodes[i]);
}
console.log(childNodes); // NodeList(2) [li,li]
</script>
</body>
</html>
이처럼 HTTMLCollection이나 NodeList 객체는 예상과 다르게 동작할 때가 있어 다루기 까다롭고 실수하기 쉽다. 따라서 노드 객체의 상태 변경과 상관없이 안전하게 DOM 컬렉션을 사용하려면 HTMLCollection이나 NodeList 객체를 배열로 변환하여 사용하는 것을 권장합니다.
HTMLCollection과 NodeList 객체는 모두 유사 배열 객체이면서 이터러블이다. 따라서 스프레드 문법이나 Array.from 메서드를 사용하여 간단히 배열로 변환할 수 있다.
<!DOCTYPE html>
<html lang="ko">
<body>
<ul id="fruits">
<li>Apple</li>
<li>Banana</li>
</ul>
<script>
const $fruits = document.getElementById("fruits");
const { childNodes } = $fruits;
console.log(childNodes); // NodeList(5) [text,li,text,li,text]
const chileList = Array.from(childNodes);
// 1. 스프레드 문법을 사용한 방식
[...childNodes].forEach((childNode) => {
$fruits.removeChild(childNode);
});
// 2. Array.from 을 사용한 방식
/* for (let i = 0; i < chileList.length; i++) {
$fruits.removeChild(chileList[i]);
} */
console.log(childNodes); // NodeList []
</script>
</body>
</html>
문제
문제1
1. 요소 노드와 어트리뷰트 노드는 부모 노드와 연결되어 있으므로, 요소 노드와 어트리뷰트 노드는 형제 노드가 될 수 있다.
2. 노드 객체는 공통된 기능일수록 프로토타입 체인의 상위에, 개별적인 고유 기능일수록 하위에 구축하여 노드 객체에 필요한 기능을 제공하는 상속 구조를 갖는다.
3. Document.prototype.getElementById 는 인수로 전달한 id 어트리뷰트 값을 갖는 하나의 요소 노드를 탐색하여 반환한다. id 값은 유일한 값이어야 하지만, 여러 개 존재하면 인수로 전달된 id 값을 갖는 마지막 요소 노드만 반환한다.
4. CSS 선택자 문법보다 getElementBy*** 메서드가 다소 빠른 편이므로, 가능한 모든 경우에 getElementBy*** 메서드를 사용하는 것을 권장한다.
문제2
CSS 선택자 문법과 getElementBy*** 메서드등을 사용하여 모든 p태그를 취득하는 방법을 2개 이상 작성해주세요.
<body>
<div id="containerDiv">
<p id="p1">hi</p>
<div id="firstDiv">
<p id="p2">hi</p>
</div>
<div id="secondDiv">
<p id="p3">hi</p>
</div>
<p id="p4">hi</p>
</div>
<script>
// Fill here
</script>
</body>
문제3
다음 예제는 li 요소들 중 class가 good인 li 요소만 삭제하고, 나머지 두 li를 출력하려고 했지만, 오류가 발생했습니다. 오류가 발생한 이유를 설명해 주세요.
Advanced : 나머지 두 li만 출력되게 코드를 수정해주세요(힌트 : node.nodeType === Node.ELEMENT_NODE 활용)
<body>
<ul id="group6">
<li class="party">토요일은</li>
<li class="good">6조</li>
<li class="party">파티</li>
</ul>
<script>
const $group6 = document.getElementById("group6");
const childNodes = $group6.childNodes;
for (let i = 0; i < childNodes.length; i++) {
const node = childNodes[i];
if (node.classList.contains("good")) {
$group6.removeChild(node);
}
}
console.log(childNodes);
</script>
</body>
답
문제1 (X 0 X X)
1. (p.680) 어트리뷰트 노드는 부모 노드와 연결되어 있지 않고, 지정된 HTML 요소의 요소 노드와 연결되어 있다. 즉, 어트리뷰트 노드는 부모 노드가 없으므로 요소 노드의 형제 관계가 될 수 없다.
3. Document.prototype.getElementById 는 인수로 전달한 id 어트리뷰트 값을 갖는 요소가 여러 개 존재하면 인수로 전달된 id 값을 갖는 첫 번째 요소 노드만 반환한다.
4. CSS 선택자 문법을 사용하여 좀 더 주체적인 조건으로 요소 노드를 취득할 수 있고, 일관된 방식으로 요소 노드를 취득할 수 있다. 따라서 id 어트리뷰트가 있는 요소 노드를 취득하는 경우에는 getElementById 메서드를 사용하고 그 외의 경우에는 CSS 선택자 문법을 사용하는 것이 좋다.
문제2
document.getElementsByTagName("p");
document.querySelectorAll("p");
document.querySelectorAll("div p");
document.querySelectorAll("div > p");
문제3
해당 코드는 "Uncaught TypeError: Cannot read properties of undefined (reading 'contains')"가 발생합니다.
childNodes에 포함된 요소 중에서 공백 텍스트 노드(Text Node)가 포함되어 있기 때문입니다.
[Advanced 정답]
<ul id="group6">
<li class="party">토요일은</li>
<li class="good">6조</li>
<li class="party">파티</li>
</ul>
<script>
const $group6 = document.getElementById("group6");
const childNodes = $group6.childNodes;
for (let i = 0; i < childNodes.length; i++) {
const node = childNodes[i];
// 해당 노드가 요소 노드가 아닐 때(텍스트일 때) 와 class에 good을 포함할 때
if (
node.nodeType !== Node.ELEMENT_NODE ||
node.classList.contains("good")
) {
$group6.removeChild(node);
i -= 1; // 삭제될 경우 실시간으로 반영되기 때문에 인덱스 값을 조절한다.
}
}
console.log(childNodes);
</script>
'딥다이브' 카테고리의 다른 글
| [딥다이브] 39장 DOM(6.DOM 조작 ~ 7.어트리뷰트) (2) | 2023.05.29 |
|---|---|
| [딥다이브] 39장 DOM(3.노드 탐색 ~ 5.요소 노드의 텍스트 조작) (0) | 2023.05.24 |
| [딥다이브] 25장 클래스 (3) | 2023.05.05 |
| [딥다이브] 19장 프로토타입 (0) | 2023.05.01 |
| [딥다이브] 38장 브라우저의 렌더링 과정 (1) | 2023.04.26 |
