DOM API를 이용한 HTML IMPORT

개요

What is DOM?

 - Document Object Model(문서 객체 모델)

 - 구조화된 문서를 표현하기위한 형식, W3C 표준

 - DOM은 동적으로 문서의 내용,구조, 스타일에 접근, 변경하는 수단/역활

 - DOM 을 지원하는 프로그래밍 언어를 이용하여 접근/활용이 가능하다. 

   (ex : Javascript, VBScript, Perl, VB, JAVA, C++, etc...)

< Example DOM TREE >

??

                               

                                             < DOM Attributes>

childNodes	현재 노드의 자식 노드를 배열로 반환
firstChild	현재 노드의 첫번째 자식 노드를 참조
lastChild	현재 노드의 마지막 자식 노드를 참조
nextSibling	현재 노드의 바로 다음 노드를 반환
nodeName	노드의 qualified name 반환
nodeType	노드의 XML DOM노드 형식을 지정
nodeValue	해당 노드의 값을 참조
ownerDocument	해당 노드를 포함하는 루트 엘레멘트를 반환
parentNode	해당 노드의 부모 노드를 반환
previousSibling	현재 노드 바로 앞에 오는 노드를 반환
xml	현재 노드와 자식 노드의 XML을 문자열로 반환(IE Only)
text	현재 노드와 자식노드들의 텍스트를 연결한 콘텐츠를 반환한다.(IE Only)

                                             < DOM Methods>

getElementById(idName)	-다큐먼트에서 특정한 id값을 갖는 요소 반환 -다큐먼트에서 idName으로 정의된 요소를 반환
getElementsByTagName(tagName)	-특정한 태그 이름이 갖는 자식 요소로 구성된 배열 리턴 -tagName을 가진 태그들의 노드 객체를 찾아 배열로 반환
getAttribute(name)	- 특정한 name에 해당하는 요소의 속성값 리턴
document.createElement(tagName)	- div를 메소드 파라미터로 입력하면 div엘리먼트가 생성. - tagName 으로된 엘리먼트를 생성.
document.createTextNode(text)	정적 텍스트를 담는 노드를 생성.
element.appendChild(childNode)	특정노드를 현재 엘리먼트의 자식노드에 추가. - childNode를 엘리먼트의 자식노드로 추가
element.getAttribute(name)	- 속성명이 name인 속성값을 반환 - 엘리먼트에서 name에 해당하는 에트리뷰트 값을 반환
element.setAttribute(name,value)	- 속성값 value를 속성명이 name인 곳에 저장 - 엘리먼트에 name속성에 value값을 할당
element.insertBefore(newNode,targetNode)	- newNode를 targetNode전에 추가
element.removeAttribute(name)	- 엘리먼트에서 name의 속성을 삭제
element.removeChild(childNode)	- 자식 엘리먼트를 삭제
element.replaceChild(newNode,oldNode)	- oldNode를 newNode로 변경
element.hasChildNodes()	자식노드가 존재하는지 판단하여 Boolean값을 리턴 , 포함(True), 미포함(False)

참조

내용 : 링크