안녕하세요, 오늘은 DOM과 DOM에서 요소를 선택하는 것에 대해 정리해보겠습니다.
우선 DOM이란? Document Object Model의 약어로 직역하자면 문서 객체 모델이라는 뜻입니다. 웹페이지에 나타난 태그들을 객체로 다룰 수 있는 것이라고 생각하면 됩니다. 이전 시간에 배웠던 document 객체가 웹의 최상단에 있는 객체입니다! 제 생각에 DOM을 이해하는 것이 프론트엔드 개발자로서 가장 중요하다고 생각하여 "DOM을 께우치다"라는 책을 사서 읽고 있습니다. 내용이 방대하고 저도 이해를 완벽히 하지 못해 여기서는 기본 개념에 대해서만 정리하고 나중에 깊게 정리해보도록 하겠습니다!
실제로 HTML을 살펴보면 window - document에서 시작하여 html/ head/ body 등 태그들이 밑으로 물려 있는데요 이렇게 연결되어 나타나는 것이 나무 모양과 비슷하여 DOM Tree라고 합니다. DOM Tree에서는 각 객체를 노드(Node)라고 표현하며 각 노드끼리의 관계를 부모 노드(Parent node)와 자식 노드(Child node), 옆으로 같은 위치의 노드끼리는 형제 노드(Sibling node)라고 부릅니다.
ex) <html> 및에 <head>, <body> 가 있으므로 <html>은 부모 노드, <head>,<body>는 자식 노드라고 부르며 동시에 <head>와 <body>는 형제 노드입니다!
DOM Tree를 구성하는 가장 중요한 노드로는 태그를 표현하는 노드를 요소 노드(Element Node)라고 부르며 문자를 표현하는 노드를 텍스트 노드(Text Node)가 있습니다. 일반적으로 텍스트 노드는 요소 노드의 자식 노드가 되며 따로 스스로는 자식을 가질 수 없으므로 리프 노드(Leaf node)라고도 부릅니다.
DOM Tree 안에서 원하는 태그를 선택하는 방법에 대해 정리해보겠습니다.
◆ 요소 노드에 대한 프로퍼티 (요소 노드인 경우에만 존재!! 텍스트 노드는 Nope!)
-. element.child : element의 자식 요소 모음(HTMLCollection)
-. element.firstElementChild : element의 첫 번째 자식 요소 하나
-. element.lastElementChild : element의 마지막 자식 요소 하나
-. element.parentElement : element의 부모 요소 하나
-. element.previousElementSibling : element의 이전 혹은 좌측에 있는 요소 하나
-. element.nextElementSibling : element의 다음 혹은 우측에 있는 요소 하나
◆ 모든 노드에 대한 프로퍼티 (텍스트 노드도 가능)
-. node.childNodes : node의 자식 노드 모음(NodeList)
-. node.firstChild : node의 첫 번째 자식 노드 하나
-. node.lastChild : node의 마지막 자식 노드 하나
-. node.parentNode : node의 부모 요소 하나
-. node.previousSibling : node의 이전 혹은 좌측에 있는 노드 하나
-. node.nextSibling : node의 다음 혹은 우측에 있는 노드 하나
여기서 모든 노드가 공통으로 사용 가능한 프로퍼티 사용을 지양해야 하는 이유를 설명드리겠습니다.
HTML에서 태그와 태그 사이의 줄 바꿈 및 들여 쓰기로 인한 띄어쓰기도 텍스트 노드로 생성이 되기 때문에 원하는 결과를 못 얻을 가능성이 높습니다! 일반적으로 우리가 자바스크립트로 웹 문서에 접근할 때는 텍스트 노드보다 요소 노드를 사용할 경우가 많습니다! 따라서 요소 노드에 대한 이동 프로퍼티를 이용하는 것이 HTML에 안전하게 접근할 수 있습니다!
문제를 통해 좀 더 살펴보겠습니다.
<!-- HTML -->
<body>
<h2>진행 중인 토픽</h2>
<ul id="doing-list">
<li>인터랙티브 자바스크립트</li>
<li>프로그래밍 언어 이해하기</li>
<li>프로그래머의 세계 이해하기</li>
<li>소프트웨어 이해하기</li>
</ul>
<h2>완료 한 토픽</h2>
<ul id="done-list">
<li>프로그래밍 시작하기 in JavaScript</li>
<li>프로그래밍 핵심 개념 in JavaScript</li>
<li>프로그래밍과 데이터 in JavaScript</li>
<li>HTML/CSS 시작하기</li>
<li>HTML/CSS 핵심 개념</li>
<li>반응형 웹 퍼블리싱</li>
</ul>
<script src="index.js"></script>
</body>
<!-- 문제 -->
const standard = document.querySelector('body'); // body로 부터 요소를 선택하자
standard.children[2].previousElementSibling.children[0];
// children[2] -> h2 , previousElementSibling -> ul, children[0] -> <li>인터랙티브 자바스크립트</li>
standard.firstElementChild.nextElementSibling.firstElementChild;
// firstElementChild -> h2, nextElementSibling -> ul, firstElementChild -> <li>인터랙티브 자바스크립트</li>
standard.lastElementChild.previousElementSibling.previousElementSibling.firstElementChild;
// lastElementChild -> script, previousElementSibling -> ul, previousElementSibling -> <h2>완료 한 토픽</h2>
// firstElementChild를 해야하는데 <h2>는 자식 요소가 없으므로 null이 선택된다!
standard.children[1].children[0].nextElementSibling.previousElementSibling;
// children[1] -> <ul id="doing-list">, children[0] -> <li>인터랙티브 자바스크립트</li> -> nextElementSibling.previousElementSibling 이므로 원위치 -> <li>인터랙티브 자바스크립트</li>'Web 개발 > JS' 카테고리의 다른 글
| Javascript - 요소 노드 추가 (0) | 2021.06.28 |
|---|---|
| Javascript - innerHTML, outerHTML, textContent (0) | 2021.06.27 |
| Javascript - CSS 선택자 선택 (0) | 2021.06.24 |
| Javascript - array(Quiz) (0) | 2021.06.22 |
| Javascript - array (0) | 2021.06.21 |
댓글