最新的Web开发教程
 

XML DOM教程


DOM定义了访问和操作文档的标准。

该XML DOM提供了一个XML文档的树状结构。

在HTML DOM提供了一个HTML文档的树状结构。

了解DOM是任何与HTML或XML的工作是必须的。

XML DOM树例子

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是一个节点对象。