DOM 트리 및 노드 이해

DOM 트리 및 노드 이해

2022-06-01 last update

21 minutes reading Development JavaScript

소개


DOM은 일반적으로 DOM 트리라고 불리며 노드라는 개체 트리로 구성됩니다.Introduction to the DOM 에서는 문서 객체 모델(DOM)이 무엇인지, 객체에 액세스하고 console 속성을 수정하는 방법, HTML 소스 코드와 DOM 간의 차이에 대해 설명합니다.
이 강좌에서 우리는 HTML 용어를 되돌아볼 것이다. 이것은 자바스크립트와 DOM을 사용하는 데 매우 중요하다. 우리는 DOM 트리, 노드가 무엇인지, 그리고 가장 흔히 볼 수 있는 노드 유형을 어떻게 식별하는지 이해할 것이다.마지막으로, 우리는 컨트롤러를 뛰어넘어 JavaScript 프로그램을 만들어서 상호작용으로 DOM을 수정할 것입니다.

HTML 용어


HTML과 JavaScript 용어를 이해하는 것은 DOM을 사용하는 방법을 이해하는 데 매우 중요합니다.HTML 용어를 간략하게 살펴보겠습니다.
우선 이 HTML 요소를 살펴보겠습니다.
<a href="index.html">Home</a>
여기에 닻 요소가 하나 있는데, 이것은 document에 대한 링크이다.
  • index.html 레이블
  • a속성
  • href 속성 값
  • index.html는 텍스트입니다.
  • 시작 태그와 끝 태그 사이의 모든 컨텐트가 결합되어 전체 HTML 요소를 구성합니다.
    우리는 previous tutorialHome 과 협력할 것이다.
    지수html
    <!DOCTYPE html>
    <html lang="en">
    
      <head>
        <title>Learning the DOM</title>
      </head>
    
      <body>
        <h1>Document Object Model</h1>
      </body>
    
    </html>
    
    JavaScript를 사용하여 요소에 액세스하는 가장 간단한 방법은 index.html 속성을 통과하는 것입니다.위의 링크를 id 파일에 추가합니다. 여기서 index.htmlid 입니다.
    지수html
    ...
    <body>
      <h1>Document Object Model</h1>
      <a id="nav" href="index.html">Home</a>
    </body>
    ...
    
    브라우저 창에서 페이지를 로드하거나 다시 로드하고 코드가 업데이트되었는지 확인하기 위해 DOM을 봅니다.
    우리는 nav 방법으로 전체 요소에 접근할 것이다.콘솔에서 다음을 입력합니다.
    1. document.getElementById('nav');
    Output
    <a id="nav" href="index.html">Home</a>
    우리는 getElementById()를 사용하여 전체 원소를 검색했다.이제 링크 getElementById() 에 액세스할 때마다 객체와 메서드를 입력할 필요가 없으며 요소를 변수에 넣어 쉽게 사용할 수 있습니다.
    1. let navLink = document.getElementById('nav');
    nav 변수는 앵커 요소를 포함합니다.여기서 우리는 속성과 값을 쉽게 수정할 수 있다.예를 들어, 등록 정보를 변경하여 링크의 위치를 변경할 수 있습니다.
    1. navLink.href = 'https://www.wikipedia.org';
    또한 등록 정보를 재지정하여 텍스트 내용을 변경할 수도 있습니다.
    1. navLink.textContent = 'Navigate to Wikipedia';
    현재 컨트롤러에 있거나 Elements 태그를 확인하여 요소를 볼 때 요소가 어떻게 업데이트되는지 볼 수 있습니다.
    1. navLink;
    Output
    <a id="nav" href="https://www.wikipedia.org/">Navigate to Wikipedia</a>
    이것도 사이트의 앞부분에 반영된다.

    페이지를 새로 고치면 모든 컨텐트가 원래 값으로 복원됩니다.
    이때 navLink 방법으로 요소에 접근하는 방법, 변수에 요소를 분배하는 방법, 요소의 속성과 값을 수정하는 방법을 알아야 합니다.

    DOM 트리 및 노드


    DOM의 모든 항목은 노드로 정의됩니다.노드는 여러 종류가 있지만 우리가 가장 자주 사용하는 것은 세 가지가 있다.
  • 요소 노드
  • 텍스트 노드
  • 주석 노드
  • HTML 요소가 DOM의 항목일 때 요소 노드라고 합니다.요소 이외의 개별 텍스트는 모두 텍스트 노드이며 HTML 주석은 주석 노드입니다.이 세 가지 노드 유형을 제외하고 href 자체도 하나의 문서 노드로 모든 다른 노드의 뿌리이다.
    DOM은 일반적으로 DOM 트리라고 하는 중첩 노드의 트리 구조로 구성됩니다.당신은 부모, 자녀, 형제자매로 구성된 조상 대대로 내려오는 가보에 익숙할 것입니다.DOM의 노드는 다른 노드와의 관계에 따라 상위 노드, 하위 노드 및 동급 노드라고도 합니다.
    프레젠테이션하려면 textContent 파일을 만듭니다.우리는 텍스트, 주석, 요소 노드를 추가할 것이다.
    노드html
    <!DOCTYPE html>
    <html>
    
      <head>
        <title>Learning About Nodes</title>
      </head>
    
      <body>
        <h1>An element node</h1>
        <!-- a comment node -->
        A text node.
      </body>
    
    </html>
    
    document 요소 노드는 부모 노드입니다.documentnodes.htmlhtml의형제자매와자녀입니다.head에는 동급 노드인 세 개의 하위 노드가 포함되어 있습니다. 노드의 유형은 중첩된 단계를 변경하지 않습니다.
    참고: HTML로 생성된 DOM을 사용할 경우 HTML 소스 코드의 들여쓰기는 DevTools 요소 탭에서 볼 수 없는 많은 빈 텍스트 노드를 생성합니다.이해 Whitespace in the DOM

    노드 유형 식별


    문서의 각 노드에는 body 속성을 통해 액세스할 수 있는 노드 유형이 있습니다.모질라 개발자 네트워크에는 최신 목록all node type constants이 있습니다.다음은 우리가 이 강좌에서 사용하는 가장 흔히 볼 수 있는 노드 유형의 도표이다.
    노드 유형
    가치
    인스턴스html일.body 컴포넌트nodeType삼.
    요소에 속하지 않는 텍스트ELEMENT_NODE팔.<body>개발자 도구의 요소 탭에서 DOM의 행을 클릭하고 강조표시할 때마다 옆에 TEXT_NODE 값이 표시됩니다.이것은 입력COMMENT_NODE을 통해 개발자 도구의 현재 활동 요소에 접근하는 매우 편리한 방법이다.
    노드 콘솔에서html에서 <!-- an HTML comment -->의 첫 번째 요소, 즉 == $0 요소를 클릭합니다.

    콘솔에서 $0 속성을 사용하여 현재 선택한 노드의 노드 유형을 가져옵니다.
    1. $0.nodeType;
    Output
    1
    body 요소를 선택하면 h1 을 출력으로 표시하고 nodeType 와 관련된 요소를 볼 수 있습니다.텍스트와 주석에 대해 같은 작업을 수행하면 각각 h11 을 출력합니다.
    요소에 액세스하는 방법을 알고 있으면 DOM에서 요소를 강조 표시하지 않고 노드 유형을 볼 수 있습니다.
    1. document.body.nodeType;
    Output
    1
    ELEMENT_NODE 속성을 사용하여 텍스트나 주석 노드의 값과 3 요소의 태그 이름을 가져올 수 있습니다.

    이벤트를 사용하여 DOM 수정


    지금까지 우리는 콘솔에서 DOM을 수정하는 방법만 보았을 뿐, 우리가 본 것은 단지 일시적인 것이다.페이지를 새로 고칠 때마다 변경 사항이 손실됩니다.Introduction to the DOM 강좌에서 우리는 컨트롤러를 사용하여 주체의 배경색을 업데이트합니다.우리는 이 강좌에서 배운 내용을 결합하여 상호작용 단추를 만들 수 있으며, 이 단추를 눌렀을 때 이 동작을 실행할 수 있다.8 파일로 돌아가서 nodeType 요소를 추가합니다.또한 새 nodeValue 디렉토리 nodeName 에 새 파일에 대한 링크를 추가합니다.
    지수html
    <!DOCTYPE html>
    <html lang="en">
    
      <head>
        <title>Learning the DOM</title>
      </head>
    
      <body>
        <h1>Document Object Model</h1> 
        <button id="changeBackground">Change Background Color</button>
        
        <script src="scripts.js"></script>
      </body>
    
    </html>
    
    JavaScript의 이벤트는 사용자가 수행한 작업입니다.사용자가 요소에 마우스를 걸거나 요소를 클릭하거나 키보드의 특정 키를 눌렀을 때 이벤트 유형입니다.이런 특수한 상황에서, 우리는 우리의 단추가 사용자가 눌렀을 때 동작을 실행할 수 있도록 감청하고 준비할 수 있기를 바란다.우리는 단추에 이벤트 탐지기를 추가해서 이 점을 실현할 수 있다.index.html를 생성하여 새 button 디렉토리에 저장합니다.파일에서 먼저 id 요소를 찾아 변수에 할당합니다.
    js/스크립트.회사 명
    let button = document.getElementById('changeBackground');
    
    js 방법을 사용하면 단추를 누르는 것을 탐지하고 누르면 기능을 실행할 수 있습니다.
    js/스크립트.회사 명
    ...
    button.addEventListener('click', () => {
      // action will go here
    });
    
    마지막으로 함수 내부에서 우리는 previous tutorial 에서 같은 코드를 작성하여 배경색을 js/scripts.js 로 변경할 것이다.
    js/스크립트.회사 명
    ...
    document.body.style.backgroundColor = 'fuchsia';
    
    다음은 우리의 전체 스크립트입니다.
    js/스크립트.회사 명
    let button = document.getElementById('changeBackground');
    
    button.addEventListener('click', () => {
      document.body.style.backgroundColor = 'fuchsia';
    });
    
    이 파일을 저장하면 브라우저에서 새로 고침 scripts.js 하십시오.버튼을 클릭하면 이벤트가 트리거됩니다.

    JavaScript 이벤트로 인해 페이지의 배경색이 자홍색으로 변경되었습니다.

    결론


    이 강좌에서는 DOM을 이해하고 수정할 수 있는 용어를 살펴보았습니다.우리는 DOM이 일반적인 HTML 요소, 텍스트, 주석의 노드 트리로 어떻게 구성되는지 이해했고, 개발자 컨트롤러에서 수동으로 코드를 입력하지 않고 사용자가 사이트를 수정할 수 있도록 스크립트를 만들었다.