[JavaScript] DOM 트리노드의 프로퍼티

DOM 트리노드의 프로퍼티

HTML 문서에서 DOM 노드에 접근하는 방법

  - getElementsByTagName() 이용

  - 노드 간의 관계를 이용

var selectedItem = document.getElementsByTagName("li"); // 모든 <li> 요소 선택
var selectedItem = document.getElementById("even"); // 아이디가 even인 요소 선택

 

노드에 대한 정보 접근

  특별히 다른 인터페이스를 이용하지 않고 해당 노드의 정보에 직접 접근할 수 있게 한다.

•        nodeName
•        nodeValue
•        nodeType

 

nodeName

  - 태그(태그명), 속성(속성명), PCDATA(#text)

  - 수정할 수 없는 읽기 전용 프로퍼티

document.getElementById("document").innerHTML = document.childNodes[1].nodeName;
document.getElementById("html").innerHTML = document.childNodes[1].childNodes[0].nodeName;

nodeValue

  - 태그(null), 속성(속성값), PCDATA(문자열)

  - 노드의 값을 저장

var headingText = document.getElementById("heading").firstChild.nodeValue;

document.getElementById("text1").innerHTML = headingText;
document.getElementById("text1").firstChild.nodeValue = headingText;

nodeType

  - 해당 노드가 어떤 형식 > 열거형(숫자)

  - 노드 고유의 타입을 저장

var headingType = document.getElementById("heading").firstChild.nodeType;

document.getElementById("head").innerHTML = headingType;      
document.getElementById("document").innerHTML = document.nodeType;