DOM Node Property

문서 내의 모든 노드는 아래 프로퍼티를 가짐


nodeName

---

  - 특정 노드의 이름을 포함한 문자열
  - 요소 노드일 경우 요소의 이름(=tagName)을 반환
  - 속성 노드일 경우 속성의 이름을 반환
  - 텍스트 노드일 경우 "#text"라는 문자열을 반환
  - 읽기전용



nodeType

---

  - 특정 노드의 형식을 지정하는 정수 값을 반환 (integer)

/*
1 = ELEMENT_NODE
2 = ATTRIBUTE_NODE
3 = TEXT_NODE
4 = CDATA_SECTION_NODE
5 = ENTITY_REFERENCE_NODE
6 = ENTITY_NODE
7 = PROCESSING_INSTRUCTION_NODE
8 = COMMENT_NODE
9 = DOCUMENT_NODE
10 = DOCUMENT_TYPE_NODE
11 = DOCUMENT_FRAGMENT_NODE
12 = NOTATION_NODE
*/


function addTitle(mynode) {
  // mynode가 ELEMENT_NODE일 경우
  if (mynode.nodeType == 1) {
    mynode.setAttribute("title", "이것은 중요한 내용입니다.");
  }
}

nodeValue

---

  - 특정 노드의 값을 반환 (문자열)
  - 속성 노드일 경우 속성값 반환
  - 텍스트 노드이면 텍스트 내용 반환
  - ELEMENT_NODE이면 null 반환
  - read, write 모두 가능하지만 null을 반환(=ELEMENT_NODE)할 경우 쓰기 불가

// 요소 노드에 바로 값을 쓰는 것은 불가능
var message = document.getElementById("fineprint");
message.nodeValue = "이 명령문은 실행되지 않음";

// 요소노드의 첫 자식노드는 텍스트 노드이므로 쓰기 가능
var message = document.getElementById("fineprint");
message.firstChild.nodeValue = "이 명령문은 실행가능";

// 쓰기 가능한지 체크하는 방법
var message = document.getElementById("fineprint");
if (message.firstChild.nodeType == 3) {
  message.firstChild.nodeValue = "이 명령문은 실행 가능";
}

노드 내부 구조 보기


childNodes

---

  - 특정 element 노드의 자식노드를 배열로 반환
  - 텍스트노드와 속성노드의 경우 자식노드가 없으므로 빈 배열값 반환
  - 읽기전용





firstChild

---

  - 지정 element 요소 노드의 첫번째 자식노드 반환
  - 텍스트노드와 속성노드는 빈 배열 값 반환





lastChild

---

  - 지정 element노드의 마지막 자식 노드 반환
  - 텍스트노드와 속성노드는 빈 배열값 반환
  - 읽기전용





nextSibling

---

  - 지정노드와 이웃하고 있는 노드 중 뒤의 것을 반환
  - 뒤에 노드가 없다면 null 반환
  - 읽기전용





parentNode

---

  - 지정노드의 부모노드를 반환
  - 자식노드를 가질 수 있는 노드는 element노드 밖에 없음
  - 부모가 없는 document노드는 null 반환
  - 읽기전용





previousSibling

---

  - 지정노드와 이웃하고 있는 노드 중 앞의 것을 반환
  - 앞의 노드가 없으면 null 반환
  - 읽기전용