DOM은 액세스하고 문서를 조작하기위한 표준을 정의합니다.
하여 XML DOM 트리 구조로서 XML 문서를 제공한다.
되는 HTML DOM 트리 구조로 HTML 문서를 제공합니다.
DOM을 이해하는 것은 HTML이나 XML로 작업 사람을위한 필수입니다.
XML DOM 트리 예
DOM은 무엇입니까?
DOM은 XML과 같은 HTML 문서에 액세스하기위한 표준을 정의한다 :
"The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document."
DOM을 3 가지 부품 / 레벨로 구분된다 :
- Core DOM - 모든 구조화 된 문서에 대한 표준 모델
- XML DOM - XML 문서의 표준 모델
- HTML DOM - HTML 문서에 대한 표준 모델
DOM을은 정의 objects and properties 모든 문서 요소 및 methods (interface) 에 액세스 할 수 있습니다.
되는 HTML DOM
되는 HTML DOM은 HTML 문서에 액세스하고 조작하기위한 표준적인 방법을 정의한다.
모든 HTML 요소는 HTML DOM을 통해 액세스 할 수 있습니다.
되는 HTML DOM은 정의 objects, properties and methods 모든 HTML 요소를.
하는 HTML 요소의 값 변경
이 예에서는 ID = "민주당"와 HTML 엘리먼트의 값을 변경 :
예
<h1 id="demo">This is a Heading</h1>
<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script> »그것을 자신을 시도 이 예에서는 최초의 변화 값 <h1> HTML 문서의 요소 :
예
<h1>This is a Heading</h1>
<h1>This is a Heading</h1>
<script>
document.getElementsByTagName("h1")[0].innerHTML = "Hello World!";
</script> »그것을 자신을 시도 주 : 심지어 HTML 문서는 containes 만 ONE 경우 <h1> 때문에 여전히 [0] 배열 인덱스를 지정해야 요소, getElementsByTagName() 메소드는 항상 배열을 반환합니다.
당신은 우리의 HTML DOM에 대해 더 많이 배울 수있는 자바 스크립트 자습서를 .
는 XML DOM
DOM은 XML은 XML 문서를 액세스하고 조작하기위한 표준 방법을 정의한다.
모든 XML 요소는 XML DOM을 통해 액세스 할 수 있습니다.
는 XML DOM은 정의 objects, properties and methods 모든 XML 요소를.
는 XML DOM은 다음과 같습니다
- XML에 대한 표준 객체 모델
- XML을위한 표준 프로그래밍 인터페이스
- 플랫폼과 언어에 독립적
- W3C 표준
즉 : The XML DOM is a standard for how to get, change, add, or delete XML elements.
XML 요소의 값을 가져 오기
이 코드는 제 텍스트 값 검색 <title> XML 문서의 요소 :
예
txt = xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
XML 파일을로드
실시 예에서 사용 된 XML 파일 인 아래 의 Books.xml .
이 예는 읽기 "books.xml" 해당 xmldoc에 첫 번째의 텍스트 값 검색 <title> Books.xml을의 요소를 :
예
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
myFunction(xhttp);
}
};
xhttp.open("GET", "books.xml", true);
xhttp.send();
function myFunction(xml) {
var xmlDoc = xml.responseXML;
document.getElementById("demo").innerHTML =
xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
}
</script>
</body>
</html>
»그것을 자신을 시도 예 설명
- xmlDoc - 파서에 의해 생성 된 XML의 DOM 객체입니다.
- getElementsByTagName("title")[0] - 첫번째로 얻을 <title> 요소를
- childNodes[0] -의 첫 번째 자식 <title> 요소 (텍스트 노드)
- nodeValue - 노드의 값 (the text itself)
XML 문자열을로드
이 예는 XML DOM 객체에 텍스트 문자열을로드하고 자바 스크립트와 그것에서 정보를 추출한다 :
예
<html>
<body>
<p id="demo"></p>
<script>
var text, parser,
xmlDoc;
text = "<bookstore><book>" +
"<title>Everyday
Italian</title>" +
"<author>Giada De Laurentiis</author>" +
"<year>2005</year>" +
"</book></bookstore>";
parser = new DOMParser();
xmlDoc = parser.parseFromString(text,"text/xml");
document.getElementById("demo").innerHTML =
xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue ;
</script>
</body>
</html>
»그것을 자신을 시도 프로그래밍 인터페이스
노드 객체들의 집합으로 DOM 모델 XML. 노드는 자바 스크립트 또는 다른 프로그래밍 언어에 액세스 할 수 있습니다. 이 튜토리얼에서 우리는 자바 스크립트를 사용합니다.
는 DOM에 대한 프로그래밍 인터페이스는 일련의 표준 프로퍼티와 메소드에 의해 정의된다.
Properties 자주 (예 : 노드 이름은 "예약") 뭔가라고합니다.
Methods 자주 (즉, "책을"삭제) 할 뭔가라고합니다.
XML의 DOM 속성
다음은 몇 가지 일반적인 DOM의 속성입니다 :
- x.nodeName - x의 이름
- x.nodeValue - x의 값
- x.parentNode - x의 부모 노드
- x.childNodes - x의 자식 노드
- x.attributes - x의 속성 노드
참고 : 위의 목록에서, x는 노드 객체입니다.
XML의 DOM 방법
- x.getElementsByTagName( name ) - 지정된 태그 이름을 가진 모든 요소를 얻을
- x.appendChild( node ) - X에 자식 노드를 삽입
- x.removeChild( node ) - X에서 자식 노드를 제거
참고 : 위의 목록에서, x는 노드 객체입니다.