DOM을 탐색하는 방법
페이지 정보
작성자 운영자 작성일 19-06-14 16:56 조회 1,171 댓글 0동영상 강좌는 유튜브 채널 '웹학교'를 이용하시기 바랍니다.
DOM은 문서 노드가 루트에 있고 노드가 다른 모든 노드 (요소, 주석 및 텍스트 노드 포함)가 다양한 분기로 구성된 노드 트리로 구성되어 있다는 것을 알고 있습니다.
종종 모든 요소를 미리 지정하지 않고 DOM을 이동하려고 할 것입니다. JavaScript 및 HTML 작업 방법을 이해하려면 DOM 트리를 위 아래로 탐색하고 분기에서 분기로 이동하는 방법을 배우는 것이 중요합니다.
이 장에서는 부모, 자식 및 형제 속성을 사용하여 DOM을 탐색 (DOM을 걷거나 탐색하는 방법)하는 방법에 대해 설명합니다.
설정
먼저 다음 코드로 구성된 nodes.html이라는 새 파일을 만듭니다.
<!DOCTYPE html>
<html>
<head>
<title>노드 배우기</title>
<style>
* { border: 2px solid #dedede; padding: 15px; margin: 15px; }
html { margin: 0; padding: 0; }
body { max-width: 600px; font-family: sans-serif; color: #333; }
</style>
</head>
<body>
<h1>웹학교</h1>
<p>웹학교에서 제공하는 서비스중 <strong>강좌</strong>에 대한 정보입니다.</p>
<h2>강좌 종류</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
</ul>
</body>
<script>
const h1 = document.getElementsByTagName('h1')[0]
const p = document.getElementsByTagName('p')[0]
const ul = document.getElementsByTagName('ul')[0]
</script>
</html>
웹 브라우저에서 파일을 로드 하면 다음 스크린샷과 같은 렌더링이 표시됩니다.
이 예제 웹 사이트에는 몇 가지 요소가 포함 된 HTML 문서가 있습니다. 몇 가지 기본 CSS가 스타일 태그에 추가되어 각 요소를 분명하게 볼 수 있게 해주었으며 스크립트에 몇 가지 요소를 쉽게 액세스 할 수 있도록 몇 가지 변수가 만들어졌습니다. 각 h1, p 및 ul 중 하나만 있으므로, 각 getElementsByTagName 등록 정보에서 첫 번째 색인에 액세스 할 수 있습니다.
루트 노드(Root Nodes)
document 객체는 DOM에 있는 모든 노드의 루트입니다. 이 객체는 실제로 브라우저의 탭을 나타내는 전역, 최상위 객체인 window 객체의 속성입니다. window 개체는 도구 모음, 창의 높이와 너비, 프롬프트 및 경고와 같은 정보에 액세스 할 수 있습니다. 문서(document)는 내부 윈도우(window)의 내부로 구성됩니다.
다음은 모든 문서에 포함될 루트 요소로 구성된 차트입니다. 빈 HTML 파일이 브라우저에 로드 되더라도 이 세 노드는 DOM에 추가되고 파싱됩니다.
Property |
Node |
Node Type |
document |
#document |
DOCUMENT_NODE |
document.documentElement |
html |
ELEMENT_NODE |
document.head |
head |
ELEMENT_NODE |
document.body |
body |
ELEMENT_NODE |
html, head 및 body 요소는 매우 일반적이므로 문서에 자체 속성이 있습니다.
DevTools(개발자도구)에서 콘솔을 열고 제출하고 출력을 보면서 이 네 가지 속성을 테스트하십시오. script 태그에 추가 한 변수로 인해 요소를 반환하는 h1, p 및 ul도 테스트 할 수 있습니다.
부모 노드(Parent Nodes)
DOM의 노드는 다른 노드와의 관계에 따라 부모, 자식 및 형제로 참조됩니다. 모든 노드의 부모는 노드의 한 수준 위에 있거나 DOM 계층의 문서에 더 가까운 노드입니다. 부모를 얻는 데는 두 가지(parentNode 및 parentElement) 속성이 있습니다.
Property |
Gets |
parentNode |
Parent Node |
parentElement |
Parent Element Node |
node.html 예 :
- html은 head, body 및 script의 부모입니다.
- body는 h1, h2, p 및 ul의 부모이지만 li는 본문에서 두 레벨 아래이므로 li의 부모는 아닙니다.
우리는 p 요소의 부모가 parentNode 속성으로 무엇인지 테스트 할 수 있습니다. 이 p 변수는 사용자 정의 document.getElementsByTagName('p')[0] 선언에서 가져옵니다.
p.parentNode;
p의 부모는 본문이지만 위의 두 수준 인 조부모를 어떻게 얻을 수 있습니까? 우리는 속성을 함께 연결함으로써 그렇게 할 수 있습니다.
p.parentNode.parentNode;
parentNode를 두 번 사용하여 p의 조부모를 검색했습니다.
노드의 부모를 검색하는 속성이 있지만 아래의 코드에서 설명하는 것과 같이 노드 사이에는 작은 차이가 있습니다.
// html 변수에 html 객체 할당
const html = document.documentElement;
console.log(html.parentNode); // > #document
console.log(html.parentElement); // > null
거의 모든 노드의 부모는 요소 노드입니다. 텍스트와 주석은 다른 노드의 부모가 될 수 없기 때문입니다. 그러나 html의 부모는 문서 노드이므로 parentElement는 null을 반환합니다. 일반적으로 parentNode는 DOM을 탐색 할 때보다 일반적으로 사용됩니다.
자식 노드(Children Nodes)
노드의 하위 노드는 노드의 한 수준 아래에 있는 노드입니다. 하나의 중첩 수준을 초과하는 노드는 일반적으로 하위 노드라고 합니다.
Property |
Gets |
childNodes |
Child Nodes |
firstChild |
First Child Node |
lastChild |
Last Child Node |
children |
Element Child Nodes |
firstElementChild |
First Child Element Node |
lastElementChild |
Last Child Element Node |
childNodes 속성은 노드의 모든 자식에 대한 실시간 목록을 반환합니다. ul 요소가 세 개의 li 요소를 가져올 것으로 예상 할 수 있습니다. 검색 한 내용을 테스트 해 봅시다.
ul.childNodes;
세 개의 li 요소 외에도 네 개의 텍스트 노드가 있습니다. 이것은 우리 자신의 HTML (자바 스크립트로 생성되지 않은)을 작성했고 요소들 사이의 들여 쓰기가 DOM에서 텍스트 노드로 계산되기 때문입니다. DevTools의 Elements 탭은 공백 노드를 제거하므로 직관적이지 않습니다.
firstChild 속성을 사용하여 첫 번째 자식 노드의 배경색을 변경하려고 하면 첫 번째 노드가 텍스트이기 때문에 실패합니다.
ul.firstChild.style.background = 'yellow';
children, firstElementChild 및 lastElementChild 속성은 요소 노드 만 검색하기 위해 이러한 유형의 상황에 존재합니다. ul.children은 세 개의 li 요소 만 반환합니다.
firstElementChild를 사용하여 ul에있는 첫 번째 li의 배경색을 변경할 수 있습니다.
ul.firstElementChild.style.background = 'yellow';
위 코드를 실행하면 웹 페이지가 업데이트 되어 배경색이 수정됩니다.
이 예제에서와 같이 기본 DOM 조작을 수행 할 때 요소별 속성이 매우 유용합니다. 자바 스크립트에서 생성 된 웹 응용 프로그램에서는 모든 노드를 선택하는 속성이 사용되는 경향이 있습니다.이 경우 새 줄과 들여 쓰기가 존재하지 않기 때문입니다.
for ... of 루프는 모든 자식 요소를 반복하는 데 사용할 수 있습니다.
for (let element of ul.children) {
element.style.background = 'yellow';
}
이제 각 자식 요소는 노란색 배경을 갖습니다.
우리의 p 요소는 내부에 텍스트와 요소를 가지고 있으므로 childNodes 속성은 해당 정보에 액세스하는 데 유용합니다.
for (let element of p.childNodes) {
console.log(element);
}
childNodes 및 children은 모든 Array 속성 및 메서드를 사용하여 배열을 반환하지 않지만 JavaScript 배열과 유사하게 동작합니다. 인덱스 번호로 노드에 액세스하거나 길이 속성을 찾을 수 있습니다.
document.body.children[3].lastElementChild.style.background = 'violet';
위의 코드는 body의 네 번째 자식 요소 (ul)의 마지막 요소 child (li)를 찾고 스타일을 적용합니다.
부모 및 자식 속성을 사용하면 DOM의 모든 노드를 검색 할 수 있습니다.
형제 노드 (Sibling Nodes)
노드의 형제는 DOM의 동일한 트리 수준에있는 노드입니다. 형제는 동일한 유형의 노드 일 필요는 없습니다. 텍스트, 요소 및 주석 노드는 모두 형제가 될 수 있습니다.
Property |
Gets |
previousSibling |
Previous Sibling Node |
nextSibling |
Next Sibling Node |
previousElementSibling |
Previous Sibling Element Node |
nextElementSibling |
Next Sibling Element Node |
형제 속성은 자식 노드와 동일한 방식으로 작동합니다. 즉, 모든 노드를 탐색하는 속성 집합과 요소 노드에만 적용되는 속성 집합이 있습니다. previousSibling 및 nextSibling은 지정된 노드의 직전 또는 직후의 다음 노드를 가져오고 previousElementSibling 및 nextElementSibling은 요소 노드만 가져옵니다.
nodes.html 예제에서 ul의 중간 요소를 선택합니다.
const lecture = ul.children[1];
자바 스크립트 웹 앱이 아닌 처음부터 DOM을 만들었으므로 DOM에 공백이 있으므로 이전 요소 노드와 다음 요소 노드에 액세스하려면 요소 형제 속성을 사용해야 합니다.
lecture.nextElementSibling.style.background = 'lightblue';
lecture.previousElementSibling.style.background = 'darkgray';
이 코드를 실행하면 HTML의 배경에 darkgray와 Javascript의 배경에 lightblue를 적용해야 합니다.
형제 속성은 부모 및 노드 속성처럼 함께 연결할 수 있습니다.
이 장에서는 모든 HTML 문서의 루트 노드에 액세스하는 방법과 부모, 자식 및 형제 속성을 통해 DOM 트리를 이동하는 방법에 대해 살펴봤습니다.
댓글목록 0
등록된 댓글이 없습니다.
