DOM 둘러보기

DOM 둘러보기

2022-06-01 last update

21 minutes reading Development JavaScript

소개


이 시리즈의 이전 강좌How to Access Elements in the DOM에서는 document 객체의 내장 방법을 사용하여 ID, 클래스, 태그 이름과 조회 선택기를 통해 HTML 요소에 접근하는 방법을 소개했습니다.DOM의 구조는 tree of nodes, 루트 노드는 document, 요소, 주석 및 텍스트 노드를 포함한 기타 노드는 여러 가지로 구성됩니다.
일반적으로 각 요소를 미리 지정하지 않고 DOM에서 이동하려고 합니다.DOM 트리를 위아래로 탐색하는 방법과 지점 사이를 이동하는 방법을 배우는 것은 자바스크립트와 HTML을 어떻게 사용하는지 이해하는 데 매우 중요하다.
이 강좌에서 우리는 아버지, 아들, 형제 속성을 사용하여 DOM을 훑어보는 방법에 대해 토론할 것이다.

설치 프로그램


우선, 우리는 nodes.html라는 새 파일을 만들 것입니다. 이 파일은 아래 코드로 구성되어 있습니다.
노드html
<!DOCTYPE html>
<html>

<head>
  <title>Learning About Nodes</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>Shark World</h1>
  <p>The world's leading source on <strong>shark</strong> related information.</p>
  <h2>Types of Sharks</h2>
  <ul>
    <li>Hammerhead</li>
    <li>Tiger</li>
    <li>Great White</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 문서를 가지고 있다.style 태그에 기본 CSS를 추가하여 각 요소를 명확하게 표시하고 script 에서 일부 요소에 쉽게 접근할 수 있도록 변수를 만들었습니다.각 h1, pul 중 하나이기 때문에 각 getElementsByTagName 속성의 첫 번째 인덱스에 접근할 수 있습니다.

루트 노드

document 객체는 DOM의 각 노드의 루트입니다.객체는 실제로 window 객체의 속성이며 브라우저의 탭을 나타내는 글로벌 최상위 객체입니다. window 객체는 도구 모음, 창 높이 및 너비, 알림 및 경고 등의 정보에 액세스할 수 있습니다.document는 내부window의 내부로 구성된다.
다음은 각 문서에 포함될 루트 요소로 구성된 도표입니다.브라우저에 빈 HTML 파일을 로드하는 경우에도 이 세 노드가 DOM에 추가되고 해결됩니다.
소유물
노드
노드 유형document #document DOCUMENT_NODE document.documentElement html ELEMENT_NODE document.head head ELEMENT_NODE document.body body ELEMENT_NODE html, head, body 원소는 매우 흔하기 때문에 그것들은 document에 자신의 속성을 가지고 있다.
DevTools에서 콘솔을 열고 출력을 제출하고 확인하여 이 네 가지 속성 중 하나를 테스트합니다.또한 h1, p, ulscript 태그에 추가된 변수로 인해 생성된 요소를 반환합니다.

상위 노드


