DOM 메소드 정리

2008.09.23 02:11

juro 조회 수:434

● getElementById : 특정 아이디의 요소 노드에 직접 접근할 수 있음.
        document.getElementById("id")

● getElementsByTagName : 특정 태그를 사용하는 요소들을 배열로서 얻어낼 수 있음. getElementById가 하나의 요소를 얻는데 반해, getElementsByName은 여러 요소를 얻게 됨.
        element.getElementsByTagName("tag")

● getAttribute : 요소의 속성 값들을 알 수 있음. 문서 객체를 사용할 수 없음. 각 요소 노드 객체로만 사용 가능함.
        object.getAttribute(속성명)

<p>요소의 title 속성을 얻기 위해서는 getElementsByName과 함께 사용해야 함.
        var paras = document.getElementsByTagName("p");
        for (var i =o; i < paras.length, i++_{
                alert(paras[i].getAttribute("title"));
        }

● setAttribute : 특정 속성 노드의 값을 바꿀 수 있음. getAttribute처럼 메소드도 함수이고 요소 노드에서만 동작함. 다른 점은 인수를 두개 갖는 다는 점인데, 하나는 바꾸고 싶은 속성명이고 , 또 하나는 바꿀 값임.
        object.setAttribute(속성명,변경될값)

● childNodes 프로퍼티 : 문서 내 노드 트리에서 모든 요소의 자식에 대한 정보를 가져올 수 있는 방법임. 요소노드뿐 아니라 모든 형식의 노드를 포함하는 배열을 반환함.
        element.childNodes

● nodeType 프로퍼티 : 정확히 찾으려는 노드를 얻을 수 있음. 하지만 "요소"나 "속성"같은 문자열이 아니라 숫자를 반환해줌.

        node.nodeType
        alert(body_element.nodeType);

        요소노드의 nodeType 값은 1
        속성노드의 nodeType 값은 2
        텍스트노드의 nodeType 값은 3
        * 특정형식의 노드를 지정할 수 있으며, 이 노드에만 영향을 주는 함수를 만들 수 있음.

● nodeValue 프로퍼티 : 텍스트 노드의 값을 바꿀 수 있음. 또한 노드의 값을 가져오거나 설정할 수 있음.
        node.nodeValue

        *주의할 점: 실제 콘텐츠가 어떤 노드에 담겨져 있는지 정확히 파악해야함. 대상이 되는 노드에 있는지, 그 자식이 되는 노드에 있는지를 알아야함.
        alert(description(대상 노드명).childNodes[0].nodeValue);

● firstChild & lastChilde : 배열의 첫번째 자식노드와 마지막 자식노드에 대해 간단히 쓸 수 있는 방법이 있음.
        node.firstchild == node.childNodes[0]
        node.lastChild == node.childNodes[node.childNodes.length-1]
● lastChild



--------------------------------------------------
마크업이란?
마크업 언어는 문서에 포함된 문장, 표, 소리 등과 같은 문서의 내용에 대한 정보가 아니라  그 문장과 그림, 표가 어떻게 배치되고 글자는 어떤 크기와 모양을 가지며 , 들여쓰기와 줄간격, 여백은 어느정도인지에 대한 정보를 의미합니다.
마크업이라는 말자체가 글이나 책다위에서 표시를 하거나 한다는 듯이지요. --> 아마도 기본 코드작성을 의미하는 듯.

* typeof 연산자 : 요소의 속성을 알려줌.


© juroweb 2003-2014. All rights reserved
log in