티스토리 툴바


 문서 내의 노드에 접근할 때 getElementById나 getElementsByTagName, getAttribute와 같은 메소드를 사용합니다. 노드라는 단어는 보통 네트워크에서 연결점을 표현하는 데 사용됩니다. 웹 페이지는 서로 연결된 노드들로 이루어진 네트워크라고도 할 수 있습니다. 

 문서를 구성하는 노드에는 요소 노드, 텍스트 노드, 속성 노드의 세 가지가 있습니다. 텍스트 노드와 속성 노드에는 웹 페이지의 내용이 들어갑니다. 요소 노드는 내용을 구조적으로 만드는 데 사용됩니다.

 문서의 모든 노드는 다른 노드에 포함됩니다. 이것은 문서에서 서로 연결된 노드들의 네트워크가 아주 이해하기 쉬운 구조인 노드의 트리 형태로 이뤄져 있다는 것을 의미합니다. 특히 가계도와 유사합니다.
  • ParentNode : 어떤 노드의 parentNode 프로퍼티는 요소 노드로의 참조를 반환합니다. 요소 노드만이 부모 노드가 될 수 있습니다.
  • childNodes : 요소 노드의 childNodes 프로퍼티는 노드의 집하블 반환합니다. 대개, 부모 노드가 가지고 있는 자식 요소 노드를 얻는 경우가 많습니다. 이러한 경우, childNodes는 비효율적입니다. childNodes는 텍스트 노드와 속성 노드도 함께 반환하기 때문입니다. 이럴 때는 childNodes 대신 getElementsByTagName 메소드와 와일드카드(*)를 함께 사용하기 바랍니다. var all_elements = document.getElementsByTagName("*");
  • firstChild : 요소 노드의 firstChild 프로퍼티는 요소 노드의 childNodes로 얻게 되는 노드 중에 첫번째 노드에 대한 참조를 반환합니다. firstChild는 childNodes[0]을 짧게 표현한 것입니다.
  • lastChild : firstChild와 비슷하게 lastChild 프로퍼티는 요소 노드의 childNodes로 얻게 되는 노드 중에 마지막 노드에 대한 참조를 반환합니다.
  • previousSibling : 두 개의 노드가 부몰르 갖는 경우, 두 노드는 형제 노드입니다. 이것은 부모 요소의 childNOdes 집합에 같이 포함되어 있다는 의미입니다. 어떤 노드의 previousSibling은 부모 노드의 childNodes 프로퍼티에서 해당 노드의 바로 앞에 있는 노드에 대한 참조를 반환합니다.
  • nextSibling : previousSibling처럼 nextSibling 프로퍼티는 현재 노드와 같은 부모 노드를 갖는 노드에 대한 참조를 반환합니다. 특히 nextSibling은 부모 노드의 childNodes 프로퍼티에서 해당 노드의 바로 다음 노드에 대한 참조를 의미합니다.
  • nodeValue : 앞에서 살펴본 것처럼, DOM 메소드와 프로퍼티를 사용해 어떤 지점에서부터라도 문서를 살펴보는 것이 가능합니다. 만약 노드의 내용을 얻으려고 한다면, nodeValue 프로퍼티를 사용해야 합니다. 

               var introduction = document.getElementById("intro");

               alert(introduction.nodeValue);


    그러나 이 코드의 결과는 null이 됩니다.
    어떤 요소 노드일지라도 nodeValue의 값은null이
    됩니다.
    실제로 얻어야 하는 값은 요소 안에 포함되어 있는 텍스트 노드의 값입니다.

           var introduction = document.getElementById("intro");

  
        var text = introduction.firstChild;

  
        alert(text.nodeValue);

위 코드와 비슷하게, h1 요소 내에 있는 텍스트 값을 얻으려면 다음과 같이 코드를 작성해야 합니다.

           var headers = document.getElementsByTagName("h1");

           var text = headers[0].firstChild;

           alert(text.nodeValue);

첫째로 태그 이름이 h1인 모든 요소를 얻습니다. 이 경우에는 h1 요소가 하나밖에 없으므로
얻고자 하는 요소는 전체 요소 집합의 첫 번째 요소입니다
이 요소의 firstChild
프로퍼티는 우리가 얻고자 하는 텍스트 요소입니다.
이 텍스트 노드의 nodeValue의 값을
읽어서 원하는 텍스트 문자열을 얻습니다.

이 작업을 다음과 같이 한 줄의 코드로 작성할 수도 있지만, 읽기는 무척 어렵습니다.

alert(document.getElementsByTagName("h1")[0].firstChild.nodeValue);

출처 : http://blog.naver.com/i74080?Redirect=Log&logNo=60044440537

Posted by 붉은고래