深入学习 XML 解析器及 DOM 操作技术

2024-03-17 14:33 由小万哥丶发表于 #前端开发

所有主要的浏览器都内置了一个XML解析器，用于访问和操作XML

XML 解析器

在访问XML文档之前，必须将其加载到XML DOM对象中

所有现代浏览器都有一个内置的XML解析器，可以将文本转换为XML DOM对象

解析文本字符串

以下示例将一个文本字符串解析为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>

示例解释

定义了一个文本字符串：

text = "<bookstore><book>" +  
    "<title>Everyday Italian</title>" +  
    "<author>Giada De Laurentiis</author>" +  
    "<year>2005</year>" +  
    "</book></bookstore>";

创建了一个XML DOM解析器：

parser = new DOMParser();

解析器使用文本字符串创建一个新的XML DOM对象：

xmlDoc = parser.parseFromString(text, "text/xml");

XMLHttpRequest 对象

responseText 属性以字符串形式返回响应。

responseXML 属性以XML DOM对象的形式返回响应。

如果要将响应作为XML DOM对象使用，可以使用responseXML属性。

示例

xmlDoc = xmlhttp.responseXML;  
txt = "";  
x = xmlDoc.getElementsByTagName("ARTIST");  
for (i = 0; i < x.length; i++) {  
    txt += x[i].childNodes[0].nodeValue + "<br>";  
}  
document.getElementById("demo").innerHTML = txt;

XML DOM

DOM 是什么？

文档对象模型（DOM）定义了一种标准，用于访问和操作文档

HTML DOM 定义了一种访问和操作HTML文档的标准方式。它将HTML文档呈现为一棵树结构。

XML DOM 定义了一种访问和操作XML文档的标准方式。它将XML文档呈现为一棵树结构。

了解DOM对于任何与HTML或XML相关的工作都是必要的。

HTML DOM

所有HTML元素都可以通过HTML DOM访问。

以下示例更改具有id="demo"的HTML元素的值：

示例

<h1 id="demo">This is a Heading</h1>

<button type="button"
onclick="document.getElementById('demo').innerHTML = 'Hello World!'">Click Me!
</button>

XML DOM

所有XML元素都可以通过XML DOM访问

<?xml version="1.0" encoding="UTF-8"?>
<bookstore>

  <book category="cooking">
    <title lang="en">Everyday Italian</title>
    <author>Giada De Laurentiis</author>
    <year>2005</year>
    <price>30.00</price>
  </book>

  <book category="children">
    <title lang="en">Harry Potter</title>
    <author>J K. Rowling</author>
    <year>2005</year>
    <price>29.99</price>
  </book>

</bookstore>

以下代码检索XML文档中第一个 <title> 元素的文本值：

示例

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

XML DOM 是获取、更改、添加和删除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>

XML 和 XPath

什么是 XPath？

XPath 是 XSLT 标准中的一个主要元素。它可用于浏览 XML 文档中的元素和属性。

XPath 是定义 XML 文档部分的语法。
XPath 使用路径表达式在 XML 文档中导航。
XPath 包含标准函数库。
XPath 是 XSLT 和 XQuery 中的主要元素

XPath 路径表达式

XPath 使用路径表达式选择 XML 文档中的节点或节点集。这些路径表达式类似于在传统计算机文件系统中使用的表达式。

XPath 表达式可用于 JavaScript、Java、XML Schema、PHP、Python、C 和 C++ 等许多其他语言。

XPath 用于 XSLT

XPath 是 XSLT 标准中的一个主要元素。具备 XPath 知识将使您能够充分利用 XSL。

XPath 示例

我们将使用以下 XML 文档：

<?xml version="1.0" encoding="UTF-8"?>
<bookstore>
  <book category="cooking">
    <title lang="en">Everyday Italian</title>
    <author>Giada De Laurentiis</author>
    <year>2005</year>
    <price>30.00</price>
  </book>
  <!-- 其他书籍内容省略 -->
</bookstore>

在下表中，我们列出了一些 XPath 表达式及其结果：

XPath 表达式	结果
`/bookstore/book[1]`	选择 bookstore 元素的第一个子元素 book 元素
`/bookstore/book[last()]`	选择 bookstore 元素的最后一个子元素 book 元素
`/bookstore/book[last()-1]`	选择 bookstore 元素的倒数第二个子元素 book 元素
`/bookstore/book[position()<3]`	选择 bookstore 元素的前两个子元素 book 元素
`//title[@lang]`	选择所有具有名为 lang 的属性的 title 元素
`//title[@lang='en']`	选择所有具有值为 "en" 的 "lang" 属性的 title 元素
`/bookstore/book[price>35.00]`	选择 bookstore 元素中所有具有价格大于 35.00 的 book 元素
`/bookstore/book[price>35.00]/title`	选择 bookstore 元素中所有具有价格大于 35.00 的 book 元素的 title 元素

XML 和 XQuery

什么是 XQuery？

XQuery 是 XML 的查询语言，类似于 SQL 对数据库的作用。XQuery 的设计目标是查询 XML 数据。

XQuery 示例

