[javascript] DOM관련

[javascript] DOM관련 

Javascript 노드 타입(Node Type) 및 유용한 메소드, 프로퍼티

Script Language 2007/07/30 22:26

자바스크립트의 DOM 구조에서 문서 내의 모든 노드는 nodeName과 nodeType이라는 property를 가짐.
nodeName은 name = node.nodeName 과 같은 형식으로 얻어낼 수 있으며 nodeName property는 읽기전용.

nodeType property는 특정 노드의 형식을 지정하는 정수값을 나타내는데, integer = node.nodeType과 같은 방법으로 알아낼 수 있음.
노드 타입을 나타내는 정수값들은 다음과 같음.

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

12가지의 노드타입 중에서 처음 3가지가 가장 중요하며 특정 노드에 대한 작업을 수행할 시에는 if 문을 통해 특정 노드의 타입을 확인한 뒤 작업을 수행함.

function addTitle(mynode) {
  if (mynode.nodeType == 1) {
    mynode.setAttribute("title", "simple but important content");
  }
}

nodeType 역시 읽기 전용이므로 함부로 설정할 수 없음.

* 유용한 DOM 메소드 및 프로퍼티
createElement  reference = document.createElement(element);
  document.body.appendChild(reference);

createTextNode  reference = document.createTextNode("hello, world!");

cloneNode  reference = node.cloneNode(true);
  reference = node.cloneNode(false);

appendChild  reference = element.appendChild(newChild);

insertBefore  reference = element.insertBefore(newNode, targetNode);

removeChild
  reference = element.removeChild(node);

replaceChild  reference = element.replaceChild(newChild, oldChild);

setAttribute  element.setAttribute(attributeName, attributeValue);

getAttribute  attributeValue = element.getAttribute(attributeName);

getElementById  element = document.getElementById(ID);

getElementsByTagName  elements = document.getElementsByTagName(tagName);

hasChildNodes  booleanValue = element.hasChildNodes;

nodeName
  name = node.nodeName;

nodeType  integer = node.nodeType;

nodeValue
  value = node.nodeValue;

childNodes
  nodeList = node.childNodes;
  node.childNodes.length;
  document.childNodes[0].nodeName --> "HTML"

firstChild
  reference = node.firstChild;
  reference = node.childNodes[0];

lastChild
  reference = node.lastChild;
  reference = node.childNodes[elementNode.childNodes.length-1]

nextSibling  reference = node.nextSibling;

parentNode
  reference = node.parentNode;

previousSibling
  reference = node.previousSibling

출처 : DOM SCRIPT (http://kangcom.com/common/bookinfo/bookinfo.asp?sku=200706290003)