XML DOM 高级

XML DOM (Document Object Model) 定义了访问和操作 XML 文档的标准方法。

XML DOM

DOM 把 XML 文档视为一种树结构。通过这个 DOM 树，可以访问所有的元素。可以修改它们的内容（文本以及属性），而且可以创建新的元素。元素，以及它们的文本和属性，均被视为节点。

在本教程的较早章节中，我们介绍了 XML DOM，并使用了 XML DOM 的 getElementsByTagName() 从 DOM 树中取回数据。

如需学习更多有关 XML DOM 的知识，请访问本站的 XML DOM 教程。

获取元素的值

下面的代码检索第一个 <title> 元素的文本值：

x=xmlDoc.getElementsByTagName("title")[0].childNodes[0];
txt=x.nodeValue;

结果：txt = "Harry Potter"

获取属性的值

下面的代码检索第一个 <title> 元素的 "lang" 属性的文本值：

txt=xmlDoc.getElementsByTagName("title")[0].getAttribute("lang");

结果：txt = "en"

改变元素的值

下面的代码改变第一个 <title> 元素的文本值：

<html>
<head>
    <script type="text/javascript" src="/example/xml/loadxml.js"></script>
</head>
<body>
    <script type="text/javascript">
        xmlDoc = loadXMLDoc("/example/xml/bookstore.xml");
        x = xmlDoc.getElementsByTagName("title")[0].childNodes[0];
        x.nodeValue = "Easy Cooking";
        x = xmlDoc.getElementsByTagName("title")[0].childNodes[0];
        txt = x.nodeValue;
        document.write(txt);
    </script>
</body>
</html>

运行一下

改变属性的值

setAttribute() 方法可用于改变已有属性的值，或创建一个新属性。下面的代码向每个元素添加了名为 "edition" 的新属性（值是 "first"）：

<html>
<head>
<script type="text/javascript" src="/example/xdom/loadxmldoc.js">
</script>
</head>
<body>
<script type="text/javascript">
xmlDoc=loadXMLDoc("/example/xml/bookstore.xml");
var x=xmlDoc.getElementsByTagName('book');
for(i=0;i<x.length;i++)
  {
  x.item(i).setAttribute("edition","FIRST");
  }
//Output book title and edition value
var x=xmlDoc.getElementsByTagName("title");
for (i=0;i<x.length;i++)
  {
  document.write(x[i].childNodes[0].nodeValue);
  document.write(" - Edition: ");
  document.write(x[i].parentNode.getAttribute('edition'));
  document.write("<br />");
  }
</script>
</body>
</html>

运行一下

创建元素

createElement() 方法创建新的元素节点。
createTextNode() 方法创建新的文本节点。
appendChild() 方法向节点添加子节点（在最后一个子节点之后）。

如需创建带有文本内容的新元素，需要同时创建元素节点和文本节点。

下面的代码创建了一个元素 (<edition>)，然后把它添加到第一个 <book> 元素中：

newel=xmlDoc.createElement("edition");
newtext=xmlDoc.createTextNode("First");
newel.appendChild(newtext);
x=xmlDoc.getElementsByTagName("book");
x[0].appendChild(newel);

例子解释：

创建 <edition> 元素创建值为 "First" 的文本节点把这个文本节点追加到 <edition> 元素把元素追加到第一个元素

删除元素

removeChild() 方法删除指定的节点（或元素）。下面的代码片段将删除第一个元素中的第一个节点：

<html>
<head>
<script type="text/javascript" src="/example/xml/bookstore.js">
</script>
</head>
<body>
<script type="text/javascript">
//检查最后一个节点是否是元素节点
function get_lastchild(n)
{
var x=n.lastChild;
while (x.nodeType!=1)
  {
  x=x.previousSibling;
  }
return x;
}
xmlDoc=loadXMLDoc("/example/xdom/books.xml");
document.write("book 节点的数目：");
document.write(xmlDoc.getElementsByTagName('book').length);
document.write("<br />");
var lastNode=get_lastchild(xmlDoc.documentElement);
var delNode=xmlDoc.documentElement.removeChild(lastNode);
document.write("removeChild() 方法执行后 book 节点的数目：");
document.write(xmlDoc.getElementsByTagName('book').length);
</script>
</body>
</html>

运行一下

注释：上例的结果可能会根据所用的浏览器而不同。Firefox 把新行字符当作空的文本节点，而 Internet Explorer 不是这样。您可以在本站的 XML DOM 教程中阅读到更多有关这个问题以及如何避免它的知识。

这里提供的 XML DOM 实例，只向您展示了少数几项我们可以利用 XML DOM 完成的工作。

如需学习更多有关 XML DOM 的知识，请访问本站的 XML DOM 教程。

XML DOM 高级

XML DOM

获取元素的值

获取属性的值

改变元素的值

改变属性的值

创建元素

例子解释：

删除元素

分类导航