for $x in doc("books.xml")/bookstore/book
where $x/price>30
order by $x/title
return $x/title

XQuery 是一种从 XML 文档中查找和提取元素和属性的语言。
示例问题："从存储在 cd_catalog.xml 中的 CD 集合中选择所有价格低于 $10 的 CD 记录"

XQuery 和 XPath

XQuery 1.0 和 XPath 2.0 共享相同的数据模型，并支持相同的函数和运算符。如果您已经学习过 XPath，那么理解 XQuery 将没有问题。

XQuery 使用示例

XQuery 可以用于：

提取用于 Web 服务的信息
生成摘要报告
将 XML 数据转换为 XHTML
在 Web 文档中搜索相关信息

XML、XLink 和 XPointer

XLink

XLink 用于在 XML 文档中创建超链接。
在 XML 文档中，没有浏览器支持 XLink。但是 XLink 在其他 XML 语言中使用。
XLink 语法允许使用任何元素名称作为链接元素。

XLink 示例

<?xml version="1.0" encoding="UTF-8"?>

xlink:type="simple" 创建一个简单的 "类似 HTML" 链接。
xlink:href 属性指定要链接到的 URL。

XLink 示例解释

在文档顶部声明了 XLink 命名空间（xmlns:xlink="http://www.w3.org/1999/xlink"）。
xlink:type="simple" 创建一个简单的 "类似 HTML" 链接。
xlink:href 属性指定链接到的 URL（在这种情况下是图像）。
xlink:show="new" 指定链接应在新窗口中打开。

XLink - 进一步了解

在上面的示例中，我们演示了简单的 XLink。
当访问远程位置作为资源时，XLink 变得更有趣。

XPointer

XPointer 允许链接指向 XML 文档的特定部分。
使用 XPath 表达式在 XML 文档中导航

XPointer 示例

在 XLink 与 XPointer 结合使用的示例中，我们链接到另一个文档的特定部分。

首先，查看目标 XML 文档，该文档在每个元素上使用 id 属性：

<?xml version="1.0" encoding="UTF-8"?>

<dogbreeds>

<dog breed="Rottweiler" id="Rottweiler">
  <picture url="https://dog.com/rottweiler.gif" />
  <history>The Rottweiler's ancestors were probably Roman drover dogs.....</history>
  <temperament>Confident, bold, alert and imposing, the Rottweiler is a popular choice for its ability to protect....</temperament>
</dog>

<dog breed="FCRetriever" id="FCRetriever">
  <picture url="https://dog.com/fcretriever.gif" />
  <history>One of the earliest uses of retrieving dogs was to help fishermen retrieve fish from the water....</history>
  <temperament>The flat-coated retriever is a sweet, exuberant, lively dog that loves to play and retrieve....</temperament>
</dog>

</dogbreeds>

在 XPointer 中，我们可以链接到文档中具有特定 id 的元素：

<fact xlink:type="simple" xlink:href="https://dog.com/dogbreeds.xml#Rottweiler">Fact about Rottweiler</fact>

这里，我们使用 id 值 "Rottweiler"。

这种链接方法可用于指向文档中的特定部分。

XML验证器

使用我们的XML验证器来检查您的XML语法。

格式良好的XML文档

具有正确语法的XML文档称为“格式良好”。以下是一份示例：

<?xml version="1.0" encoding="UTF-8"?>
<note>
  <to>Tove</to>
  <from>Jani</from>
  <heading>Reminder</heading>
  <body>Don't forget me this weekend!</body>
</note>

XML的语法规则包括：

XML文档必须有根元素
XML元素必须有关闭标签
XML标签区分大小写
XML元素必须正确嵌套
XML属性值必须用引号括起来

XML错误将阻止您

XML文档中的错误将阻止您的XML应用程序

HTML浏览器允许显示带有错误的HTML文档，但对于XML，不允许存在错误。

检查XML语法

为了帮助您检查XML语法，我们创建了一个XML验证器。

尝试检查正确的XML

<?xml version="1.0" encoding="UTF-8"?>
<note>
  <to>Tove</to>
  <from>Jani</from>
  <heading>Reminder</heading>
  <body>Don't forget me this weekend!</body>
</note>

尝试检查不正确的XML

<?xml version="1.0" encoding="UTF-8"?>
<note>
  <to>Tove</to>
  <from>Jani</from>
  <heading>Reminder</pheading>
  <body>Don't forget me this weekend!</body>
</note>

有效的XML文档

“格式良好”的XML文档与“有效”的XML文档不同。“有效”的XML文档必须是格式良好的，并符合文档类型定义（DTD或XML模式）。

文档类型定义定义了XML文档的规则以及合法的元素和属性。

XML DTD

具有正确语法的XML文档称为“格式良好”。

通过DTD验证的XML文档既是“格式良好”又是“有效”的。

什么是DTD？

DTD代表文档类型定义。

DTD定义了XML文档的结构以及合法的元素和属性。

有效的XML文档

一个“有效”的XML文档既是“格式良好”的，也符合DTD的规则：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE note SYSTEM "Note.dtd">
<note>
  <to>Tove</to>
  <from>Jani</from>
  <heading>Reminder</heading>
  <body>Don't forget me this weekend!</body>
