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只有一個<h1>元素你還必須指定數組索引[0]，因為getElementsByTagName()方法總是返回一個數組。
你可以學到了很多有關我們的HTML DOM 的JavaScript教程 。
該XML DOM
XML DOM定義了訪問和操作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對象，並提取從中用JavaScript的信息：
例
<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作為一套節點對象。 節點可以用JavaScript或其他編程語言來訪問。 在本教程中，我們使用的JavaScript。
編程接口的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是一個節點對象。