[JS-중급편-DOM] 5. DOM 탐색

 

 

지금 쯤 깨달았을지 모르지만, 우리의 DOM은 거대한 나무처럼 보입니다.

 

위험하게 나뭇가지에 매달려 있고 뾰족한 것들을 피하려고 노력하는 거대한 나무입니다.

 

좀 더 기술적으로 이해하기 위해 DOM의 요소는 브라우저에서 최종적으로 보게 될 내용을 정의하는 계층 구조로 배열됩니다.

 

 

이 계층은 HTML 요소를 구성하는 데 사용됩니다.

 

또한 CSS 스타일 규칙이 어떤 스타일에 어떤 스타일을 적용할지 이해하는데도 사용됩니다.

 

자바 스크립트 관점에서 이 계층 구조는 약간의 복잡성을 추가합니다.

 

DOM에서 현재 우리가 어디에 있고 어디에 있어야 하는지 알아내기 위해 상당한 시간을 할애해 공부해 보겠습니다.

 

 

주변에서 길 찾기

 

요소를 찾아서 멋진 작업을 수행하기 전에 먼저 요소가 있는 위치에 도달해야합니다.

 

이 주제를 다루는 가장 쉬운 방법은 상단부터 시작하여 끝까지 밀어내는 것입니다.

 

그것이 바로 우리가 할 일입니다.

 

DOM 상단의 뷰는 window, document 및 html 요소(elements)로 구성됩니다.

 

이 세 가지가 매우 중요하기 때문에 DOM은 window, document, 그리고 document.documentElement를 통해 쉽게 액세스 할 수 있도록 합니다.

 

let windowObject = window; // um....
let documentObject = document;  // this is probably unnecessary
let htmlElement = document.documentElement;

 

한 가지 주목할 점은 window와 document가 모두 전역 속성이라는 것입니다.

 

위 코드에서 처럼 명시적으로 선언할 필요가 없습니다.

 

HTML 요소 수준 아래로 내려가면 DOM이 분기되어 더 흥미로워집니다.

 

이 시점에서 여러 가지 탐색 방법이 있습니다.

 

우리가 많이 본 한 가지 방법은 querySelector 및 querySelectorAll을 사용하여 관심 있는 요소를 정확하게 얻는 것입니다.

 

많은 실제 사례에서 이 두 가지 방법은 너무 제한적입니다.

 

때때로 우리는 우리가 가고 싶은 곳을 모릅니다.

 

querySelector 및 querySelectorAll 메서드는 여기서 도움이 되지 않습니다.

 

DOM을 탐색할 때 우리는 항상 어디로 가고 싶어 합니다.

 

여기서 DOM이 제공하는 다양한 내장 속성이 도움이 될 것이며, 다음에는 이러한 속성을 살펴볼 것입니다.

 

우리에게 도움이 되는 것은 DOM의 모든 요소에 의존할 부모, 형제자매, 자식의 조합이 적어도 하나는 있다는 것을 아는 것입니다.

 

이를 시각화하려면 다음 다이어그램에서 div 및 script 요소가 포함된 행을 살펴보십시오.

 

 

 

div 및 script 요소는 모두 형제입니다.

 

그들이 형제 인 이유는 부모로서 body 요소를 공유하기 때문입니다.

 

script 요소에는 자식이 없지만 div 요소에는 자식이 있습니다. img, h1, p 및 div는 div 요소의 자식이며 동일한 부모의 형제입니다.

 

실생활에서와 마찬가지로 부모, 자식 및 형제 관계는 트리에서 우리가 초점을 맞추고 있는 위치를 기반으로 합니다.

 

우리가 바라보는 각도에 따라 거의 모든 요소가 여러 가족 역할을 할 수 있습니다.

 

이 모든 과정에서 우리를 돕기 위해 우리가 의지 할 몇 가지 속성이 있습니다.

 

이러한 속성은 firstChild, lastChild, parentNode, children, previousSibling 및 nextSibling입니다.

 

이름 만보고 이러한 속성이 어떤 역할을 하는지 추론할 수 있어야 합니다.

 

 

형제자매 및 부모 다루기

 

이러한 속성 중 가장 다루기 쉬운 속성은 부모와 형제자매입니다. 

 

이에 대한 관련 속성은 parentNode, previousSibling 및 nextSibling입니다. 

 

다음 다이어그램은 이러한 세 가지 속성의 작동 방식을 보여줍니다.

 

 

이 다이어그램은 조금 복잡해 보이지만 여기서 무슨 일이 일어나고 있는지 알아볼 수 있습니다.

 

parentNode 속성은 요소의 부모를 가리킵니다.

 

previousSibling 및 nextSibling 속성을 사용하면 요소가 이전 또는 다음 형제를 찾을 수 있습니다.

 

