ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • [javascript] 61. DOM Navigation - 자바스크립트 강좌 JS / CSE
    Web/JavaScript 2015. 6. 13. 15:41
    JavaScript HTML DOM Navigation

     HTML DOM에서, 노드 관계도를 이용하여 노드 트리를 탐사(naviagte)할 수 있습니다.


    1. DOM Nodes

     W3C HTML DOM 표준에 따르면, 모든 HTML 문서는 노드입니다:
      - 전체 문서는 문서 노드입니다.
      - 모든 HTML 요소는 요소 노드입니다.
      - 텍스트 내부의 HTML 요소는 텍스트 노드입니다.
      - 모든 HTML 속성은 속성 노드입니다.
      - 모든 주석은 주석 노드입니다.

     





     HTML DOM에서, 노드 트리내의 모든 노드는 자바스크립트에 의해 접근 가능합니다.

     새로운 노드는 생성되어지고, 모든 노드는 수정되거나 삭제되어 집니다.



    2. Node Relationships

     노트 트리의 노드는 각각 계층적 관계를 갖고 있습니다.

     부모, 자식, 형제 용어는 관계를 묘사하기 위해 사용됩니다.
      - 노드 트리에서, 상위 노드는 뿌리(root) 노드라 합니다.
      - 모든 노드는 root를 제외하고 정확히 하나의 부모를 갖습니다.
      - 노드는 여러명의 자식들을 갖을 수 있습니다.
      - 형제는 같은 부모를 갖습니다.


    <html>
        
      <head>
        <title>DOM Tutorial</title>
      </head>

      
      <body>
        <h1>DOM Lesson one</h1>
        <p>Hello world!</p>
      </body>

    </html> 





     








     위의 HTML는 이렇게 해석 가능합니다:
      - <html>은 root 노드 입니다.
      - <html>은 부모가 없습니다.
      - <html>은 <head>와 <body>의 부모입니다.
      - <head>는 <html>의 첫 번째 자식입니다.
      - <body>는 <html>의 마지막 자식입니다.

      - <head>는 <title>이라는 하나의 자식을 갖습니다.
      - <title>은 "DOM Tutorial"이라는 텍스트 노드 자식을 갖습니다.
      - <body>는 <h1>과 <p>이라는 두 개의 자식을 갖습니다.
      - <h1>은 "DOM Lesson one"이라는 자식을 갖습니다.
      - <p>는 "Hello world!"이라는 자식을 갖습니다.
      - <h1>과 <p>는 형제입니다.


    3. Navigating Between Nodes

     아래 나오는 속성으로 노드를 탐사 할 수 있습니다:
      - parentNode
      - childNodes[nodenumber]

      - firstChild

      - lastChild

      - nextSibling

      - previousSibling



    4. Child Nodes and Node Values

     innerHTML 속성은, childNodes와 nodeValue 속성을 사용하여 요소의 내용을 가져올 수 있습니다.

     아래 예제는 <h1> 요소의 노드 값을 복사해서 <p> 요소에 붙여넣는 예제입니다.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
     
    <html>
        <body>
     
        <h1 id="intro">My First Page</h1>
     
        <p id="demo">Hello!</p>
     
    <script>
    var myText = document.getElementById("intro").childNodes[0].nodeValue;
    document.getElementById("demo").innerHTML = myText;
    </script>
     
        </body>
    </html>
    cs
     

     위 예제에서 getElementById는 메소드이고, childNodes와 nodeValue는 속성입니다.


     


    5. DOM Root Nodes

     문서에서 2 개의 특별한 속성을 접근하는 것을 허용합니다:
      - document.body => 문서의 바디
      - document.documentElement => 모든 문서

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <!DOCTYPE html>
    <html>
        <body>
     
        <p>Hello World!</p>
     
        <div>
        <p>The DOM is very useful!</p>
        <p>This example demonstrates the <b>document.body</b> property.</p>
        </div>
     
    <script>
    alert(document.body.innerHTML);
    </script>
     
        </body>
    </html>
     
    cs
     

     





    6. The nodeName Property

     nodeName 속성은 노드의 이름을 명시합니다.
      - nodeName은 읽기 전용입니다.
      - 요소 노드의 nodeName은 tag name과 동일합니다.
      - 속성 노드의 nodeName은 attribute name 입니다.
      - 텍스트 노드의 nodeName은 항상 #텍스트입니다.
      - 문서 노드의 nodeName은 항상 #문서입니다.

     


    7. The nodeValue Property

     nodeValue 속성은 노드의 값을 명시합니다.
      - 요소 노드의 nodeValue는 undefined입니다.
      - 텍스트 노드의 nodeValue는 텍스트 값 그 자체 입니다.
      - 속성 노드의 nodeValue는 속성 값 입니다.

    8. The nodeType Property

     nodeType 속성은 노드의 종류를 반환합니다. nodeType은 읽기 전용입니다.

     가장 중요한 노드 종류들 입니다:

    Element typeNodeType
    Element1
    Attribute2
    Text3
    Comment8
    Document9
     [ 출처: W3Schools ]


    댓글

Designed by Tistory.