Written by 최태열
on 

DOM(Document Object Model)

HTML 객체

DOM(Document Object Model)

Document Object Model

  1. xml과 html의 문서를 동적으로 변경 가능한 기술
  2. 모든 프로그램 언어가 DOM 기술 적용
    • java : 서버 back end 언어이기 때문에 주로 XML 문서 동적 조작시 사용
    • java script : 브라우저에서 실행되는 html 문서 동작 조작시 사용
  3. html 문서 이해하는 과정
    • 모든 tag와 text들을 상속관계의 개별 객체들로 간주
    • html의 속성을 제외한 tag와 text data들을 각각의 tree 구조 형식으로 간주
    • tag(element)/text/attribute 들을 개별 객체로 보는 구조


노드 호출

<div id="one" style="border: 5px solid yellow;" onclick="myfun()">짱구는</div>
<div id="two" style="border: 5px solid pink;" onclick="myfun2()">못말려</div>

document.getElementById("one");
document.getElementsByClassName();
document.getElementsByName();
document.getElementsByTagName();
document.getElementsByTagNameNS();


노드의 속성

// 내부 Text
document.getElementById("one").innerText;
// 내부 HTML
document.getElementById("one").innerHTML;
// 노드 Value (해당 속성값)
		// 요소 노드(element node) undefined
		// 속성 노드(attribute node)
		// 텍스트 노드(text node)	해당 텍스트 문자열
document.getElementById("one").nodeValue;
// 해당 노드 태그 (ex : div)
document.getElementById("one").nodeName;
// 노드의 타입
// 요소 노드(element node): 1
// 속성 노드(attribute node): 2
// 텍스트 노드(text node): 3
// 주석 노드(comment node): 8
// 문서 노드(document node): 9
document.getElementById("one").nodeType;

// 부모노드
document.getElementById("one").parentNode
// 자식노드들(배열)
document.getElementById("one").childNodes
// 첫번째 자식
document.getElementById("one").firstChild
// 마지막 자식
document.getElementById("one").lastChild
// 다음 형제
document.getElementById("one").nextSibling
// 이전 형제
document.getElementById("one").previousSibling

Discussion and feedback