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

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

XML 解析器

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

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

解析文本字符串

以下示例将一个文本字符串解析为XML DOM对象,并使用JavaScript从中提取信息:

示例

html 复制代码
<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>

示例解释

定义了一个文本字符串:

javascript 复制代码
text = "<bookstore><book>" +  
    "<title>Everyday Italian</title>" +  
    "<author>Giada De Laurentiis</author>" +  
    "<year>2005</year>" +  
    "</book></bookstore>";

创建了一个XML DOM解析器:

javascript 复制代码
parser = new DOMParser();

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

javascript 复制代码
xmlDoc = parser.parseFromString(text, "text/xml");

XMLHttpRequest 对象

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

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

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

示例

javascript 复制代码
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元素的值:

示例

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 复制代码
<?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> 元素的文本值:

示例

javascript 复制代码
txt = xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;

XML DOM 是获取、更改、添加和删除XML元素的标准方式。

以下示例将一个文本字符串加载到XML DOM对象中,并使用JavaScript从中提取信息:

示例

html 复制代码
<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 复制代码
<?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 示例

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 文档中搜索相关信息
  • XLink 用于在 XML 文档中创建超链接。
  • 在 XML 文档中,没有浏览器支持 XLink。但是 XLink 在其他 XML 语言中使用。
  • XLink 语法允许使用任何元素名称作为链接元素。

XLink 示例

xml 复制代码
<?xml version="1.0" encoding="UTF-8"?>
  • xlink:type="simple" 创建一个简单的 "类似 HTML" 链接。
  • xlink:href 属性指定要链接到的 URL。

XLink 示例解释

  • 在文档顶部声明了 XLink 命名空间(xmlns:xlink="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 复制代码
<?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 的元素:

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

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

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

XML验证器

使用我们的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 复制代码
<?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 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 复制代码
<?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文档的结构以及合法的元素和属性

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 复制代码
<?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的替代方案

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

asp 复制代码
<%
'加载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,关注后即可获取最新文章推送

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

相关推荐
胡西风_foxww7 分钟前
【ES6复习笔记】数值扩展(16)
前端·笔记·es6·扩展·数值
mosen8689 分钟前
uniapp中uni.scss如何引入页面内或生效
前端·uni-app·scss
白云~️9 分钟前
uniappX 移动端单行/多行文字隐藏显示省略号
开发语言·前端·javascript
沙尘暴炒饭12 分钟前
uniapp 前端解决精度丢失的问题 (后端返回分布式id)
前端·uni-app
昙鱼26 分钟前
springboot创建web项目
java·前端·spring boot·后端·spring·maven
天天进步201531 分钟前
Vue项目重构实践:如何构建可维护的企业级应用
前端·vue.js·重构
小华同学ai34 分钟前
vue-office:Star 4.2k,款支持多种Office文件预览的Vue组件库,一站式Office文件预览方案,真心不错
前端·javascript·vue.js·开源·github·office
APP 肖提莫36 分钟前
MyBatis-Plus分页拦截器,源码的重构(重构total总数的计算逻辑)
java·前端·算法
问道飞鱼1 小时前
【前端知识】强大的js动画组件anime.js
开发语言·前端·javascript·anime.js
k09331 小时前
vue中proxy代理配置(测试一)
前端·javascript·vue.js