XML DOM

17 Mar 2025 | 阅读 2 分钟

什么是 XML DOM

DOM 是“文档对象模型”的首字母缩写。它定义了访问和操作文档的标准方法。文档对象模型 (DOM) 是 HTML 和 XML 文档的编程 API。它定义了文档的逻辑结构以及访问和操作文档的方式。

作为 W3C 规范，文档对象模型的一个重要目标是提供一个标准编程接口，该接口可以在各种环境和应用程序中使用。文档对象模型可以与任何编程语言一起使用。

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

XML DOM 是什么？

XML DOM 为 XML 文档创建了一个树状结构视图。

我们可以通过 DOM 树访问所有元素。

我们可以修改或删除它们的内容，也可以创建新元素。元素、它们的内容（文本和属性）都称为节点。

例如，考虑这张表，它取自 HTML 文档

      <TABLE>
      <ROWS> 
      <TR> 
      <TD>A</TD>
      <TD>B</TD> 
      </TR> 
      <TR>
      <TD>C</TD>
      <TD>D</TD> 
      </TR> 
      </ROWS>
      </TABLE>

文档对象模型像这样表示这张表

XML DOM 示例：加载 XML 文件

让我们举个例子来说明如何将 XML 文档 ("note.xml") 解析为 XML DOM 对象。

此示例将 XML 文档 (note.xml) 解析为 XML DOM 对象，并使用 JavaScript 从中提取信息。

让我们看看包含消息的 XML 文件。

note.xml

<?xml version="1.0" encoding="ISO-8859-1"?>  
<note>  
  <to>sonoojaiswal@javatpoint.com</to>  
  <from>vimal@javatpoint.com</from>  
  <body>Hello XML DOM</body>  
</note>  

让我们看看使用 DOM 提取 XML 文档数据的 HTML 文件。

xmldom.html

<!DOCTYPE html>
<html>
<body>
<h1>Important Note</h1>
<div>
<b>To:</b> <span id="to"></span><br>
<b>From:</b> <span id="from"></span><br>
<b>Message:</b> <span id="message"></span>
</div>
<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","note.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
document.getElementById("to").innerHTML=
xmlDoc.getElementsByTagName("to")[0].childNodes[0].nodeValue;
document.getElementById("from").innerHTML=
xmlDoc.getElementsByTagName("from")[0].childNodes[0].nodeValue;
document.getElementById("message").innerHTML=
xmlDoc.getElementsByTagName("body")[0].childNodes[0].nodeValue;
</script>
</body>
</html> 

立即测试

输出

重要提示

收件人： [email protected]
发件人： [email protected]
消息： 你好，XML DOM

XML DOM 示例：加载 XML 字符串

此示例将 XML 字符串解析为 XM DOM 对象，然后使用 JavaScript 从中提取一些信息。

让我们看看使用 DOM 提取 XML 字符串数据的 HTML 文件。

xmldom.html

<!DOCTYPE html>
<html>
<body>
<h1>Important Note2</h1>
<div>
<b>To:</b> <span id="to"></span><br>
<b>From:</b> <span id="from"></span><br>
<b>Message:</b> <span id="message"></span>
</div>
<script>
txt1="<note>";  
txt2="<to>Sania Mirza</to>";  
txt3="<from>Serena William</from>";  
txt4="<body>Don't forget me this weekend!</body>";  
txt5="</note>";  
txt=txt1+txt2+txt3+txt4+txt5;

if (window.DOMParser)
  {
  parser=new DOMParser();
  xmlDoc=parser.parseFromString(txt,"text/xml");
  }
else // Internet Explorer
  {
  xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
  xmlDoc.async=false;
  xmlDoc.loadXML(txt);
  }
document.getElementById("to").innerHTML=
xmlDoc.getElementsByTagName("to")[0].childNodes[0].nodeValue;
document.getElementById("from").innerHTML=
xmlDoc.getElementsByTagName("from")[0].childNodes[0].nodeValue;
document.getElementById("message").innerHTML=
xmlDoc.getElementsByTagName("body")[0].childNodes[0].nodeValue;
</script>
</body>
</html>

立即测试

输出