Document Object Model (DOM)

1     Document Object Model (DOM)

HTML과 XML 문서에 대한 프로그래밍 인터페이스이다.

문서에 대한 구조적 정보를 제공하고 문서 구조나 외양 및 내용을 바꿀 수 있도록 프로그램에서 접근할 수 있는 방법을 제공한다.

DOM은 HTML문서를 객체지향적으로 접근하는 방법을 제공하여, JavaScript로 다루기가 편리하다.

이 문서에서는, 브라우저마다 지원하는 DOM API가 조금씩 차이가 있어, 실제 구현은 JavaScript Library를 통해 구현할 것이기 때문에

자세한 DOM의 내용은 생략하고 간단한 의미만을 이해할 것이다.

해당 태그의 의미와 용도가 정해져있다.

ex)

element.getElementById("ID") // element객체를 리턴 (typeof 로 확인) element.getElementsByTagName("*") // element객체 배열로 리턴 element.getAttribute("속성명"); element.setAttribute("속성명", "값");   element.childNodes // 자식노드객체를 리턴 node.nodeType // 1 : element, 2 : attribute, 3 : Text node.nodeName // 노드 명을 리턴 node.nodeValue // 노드 값을 리턴   node.firstChild // 첫번째 자식노드 node.lastChild = node.childNodes[node.childNodes.length-1] // 마지막자식노드 node.parentNode // 부모노드 node.previousSibling // 이전노드 node.nextSibling // 다음노드   var tdElement = document.createElement("td"); // 메모리에만 생성하고 아직 문서에 추가하지는 않음 document.createTextNode("Text"); // 메모리에만 생성하고 아직 문서에 추가하지는 않음   node.appendChild(tdElement); // 문서에 부모노드 아래 자식노드 추가 node.insertBefore(newElement, targetElement); node.cloneNode(deep) // deep : true면 텍스트노드포함 element.removeChild(node); // 노드 삭제 node.hasChildNodes() // 자식 노드 여부

 

4월 8일 추가

DOM :  웹화면에 보이는 요소를 조작하기 위한 기능으로 가득 찬 라이브러리 덩어리