简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

目錄搜尋

XML 基础教程 XML 用途 XML树结构 XML 语法规则 XML元素 XML 属性 XML 验证 XML 验证器查看 XML 文件使用 CSS 显示 XML 使用 XSLT 显示 XML XML JavaScript XMLHttpRequest 对象 XML Parser XML DOM XML to HTML XML 应用程序 XML 进阶 XML 命名空间 XML CDATA XML 编码服务器上的 XML XML DOM 高级 XML 注意事项现实生活中的 XML XML 编辑器 XML - E4X XML 总结下一步学习什么呢？

文字

XML DOM 高级

XML DOM - 高级

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

在本章中我们将结石一些其他重要的 XML DOM 方法。

您可以在我们的 XML DOM 教程中学习更多有关 XML DOM 的知识。

获取元素的值

下面的实例中使用的 XML 文件：books.xml。

<?xml version="1.0" encoding="utf-8"?>
 
<bookstore>
  <book category="COOKING">
    <title>Everyday Italian</title>
    <author>Giada De Laurentiis</author>
    <year>2005</year>
    <price>30.00</price>
  </book>
  <book category="CHILDREN">
    <title>Harry Potter</title>
    <author>J K. Rowling</author>
    <year>2005</year>
    <price>29.99</price>
  </book>
  <book category="WEB">
    <title>XQuery Kick Start</title>
    <author>James McGovern</author>
    <author>Per Bothner</author>
    <author>Kurt Cagle</author>
    <author>James Linn</author>
    <author>Vaidyanathan Nagarajan</author>
    <year>2003</year>
    <price>49.99</price>
  </book>
  <book category="WEB">
    <title>Learning XML</title>
    <author>Erik T. Ray</author>
    <year>2003</year>
    <price>39.95</price>
  </book>
</bookstore>

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

实例

txt=xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
<!DOCTYPE html>
<html>
<body>
<script>
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.open("GET","books.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML; 
 
txt=xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
document.write(txt);
</script>
</body>
</html>
Everyday Italian

获取属性的值

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

实例

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

<!DOCTYPE html>

<html>

<body>

if (window.XMLHttpRequest)

{// code for IE7+, Firefox, Chrome, Opera, Safari

xmlhttp=new XMLHttpRequest();

}

else

{// code for IE6, IE5

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

}

xmlhttp.open("GET","books.xml",false);

xmlhttp.send();

xmlDoc=xmlhttp.responseXML;

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

document.write(txt);

</script>

</body>

</html>

改变元素的值

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

实例

txt=xmlDoc.getElementsByTagName("title")[0].getAttribute("lang");
<!DOCTYPE html>
<html>
<body>
<script>
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.open("GET","books.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML; 
 
txt=xmlDoc.getElementsByTagName("title")[0].getAttribute("lang");
document.write(txt);
</script>
</body>
</html>
en

创建新的属性

XML DOM 的 setAttribute() 方法可用于改变现有的属性值，或创建一个新的属性。

下面的实例创建了一个新的属性（edition="first"），然后把它添加到每一个 <book> 元素中：

实例

x=xmlDoc.getElementsByTagName("book"); for(i=0;i<x.length;i++) { x[i].setAttribute("edition","first"); }

<!DOCTYPE html>
<html>
<body>
<script>if (window.XMLHttpRequest)  
{// code for IE7+, Firefox, Chrome, Opera, Safari  xmlhttp=new XMLHttpRequest();  
}else  {// code for IE6, IE5  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
 }
 xmlhttp.open("GET","books.xml",false);
 xmlhttp.send();
 xmlDoc=xmlhttp.responseXML;  
 x=xmlDoc.getElementsByTagName("book");for(i=0;i<x.length;i++)  
 {  
 x[i].setAttribute("edition","first"); 
 } //Output all attribute valuesfor 
 (i=0;i<x.length;i++){document.write("Category: " + x[i].getAttribute('category') + 
 "<br>");document.write("Edition: " 
 + x[i].getAttribute('edition') + "<br>");
 }
 </script>
 </body>
 </html>

Category: cookingEdition: firstCategory: childrenEdition: firstCategory: webEdition: firstCategory: webEdition: first

创建元素

XML DOM 的 createElement() 方法创建一个新的元素节点。

XML DOM 的 createTextNode() 方法创建一个新的文本节点。

XML DOM 的 appendChild() 方法向节点添加子节点（在最后一个子节点之后）。

如需创建带有文本内容的新元素，需要同时创建元一个新的元素节点和一个新的文本节点，然后把他追加到现有的节点。

下面的实例创建了一个新的元素（<edition>），带有如下文本：First，然后把它添加到第一个 <book> 元素：

实例

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

<!DOCTYPE html>
<html>
<body>
<script>if (window.XMLHttpRequest)  {// code for IE7+, Firefox, Chrome, Opera, Safari  xmlhttp=new XMLHttpRequest(); 
 }else  {// code for IE6, IE5  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
  }xmlhttp.open("GET","books.xml",false);xmlhttp.send();xmlDoc=xmlhttp.responseXML;  
  newel=xmlDoc.createElement("edition");newtext=xmlDoc.createTextNode("First");
  newel.appendChild(newtext);
  x=xmlDoc.getElementsByTagName("book");x[0].appendChild(newel); 
  for (i=0;i<x[0].childNodes.length;i++){if (x[0].childNodes[i].nodeType==1) 
   {   document.write(x[0].childNodes[i].nodeName);  
   document.write(": "); 
    document.write(x[0].childNodes[i].childNodes[0].nodeValue);
      document.write("<br>"); 
       }}
       </script
       ></body>
       </html>

title: Everyday Italianauthor: Giada De Laurentiisyear: 2005price: 30.00edition: First

实例解释

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

删除元素

下面的实例删除第一个 <book> 元素的第一个节点：

实例

x=xmlDoc.getElementsByTagName("book")[0]; x.removeChild(x.childNodes[0]);

<!DOCTYPE html>
<html>
<body>
<script>
if (window.XMLHttpRequest)  {// code for IE7+, Firefox, Chrome, Opera, Safari  xmlhttp=new XMLHttpRequest();  
}else  {// code for IE6, IE5  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
 }xmlhttp.open("GET","books.xml",false);xmlhttp.send();
 xmlDoc=xmlhttp.responseXML;  
 var x=xmlDoc.getElementsByTagName("book")[0];
 document.write("Child nodes before removal: ");
 document.write(x.childNodes.length);x.removeChild(x.childNodes[0]);
  document.write("<br>Child nodes after removal: ");
  document.write(x.childNodes.length); 
  </script>
  </body>
  </html>

Child nodes before removal: 9Child nodes after removal: 8

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