본문 바로가기

Development/Javascript

[펌] 자바스크립트 정리. 8 - 자바스크립트 DOM 스크립트 간단 정리

검색엔진을 뒤지면서 보다가 너무나 깔끔하게 정리된

자바스크립트가 있기에 퍼옴. GENERAL 님의 정리 감사합니다.

댓글은 아래 링크 블로그에 달아주세요~ ^^


링크 : http://blog.naver.com/minis24/80094251902

2006년 정도 인걸로 기억이 나는데요.. ajax 가 한참 이슈가 되던 시절이 있었습니다.

지금도 ajax를 많이 쓰고는 있지만 그 당시 처럼 환상에 가려진, 신비의 테크닉이라는 고급기술에서

범용 테크닉으로 많이 일반화 되었지요..

 

무턱대고 ajax 책을 사서 보았는데..음 당췌 무슨 말인지 이해가 안되더군요..

시간이 약이라고 해야하나요? 한몇년 그렇게 해매면서 고민하면서 정리하면서 살다보니

어느덧 익숙해지더라구요~ 아직 많은 부분이 부족하긴 하지만요~

 

ajax를 잘 사용하기 위해서는 문서객체구조(DOM - Document Object Model)에 대해

잘 이해하고 사용할 수 있어야 세밀하게 콘트롤 하는것이 가능할것입니다.

 

그래서 이번에는 진화에 진화를 거듭해온 자바스크립트 DOM 에 대해서 정리해 볼려구요~

 


* 자바스크립트 DOM Script

    - HTML 또는 XHTML 문서에서 모든 엘리먼트는 객체입니다.

    - DOM 에서 제공하는 API 를 제어하여 이러한 객체들에 접근하는것이 가능하며,

      콘트롤 하는것이 가능합니다.

      

       ※ 네이티브객체 : 자바스크립트내에 미리 만들어진 객체

                               ex ) Date,Array,Math......

           호스트객체 : 자바스크립트 실행환경에서 만들어진 객체

                               ex ) 웹브라우저에서 제공하는 객체

                                      폼(form),이미지(Image),요소(element)

 

    1. node (노드) : 어떤 연결망에서 특정지점과 지점을 연결하는 것.

        (1) element node - <body>,<p>,<ul>......

        (2) text node - 웹문서에서 내용에 해당하는 부분

                            <p>이 부분이 텍스트노드 </p>

        (3) attribute node - <p title ="이 부분이 속성노드" >aaaaaaaaaaaaaaa</p>

 

* DOM 코어 API

    - getElementById

    - getElementsByTagName

    - getAttribute

    - setAttribute

    - ...등

    DOM을 지원하는 모든 프로그래밍 언어에서 사용가능함.

 

* HTML-DOM

    - (x)HTML 문서에 쓰인 DOM을 이용할때 사용할 수 있는 프로퍼티.

     ex) forms 객체 제공

          var forms = document.getElementsByTagName("form") ;

                        = document.forms ;

          var src = element.getAttribute("src");

                     = element.src ;

 

         element.setAttribute("src",url);

         = element.src = url ;

 

* getElementById ("_ID")

    - document 와 함께 사용한다.

    - 문서 구조에서 id 속성값이 _ID 인 엘리먼트객체를 리턴한다.

      ex) document.getElementBy("_ID"); 

* getElementsByTagName ("tag")

    - 해당 객체의 자식노드에서 특정 태그(tag)를 사용하는 element들을 배열로 리턴함

      ex) element.getElementsByTagName("tag");

  

* getAttribute ()

    - object.getAttribute("attribute");

      ※ Document객체를 사용할 수 없고, 각 요소객체에서만 동작함..

* setAttribute ()

    - object.setAttribute("attribute",value);

      ※ Document객체를 사용할 수 없고, 각 요소객체에서만 동작함..

 

      HTML DOM을 사용해서 아래와 같이 속성을 읽고 설정 할 수 있습니다.

          ex ) element.value ="new value";

      소스의 길이가 짧고 간단하다는 장점이 있지만, 폼,이미지등의 일부요소에서만 동작합니다.

      

      DOM 코어 API를 사용하길 추천합니다.    

 

* childNodes

    - 해당 요소의 모든 자식요소를 포함하는 배열 리턴함.

    - 요소노드뿐만 아니라 모든 형식의 노드를 포함하는 배열 리턴

    ex) <body> 태그를 가져오는 방법

          1. var body = document.getElementsByTagName("body")[0];

          2. document.body;

          

             body.childNodes

* nodeType;

    - node.nodeType;

      ex) var typeStr = body.nodeType ;

          

           # 요소노드의 nodeType 값 : 1

           # 속성노드의 nodeType 값 : 2

           # 텍스트노드의 nodeType 값 : 3

 

* nodeName;

   - 어떤 요소인지 확인가능함 (참고로 저는 디버깅 할때 주로 써요)

    - 대문자로 표시해야함.

    - if(element.nodeName == "IMG");

 

* nodeValue;

   - 텍스트노드의 값을 바꾸려면 nodeValue를 사용

    - node의 값을 가져오거나, 설정할 수 있다.

 

      ※ 주의

         1) 텍스트는 요소의 첫번째 자식요소이다.

             ex)

                var obj = document.getElementById("~~~~~");

                     alert ( obj.nodeValue);         //null 출력

                     alert( obj.childNodes[0].nodeValue);

 

* firstChild;

   - node.firstChild

        = node.childNodes[0] ;

* lastChild;

   - node.childNodes[node.childNodes.length-1];

 

* createElement;

   - 새 요소를 생성한다.

    - 노드트리에 새로운 요소를 추가한다.

 

          ex ) var newElement = document.createElement("p")   // <p></p>요소 생성

       

    - append 하기전이라도 nodeType, nodeValue 가 있다.

    - 그러나 아직은 브라우저에서 표시되지는 않는다.

 

* removeChild;

   - parent.removeChild(삭제객체);

      --> 리턴 : 삭제된 객체를 리턴한다.

 

      ex) var removeElement = 부모엘리먼트.removeChild(삭제할 객체);

 

* appendChild;

   - parent.appendChild(child)

 

      ex) var testDIV = document.getElementById("testDIV") ;

           var para = document.createElement("p");

           testDIV.appendChild(para);

 

* createTextNode;

   - 텍스트 노드를 생성

    ex )

       var txt = document.createTextNode("HELLO");

            para.appendChild(txt);

 

* InsertBefore;

   - parentElement.insertBefore( newElement , targetElement ) ;

 

* InsertAfter;

   - targetElement의 뒤에 newElement를 추가한다.

   - DOM API 가 아님.~~~~~

 

       (source)

          function insertAfter(newElement , targetElement){

               var parent = targetElement.parentNode;

               if (parent.lastChild == targetElement){

                   parent.appendChild(newElement) ;

               }else{

                   parent.insertBefore(newElement , targetElement.nextSibling ;

              }

         }

 

* parentNode;

   - element의 부모노드를 리턴한다.

     ex)

        var parentElement = element.parentNode ;