객체에 대한 정보를 확인하는 방법

DOM 객체를 사용하여 노드의 정보를 확인할 수 있다. 방법은 아래와 같다.

 

 

■ HTML 태그 구성

<input type="text" name="nameAtt" value="valueAtt" onclick="test(this);" />

input 엘레멘트에 마우스 클릭 이벤트를 연결해 노드의 정보를 출력한다.

 

 

■ 자바스크립트 함수 구성

function test(obj) {

 

    var txt = "";

 

    // 객체의 기본 정보를 나타내는 속성들 (노드의 정보를 나타내는 속성들 확인)

    txt += "객체: " + obj + "\n";
    txt += "tagName : " + obj.tagName + "\n";
    txt += "nodeName : " + obj.nodeName + "\n";
    txt += "nodeValue : " + obj.nodeValue + "\n";
    txt += "nodeType : " + obj.nodeType + "\n\n";
 

    // 노드가 가지는 속성
    txt += "객체의 속성들 : " + obj.attributes + "\n";    // 속성을 Map 객체로 반환한다.
    txt += "객체의 속성의 수 : " + obj.attributes.length + "\n\n";
 

    // 속성에 접근해 이름과 값을 확인
    txt += "첫번째 속성 이름 : " + obj.attributes[0].nodeName + "\n";

    // 직접적으로 속성의 값에 접근
    txt += "첫번째 속성 값 : " + obj.attributes[0].nodeValue + "\n";    
    txt += "첫번째 속성의 타입 : " + obj.attributes[0].nodeType + "\n\n"; 

    // getAttribute() 메소드를 사용해 값에 접근
    txt += "getAttribute() 메소드 사용 : " + obj.getAttribute("name") + "\n";  

 

    // 자식 노드 존재 여부 확인
    txt += "자식노드 존재 여부 확인 : " + obj.hasChildNodes() + "\n\n";
}

 

 

■ 결과 

 

 

 

■ 사용시 주의점

 

 태그 이름을 확인할 때는 tagName 속성을 사용한다. nodeName과 nodeValue는 Map 객체에 접근할 때 유용하며, 태그에 접근할 때는 tagName를 사용하는 것이 좋다.