화살표 방향으로 이동하여 다이어그램에서 시각화된 것을 볼 수 있습니다.

 

마지막 줄에서 img의 nextSibling은 div입니다.

 

우리 div의 previousSibling은 img입니다. 마지막행 img, div 요소에서 parentNode에 액세스 하면 두 번째 행의 상위 div로 이동합니다. 모두 매우 간단합니다.

 

 

아이를 좀 갖자!

 

조금 덜 간단한 것은 자식이 모든 것에 어떻게 들어맞는지입니다.

 

다음 다이어그램에서 firstChild, lastChild 및 children 속성을 살펴보겠습니다.

 

 

firstChild 및 lastChild 속성은 부모의 첫 번째 및 마지막 자식 요소를 참조합니다.

 

이 예제에서 body 요소의 경우처럼 부모에 자식이 하나만 있는 경우 firstChild와 lastChild는 동일한 것을 가리 킵니다.

 

요소에 자식이 없으면 이러한 속성은 null을 반환합니다.

 

우리가 살펴본 다른 속성에 비해 까다로운 것은 children 속성입니다.

 

부모의 자식 속성에 액세스 하면 기본적으로 부모가 가진 자식 요소의 컬렉션을 얻습니다.

 

이 컬렉션은 Array가 아니지만 Array와 유사한 능력을 가지고 있습니다.

 

배열과 마찬가지로이 컬렉션을 반복하거나 다이어그램에서 보는 것과 같이 자식에 개별적으로 액세스 할 수 있습니다.

 

이 컬렉션에는 부모가 처리하는 자식 수를 알려주는 length 속성도 있습니다.

 

여기에서 머리가 빙빙 돌더라도 걱정하지 마십시오. 다음 섹션의 스니펫은 모호함을 명확히 하는 데 도움이 될 것입니다.

 

 

함께 모아서

 

이제 DOM을 탐색하는 데 필요한 모든 중요한 속성에 대해 이해했으므로 실제 코드를 살펴보겠습니다.

 

 

자녀가 있는지 확인

 

요소에 자식이 있는지 확인하려면 다음과 같이 할 수 있습니다.

let bodyElement = document.querySelector("body");
        
if (bodyElement.firstChild) {
    // do something interesting
}

 

이 if문은 자식이 없으면 null을 반환합니다.

 

타이핑을 좋아한다면 bodyElement.lastChild 또는 bodyElement.children.count를 사용할 수도 있지만 위처럼 단순한 게 좋습니다.

 

 

모든 자식 요소에 액세스

 

부모의 모든 자식에 액세스 하려면 for 루프에 의존할 수 있습니다.

 

let bodyElement = document.body;

for (let i = 0; i < bodyElement.children.length; i++) {
    let childElement = bodyElement.children[i];

    document.writeln(childElement.tagName);
}

 

Array와 마찬가지로 children 및 length 속성 속성을 사용하고 있습니다.

 

주목할 점은이 컬렉션이 실제로 배열이 아니라는 것입니다.

 

우리가 사용하고자 하는 거의 모든 Array 메서드는 children 속성이 반환하는 이 컬렉션에서 사용할 수 없습니다.

 

 

DOM 걷기

 

마지막 스니펫은 지금까지 본 모든 것 중 일부를 다룹니다.

 

이 스니펫은 DOM을 재귀적으로 살펴보고 찾을 수 있는 모든 HTML 요소를 다룹니다.

 

function theDOMElementWalker(node) {
    if (node.ELEMENT_NODE === 1) {

        //console.log(node.tagName);

        node = node.firstChild;

        while (node) {
            theDOMElementWalker(node);
            node = node.nextSibling;
        }
    }
}

 

이 함수가 작동하는지 확인하려면 걷기를 시작하려는 노드를 전달하여 호출하면 됩니다.

 

let texasRanger = document.querySelector("#texas");
theDOMElementWalker(texasRanger);

 

이 예에서는 texasRanger 변수가 참조하는 요소에 대해 DOMElementWalker 함수를 호출합니다.

 

 이 스크립트가 찾은 요소에서 일부 코드를 실행하려면 주석 처리된 줄을 원하는 대로 바꿉니다.

 

 

결론

 

DOM에서 길을 찾는 것은 모든 JavaScript 개발자가 숙지해야 하는 기술 중 하나입니다.

 

이 튜토리얼은 기술적으로 가능한 것에 대한 개요를 제공했습니다.

 

이것을 보다 실용적인 방법에 적용하는 것은 전적으로 당신에게 달려 있습니다...

 

또는 이러한 것들을 도와주는 멋진 친구입니다.

 

즉, 후속 자습서에서는 DOM으로 할 수 있는 모든 작업에 대한 심층 분석을 계속하기 위해 여기서 살펴본 내용을 확장할 것입니다.