</note>

上面的DOCTYPE声明包含对DTD文件的引用。DTD文件的内容如下所示，并进行了解释。

XML DTD

DTD的目的是定义XML文档的结构以及合法的元素和属性

<!DOCTYPE note
[
  <!ELEMENT note (to,from,heading,body)>
  <!ELEMENT to (#PCDATA)>
  <!ELEMENT from (#PCDATA)>
  <!ELEMENT heading (#PCDATA)>
  <!ELEMENT body (#PCDATA)>
]>

上述DTD的解释如下

<!DOCTYPE note - 定义文档的根元素为note
<!ELEMENT note - 定义note元素必须包含元素：“to, from, heading, body”
<!ELEMENT to - 定义to元素的类型为“#PCDATA”
<!ELEMENT from - 定义from元素的类型为“#PCDATA”
<!ELEMENT heading - 定义heading元素的类型为“#PCDATA”
<!ELEMENT body - 定义body元素的类型为“#PCDATA”

提示：#PCDATA表示可解析的字符数据

使用DTD进行实体声明

DOCTYPE声明还可用于定义文档中使用的特殊字符或字符串

例子

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE note [
  <!ENTITY nbsp "&#xA0;">
  <!ENTITY writer "Writer: Donald Duck.">
  <!ENTITY copyright "Copyright: W3Schools.">
]>

<note>
  <to>Tove</to>
  <from>Jani</from>
  <heading>Reminder</heading>
  <body>Don't forget me this weekend!</body>
  <footer>&writer;&nbsp;&copyright;</footer>
</note>

提示：实体由三部分组成：以“＆”开始，然后是实体名称，最后以分号结束

何时使用DTD？

使用DTD，独立的人群可以同意使用标准的DTD进行数据交换

使用DTD，您可以验证从外部世界接收到的数据是否有效

您还可以使用DTD验证自己的数据

何时不使用DTD？

XML不需要DTD

当您尝试使用XML进行实验，或者当您处理小型XML文件时，创建DTD可能是浪费时间的

如果您开发应用程序，请等到规范稳定后再添加DTD。否则，由于验证错误，您的软件可能会停止工作

XML Schema

具有正确语法的XML文档称为“格式良好”

通过XML Schema验证的XML文档既是“格式良好”又是“有效”的

XML Schema

XML Schema是DTD的基于XML的替代方案

<xs:element name="note">
  <xs:complexType>
    <xs:sequence>
      <xs:element name="to" type="xs:string"/>
      <xs:element name="from" type="xs:string"/>
      <xs:element name="heading" type="xs:string"/>
      <xs:element name="body" type="xs:string"/>
    </xs:sequence>
  </xs:complexType>
</xs:element>

上述Schema的解释如下

<xs:element name="note"> 定义名为“note”的元素
<xs:complexType> “note”元素是一个复杂类型
<xs:sequence> 复杂类型是一系列元素
<xs:element name="to" type="xs:string"> “to”元素的类型为字符串（文本）
<xs:element name="from" type="xs:string"> “from”元素的类型为字符串
<xs:element name="heading" type="xs:string"> “heading”元素的类型为字符串
<xs:element name="body" type="xs:string"> “body”元素的类型为字符串

XML Schema比DTD更强大

XML Schema是用XML编写的
XML Schema可扩展以添加内容
XML Schema支持数据类型
XML Schema支持命名空间

为什么使用XML Schema？

使用XML Schema，您的XML文件可以携带其自身格式的描述。

使用XML Schema，独立的人群可以就数据交换达成标准协议。

使用XML Schema，您可以验证数据。

XML Schema支持数据类型

XML Schema的最大优势之一是支持数据类型

更容易描述文档内容
更容易定义对数据的限制
更容易验证数据的正确性
更容易在不同数据类型之间转换数据

XML Schema使用XML语法

XML Schema的另一个重要优势是它们是用XML编写的

您不必学习一种新语言
您可以使用XML DOM操作Schema
您可以使用XSLT转换Schema

在服务器上使用XSLT转换XML

此ASP将服务器上的XML文件转换为XHTML

<%
'加载XML
set xml = Server.CreateObject("Microsoft.XMLDOM")
xml.async = false
xml.load(Server.MapPath("simple.xml"))

'加载XSL
set xsl = Server.CreateObject("Microsoft.XMLDOM")
xsl.async = false
xsl.load(Server.MapPath("simple.xsl"))

'转换文件
Response.Write(xml.transformNode(xsl))
%>

例子解释

代码的第一个块创建Microsoft XML解析器（XMLDOM）的实例，并将XML文件加载到内存中。
代码的第二个块创建解析器的另一个实例，并将XSL文件加载到内存中。
代码的最后一行使用XSL文档转换XML文档，并将结果作为XHTML发送到浏览器。

最后

为了方便其他设备和平台的小伙伴观看往期文章：

微信公众号搜索：Let us Coding，关注后即可获取最新文章推送

看完如果觉得有帮助，欢迎点赞、收藏、关注