DOM의 노드는 다른 노드와의 관계에 따라 상위 노드, 하위 노드 및 동급 노드라고 합니다.모든 노드의 부모 노드는 보다 한 단계 높은 노드이거나 DOM 계층 구조에 더 가깝다document.상위 레벨 - parentNodeparentElement 을 얻을 수 있는 두 가지 속성이 있습니다.
소유물
얻다
parentNode
상위 노드
parentElement
상위 요소 노드
예제 nodes.html:
  • htmlhead,bodyscript의 모회사입니다.
  • bodyh1,h2,pul의 부급이지만 li보다li급이 낮기 때문이다.
  • 우리는 body 속성으로 p 원소의 부원소가 무엇인지 테스트할 수 있다.이 변수는 사용자 정의 parentNode 에서 나온 것입니다.
    1. p.parentNode;
    Output
    ► <body>...</body>
    p의 부모는document.getElementsByTagName('p')[0]이지만 우리는 어떻게 해야만 조부모를 얻을 수 있습니까? 이것은 두 개 이상의 수준입니까?우리는 속성을 함께 연결함으로써 이 점을 할 수 있다.
    1. p.parentNode.parentNode;
    Output
    ► <html>...</html>
    사용p 두 번, 우리는 body의 조부모를 검색했다.
    일부 속성은 노드의 부급을 검색할 수 있지만, 그들 사이에는 아래의 코드 단편과 같은 아주 작은 차이만 있다.
    1. // Assign html object to html variable
    2. const html = document.documentElement;
    3. console.log(html.parentNode); // > #document
    4. console.log(html.parentElement); // > null
    텍스트와 주석이 다른 노드의 부모 노드가 될 수 없기 때문에 거의 모든 노드의 부모 노드는 요소 노드입니다.그러나 parentNode의 부모 노드는 문서 노드이기 때문에 p 되돌아온다 html.일반적으로parentElement는 DOM 전체에서 더 많이 사용됩니다.

    하위 노드


    노드의 하위 노드는 그 다음 단계의 노드이다.중첩 단계를 초과하는 모든 노드를 일반적으로 하위 노드라고 부른다.
    소유물
    얻다
    null
    하위 노드
    parentNode
    첫 번째 하위 노드
    childNodes
    마지막 하위 노드
    firstChild
    요소 서브노드
    lastChild
    첫 번째 하위 요소 노드
    children
    마지막 하위 요소 노드firstElementChild 속성은 노드의 각 하위 노드의 실시간 목록을 되돌려줍니다.당신은 lastElementChild 원소가 세 개의 childNodes 원소를 얻기를 원할 수 있습니다.뭘 검색했는지 테스트해 봅시다.
    1. ul.childNodes;
    Output
    ► (7) [text, li, text, li, text, li, text]
    세 개의 ul 원소를 제외하고는 네 개의 텍스트 노드를 얻는다.JavaScript에서 생성되지 않은 HTML을 작성했기 때문에 DOM에서 요소 간의 들여쓰기를 텍스트 노드로 계산합니다.이것은 직관적이지 않습니다. DevTools의 Elements 탭에서 빈 노드가 제거되기 때문입니다.li 속성을 사용하여 첫 번째 하위 노드의 배경색을 변경하려고 하면 첫 번째 노드가 텍스트이기 때문에 실패합니다.
    1. ul.firstChild.style.background = 'yellow';
    1. Output
      Uncaught TypeError: Cannot set property 'background' of undefined
    li, firstChildchildren 속성은 원소 노드만 검색하기 위해 이러한 유형의 경우에 존재한다.firstElementChild 요소는 3개lastElementChild만 반환됩니다.ul.children를 사용하면 li 중 첫 번째firstElementChild의 배경색을 변경할 수 있습니다.
    1. ul.firstElementChild.style.background = 'yellow';
    상기 코드를 실행할 때, 웹 페이지는 배경색을 수정하기 위해 업데이트됩니다.

    기본 DOM 작업을 수행할 때 요소별 속성이 유용합니다.JavaScript에서 생성된 웹 응용 프로그램에서 모든 노드를 선택하는 속성을 사용할 수 있습니다. 이 경우 공백 줄 바꾸기와 축소가 존재하지 않기 때문입니다.
    li 순환은 모든 ul 원소를 교체하는 데 사용할 수 있다.
    1. for (let element of ul.children) {
    2. element.style.background = 'yellow';
    3. }
    이제 각 하위 요소에는 노란색 배경이 있습니다.
    for...of 요소는 텍스트와 요소를 포함하기 때문에 children 속성은 이 정보에 접근하는 데 도움이 됩니다.
    1. for (let element of p.childNodes) {
    2. console.log(element);
    3. }
    Output
    "The world's leading source on " <strong>​shark​</strong>​ " related information."
    pchildNodes 은 모든 Array properties and methods 그룹을 반환하지 않지만 자바스크립트 그룹과 유사한 모양과 동작을 가집니다.색인 번호로 노드에 접근하거나 childNodes 속성을 찾을 수 있습니다.
    1. document.body.children[3].lastElementChild.style.background = 'fuchsia';
    상기 코드는 children의 네 번째 하위 요소(length의 마지막 하위 요소(li를 찾아 스타일을 적용합니다.

    상위 및 하위 속성을 사용하여 DOM의 모든 노드를 읽어들일 수 있습니다.

    동급 노드


    노드의 동급은 DOM에서 같은 트리 레벨의 모든 노드입니다.동급 노드는 같은 유형의 노드가 아니라 텍스트, 요소 및 주석 노드가 동급 노드가 될 수 있습니다.
    소유물
    얻다
    ul
    이전 동급 노드
    body
    다음 동급 노드
    previousSibling
    이전 동급 요소 노드
    nextSibling
    다음 동급 요소 노드
    동급 속성은 하위 노드와 작업 방식이 같다. 왜냐하면 하나의 속성은 모든 노드를 두루 돌아다닐 수 있고, 하나의 속성은 요소 노드에만 사용되기 때문이다.previousElementSiblingnextElementSibling 은 지정된 노드에 이어 다음 노드를 가져오고 previousSiblingnextSibling 은 요소 노드만 가져옵니다.previousElementSibling 예에서 nextElementSibling 의 중간 요소를 선택합니다.
    1. const tiger = ul.children[1];
    JavaScript 웹 응용 프로그램이 아닌 DOM을 처음부터 만들기 때문에, DOM에 공백이 있기 때문에 이전 및 다음 요소 노드에 액세스하려면 요소 동급 속성을 사용해야 합니다.
    1. tiger.nextElementSibling.style.background = 'coral';
    2. tiger.previousElementSibling.style.background = 'aquamarine';
    이 코드를 실행할 때 nodes.htmlul 백그라운드에 적용하고 coralHammerhead 백그라운드에 적용해야 합니다.

    동급 속성은 부모 속성과 노드 속성과 같이 연결될 수 있다.

    결론


    이 강좌에서는 각 HTML 문서의 루트 노드에 접근하는 방법과 DOM 트리의 부모, 자식, 동급 속성을 훑어보는 방법을 설명합니다.
    How to Access Elements in the DOM와 본 강좌에서 배운 내용을 통해 귀하는 모든 사이트 DOM의 모든 노드를 자신 있게 방문할 수 있어야 합니다.