HTML 页面显示 XML 数据

HTML 页面中显示 XML 数据

在下面的实例中，我们打开一个 XML 文件（"cd_catalog.xml"），然后遍历每个 CD 元素，并显示HTML 表格中的 ARTIST 元素和 TITLE 元素的值：

实例

<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","cd_catalog.xml",false);

xmlhttp.send();

xmlDoc=xmlhttp.responseXML;

document.write("<table border='1'>");

var x=xmlDoc.getElementsByTagName("CD");

for (i=0;i<x.length;i++)

{

document.write("<tr><td>");

document.write(x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue);

document.write("</td><td>");

document.write(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);

document.write("</td></tr>");

}

document.write("</table>");

</script>

</body>

</html>

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！

用XMLSpy编辑与约束XML文件操作

一、XML文件介绍

可扩展标记语言，标准通用标记语言的子集，简称XML。是一种用于标记电子文件使其具有结构性的标记语言。

XML文件格式是纯文本格式，在许多方面类似于HTML，XML由XML元素组成，每个XML元素包括一个开始标记（<title>），一个结束标记（</title>）以及两个标记之间的内容，例如，可以将XML元素标记为价格、订单编号或名称。标记是对文档存储格式和逻辑结构的描述。在形式上，标记中可能包括注释、引用、字符数据段、起始标记、结束标记、空元素、文档类型声明( DTD)和序言。

XML文件的作用是可以定义数据交流的标准或系统配置参数，有一段时间预测是可以替代HTML的标签语言，但是后来发展不理想，没有成为HTML网页的替代方案。但是XML文件在数据交流中还是非常有用的，尤其是在进行数据交流标准的定义中，不同用户按事先约定好的XML标签格式传递数据，双方就可以交流数据。其规范性要强于json文件格式

具体规则如下：

1、必须有声明语句。

XML声明是XML文档的第一句，其格式如下：

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

2、注意大小写

在XML文档中，大小写是有区别的。"<P>"和"<p>"是不同的标记。注意在写元素时，前后标记的大小写要保持一致。

3、XML文档有且只有一个根元素

XML文档必须有一个根元素，就是紧接着声明后面建立的第一个元素，其他元素都是这个根元素的子元素，根元素完全包括文档中其他所有的元素。根元素的起始标记要放在所有其他元素的起始标记之前；根元素的结束标记要放在所有其他元素的结束标记之后。例如

<?xml version="1.0" encoding="utf-8"?>
<data>
         XXXXXX
</data>

4、属性值使用引号

在HTML代码里面，属性值可以加引号，也可以不加。但是XML规定，所有属性值必须加引号（可以是单引号，也可以是双引号，建议使用双引号），否则将被视为错误。

<?xml version="1.0" encoding="utf-8"?>
		<data name="school_data">
					XXXXXX
		</data>

5、所有的标记必须有相应的结束标记

在HTML中，标记可以不成对出现，而在XML中，所有标记必须成对出现，有一个开始标记，就必须有一个结束标记，否则将被视为错误。

<?xml version="1.0" encoding="utf-8"?>
<data name=”school_data”>
	<school name=”ncist”>
		<myclass name="计算机B191">
            <student id="001">
                <realname>张一</realname>
                <sex>男</sex>
                <age>21</age>
            </student>
        </myclass>
	</school>
	<school name=”pku”>
		<myclass name="物联网B191">
            <student id="001">
                <realname>王一</realname>
                <sex>女</sex>
                <age>19</age>
            </student>
        </myclass>
	</school>
</data>

6、所有的空标记也必须被关闭

空标记是指标记对之间没有内容的标记，比如"<img></img>"等标记。在XML中，规定所有的标记必须有结束标记。

二、XMLSpy软件介绍

XMLSpy 是来自Altova的一款方便实用，功能强大的XML（标准通用标记语言的子集）编辑器。软件支持WYSWYG，支持Unicode、多字符集，支持Well-formed和Validated两种类型的XML文档，支持NewsML等多种标准XML文档的编辑，软件在原来的基础上增加了几个很有用的功能，会让XML代码的处理更容易，是J2EE,.NET和数据库开发人员不可缺少的高性能的开发工具。网上搜索需要的版本安装就可以了。

XMLSpy 软件界面

XMLSpy 编辑界面

三、利用XMLSpy软件编辑XML文件

1、建立一个XML样例文件

首先利用任意文本编辑器，建立一个普通的XML文件，里面含有基本的XML数据结构。

<?xml version="1.0" encoding="UTF-8" ?>
<data>
    <school name="ncist001">
        <myclass name="计算机001">
            <student id="001">
                <realname>张一</realname>
                <sex>男</sex>
                <age>21</age>
            </student>
        </myclass>
    </school>
</data>

2、利用XMLSpy软件生成约束文件

利用XMLSpy软件打开此文件，分析生成约束XSD文件。这步很关键。会提示是否应用约束等，基本都是默认确认就可以了。软件自动在XML文件中建立约束的语句。这种方法可以快速生成约束文件，在此基础上进行修改，能够快速完成约束文件的生成。

带有约束的XML文件

生成约束文件

xsd约束文件

3、修改约束文件xsd

软件自动生成了约束文件xsd，但是这个约束文件有问题。主要是它采用扁平化方法，描述各个元素的层级关系。所谓扁平化描述，就是指描述本层和它所包含的下一层的元素。

注意点：

1　 data是根目录，它只描述的data的类型，和含有的下一级子元素。具体下一级子元素的详细描述，又采用扁平化方法在下面描述了

2　 在描述中，元素的属性数据类型都进行了约束，问题在于后面采用枚举，限定的数据内容，因此需要把枚举的内容删除掉。

3　在元素的描述中，没有限定数据数量，默认就是1个。应该添加不限定。方法是自己写，或者在添加一个元素，然后再生成约束文件，分析文件就可以了。

xsd约束文件

4、XML可视化

XMLSpy软件提供了一种可视化结构展示，非常方便查看自己的XML约束条件。

xml可视化

5、约束文件地址修改

XML文件中引用的约束文件为绝对地址，不适合发布使用。把它修改为相对地址，xml和xsd文件在同一个文件夹中。

xsd地址

6、约束检查

XML约束检查，如果是用XMLSpy软件，如果有问题，会报错，不让保存。根据提示错误，可以修改xsd文件或者XML文件

约束检查结果

四、pycharm软件中生成约束xsd文件

利用pycharm也可以生成XSD文件，但是文件的描述感觉没有XMLSpy软件描述的清晰，如下图，不适用。Pycharm不能进行XML规则检查。

pycharm编辑xml

xml文件

五、Python读写XML文件

常见的 XML 编程接口有 DOM 和 SAX，这两种接口处理 XML 文件的方式不同，当然使用场合也不同。

Python 有三种方法解析 XML，就是SAX，DOM，以及 ElementTree。

1.SAX (simple API for XML )

Python 标准库包含 SAX 解析器，SAX 用事件驱动模型，通过在解析XML的过程中触发一个个的事件并调用用户定义的回调函数来处理XML文件。

2.DOM(Document Object Model)

将 XML 数据在内存中解析成一个树，通过对树的操作来操作XML。

3.ElementTree(元素树)

ElementTree就像一个轻量级的DOM，具有方便友好的API。代码可用性好，速度快，消耗内存少。

注：因DOM需要将XML数据映射到内存中的树，一是比较慢，二是比较耗内存，而SAX流式读取XML文件，比较快，占用内存少，但需要用户实现回调函数（handler）。

代码如下：

家好，我是皮皮。

前言

对于前端来说，HTML 都是最基础的内容。

今天，我们来了解一下 HTML 和网页有什么关系，以及与 DOM 有什么不同。通过本讲内容，你将掌握浏览器是怎么处理 HTML 内容的，以及在这个过程中我们可以进行怎样的处理来提升网页的性能，从而提升用户的体验。

一、浏览器页面加载过程

不知你是否有过这样的体验：当打开某个浏览器的时候，发现一直在转圈，或者等了好长时间才打开页面……

此时的你，会选择关掉页面还是耐心等待呢？

这一现象，除了网络不稳定、网速过慢等原因，大多数都是由于页面设计不合理导致加载时间过长导致的。

我们都知道，页面是用 HTML/CSS/JavaScript 来编写的。

HTML 的职责在于告知浏览器如何组织页面，以及搭建页面的基本结构；
CSS 用来装饰 HTML，让我们的页面更好看；
JavaScript 则可以丰富页面功能，使静态页面动起来。

HTML由一系列的元素组成，通常称为HTML元素。HTML 元素通常被用来定义一个网页结构，基本上所有网页都是这样的 HTML 结构：

<html>
    <head></head>
    <body></body>
</html>

其中：

html元素是页面的根元素，它描述完整的网页；
head元素包含了我们想包含在 HTML 页面中，但不希望显示在网页里的内容；
body元素包含了我们访问页面时所有显示在页面上的内容，是用户最终能看到的内容;

HTML 中的元素特别多，其中还包括可用于 Web Components 的自定义元素。

前面我们提到页面 HTML 结构不合理可能会导致页面响应慢，这个过程很多时候体现在<script>和<style>元素的设计上，它们会影响页面加载过程中对 Javascript 和 CSS 代码的处理。

因此，如果想要提升页面的加载速度，就需要了解浏览器页面的加载过程是怎样的，从根本上来解决问题。

浏览器在加载页面的时候会用到 GUI 渲染线程和 JavaScript 引擎线程（更详细的浏览器加载和渲染机制将在第 7 讲中介绍）。其中，GUI 渲染线程负责渲染浏览器界面 HTML 元素，JavaScript 引擎线程主要负责处理 JavaScript 脚本程序。

由于 JavaScript 在执行过程中还可能会改动界面结构和样式，因此它们之间被设计为互斥的关系。也就是说，当 JavaScript 引擎执行时，GUI 线程会被挂起。

以网易云课堂官网为例，我们来看看网页加载流程。

（1）当我们打开官网的时候，浏览器会从服务器中获取到 HTML 内容。

（2）浏览器获取到 HTML 内容后，就开始从上到下解析 HTML 的元素。

（3）<head>元素内容会先被解析，此时浏览器还没开始渲染页面。

我们看到<head>元素里有用于描述页面元数据的<meta>元素，还有一些<link>元素涉及外部资源（如图片、CSS 样式等），此时浏览器会去获取这些外部资源。除此之外，我们还能看到<head>元素中还包含着不少的<script>元素，这些<script>元素通过src属性指向外部资源。

（4）当浏览器解析到这里时（步骤 3），会暂停解析并下载 JavaScript 脚本。

（5）当 JavaScript 脚本下载完成后，浏览器的控制权转交给 JavaScript 引擎。当脚本执行完成后，控制权会交回给渲染引擎，渲染引擎继续往下解析 HTML 页面。

（6）此时<body>元素内容开始被解析，浏览器开始渲染页面。

在这个过程中，我们看到<head>中放置的<script>元素会阻塞页面的渲染过程：把 JavaScript 放在<head>里，意味着必须把所有 JavaScript 代码都下载、解析和解释完成后，才能开始渲染页面。

到这里，我们就明白了：如果外部脚本加载时间很长（比如一直无法完成下载），就会造成网页长时间失去响应，浏览器就会呈现“假死”状态，用户体验会变得很糟糕。

因此，对于对性能要求较高、需要快速将内容呈现给用户的网页，常常会将 JavaScript 脚本放在<body>的最后面。这样可以避免资源阻塞，页面得以迅速展示。我们还可以使用defer/async/preload等属性来标记<script>标签，来控制 JavaScript 的加载顺序。

百度首页

三、DOM 解析

对于百度这样的搜索引擎来说，必须要在最短的时间内提供到可用的服务给用户，其中就包括搜索框的显示及可交互，除此之外的内容优先级会相对较低。

浏览器在渲染页面的过程需要解析 HTML、CSS 以得到 DOM 树和 CSS 规则树，它们结合后才生成最终的渲染树并渲染。因此，我们还常常将 CSS 放在<head>里，可用来避免浏览器渲染的重复计算。

二、HTML 与 DOM 有什么不同

我们知道<p>是 HTML 元素，但又常常将<p>这样一个元素称为 DOM 节点，那么 HTML 和 DOM 到底有什么不一样呢？

根据 MDN 官方描述：文档对象模型（DOM）是 HTML 和 XML 文档的编程接口。

也就是说，DOM 是用来操作和描述 HTML 文档的接口。如果说浏览器用 HTML 来描述网页的结构并渲染，那么使用 DOM 则可以获取网页的结构并进行操作。一般来说，我们使用 JavaScript 来操作 DOM 接口，从而实现页面的动态变化，以及用户的交互操作。

在开发过程中，常常用对象的方式来描述某一类事物，用特定的结构集合来描述某些事物的集合。DOM 也一样，它将 HTML 文档解析成一个由 DOM 节点以及包含属性和方法的相关对象组成的结构集合。

三、DOM 解析

我们常见的 HTML 元素，在浏览器中会被解析成节点。比如下面这样的 HTML 内容：

<html>
    <head>
        <title>标题</title>
    </head>
    <body>
        <a href='xx.com'>我的超链接</a>
        <h1>页面第一标题</h1>
    </body>
</html>

打开控制台 Elements 面板，可以看到这样的 HTML 结构，如下图所示：

在浏览器中，上面的 HTML 会被解析成这样的 DOM 树，如下图所示：

我们都知道，对于树状结构来说，常常使用parent/child/sibling等方式来描述各个节点之间的关系，对于 DOM 树也不例外。

举个例子，我们常常会对页面功能进行抽象，并封装成组件。但不管怎么进行整理，页面最终依然是基于 DOM 的树状结构，因此组件也是呈树状结构，组件间的关系也同样可以使用parent/child/sibling这样的方式来描述。同时，现在大多数应用程序同样以root为根节点展开，我们进行状态管理、数据管理也常常会呈现出树状结构。

四、事件委托

我们知道，浏览器中各个元素从页面中接收事件的顺序包括事件捕获阶段、目标阶段、事件冒泡阶段。其中，基于事件冒泡机制，我们可以实现将子元素的事件委托给父级元素来进行处理，这便是事件委托。

如果我们在每个元素上都进行监听的话，则需要绑定三个事件;(假设页面上有a,b,c三个兄弟节点)

function clickEventFunction(e) {
  console.log(e.target === this); // logs `true`
  // 这里可以用 this 获取当前元素
}
// 元素a,b,c绑定
element2.addEventListener("click", clickEventFunction, false);
element5.addEventListener("click", clickEventFunction, false);
element8.addEventListener("click", clickEventFunction, false);

使用事件委托，可以通过将事件添加到它们的父节点，而将事件委托给父节点来触发处理函数：

function clickEventFunction(event) {
  console.log(e.target === this); // logs `false`
  // 获取被点击的元素
  const eventTarget = event.target;
  // 检查源元素`event.target`是否符合预期
  // 此处控制广告面板的展示内容
}
// 元素1绑定
element1.addEventListener("click", clickEventFunction, false);

这样能解决什么问题呢？

绑定子元素会绑定很多次的事件，而绑定父元素只需要一次绑定。
将事件委托给父节点，这样我们对子元素的增加和删除、移动等，都不需要重新进行事件绑定。

常见的使用方式主要是上述这种列表结构，每个选项都可以进行编辑、删除、添加标签等功能，而把事件委托给父元素，不管我们新增、删除、更新选项，都不需要手动去绑定和移除事件。

如果在列表数量内容较大的时候，对成千上万节点进行事件监听，也是不小的性能消耗。使用事件委托的方式，我们可以大量减少浏览器对元素的监听，也是在前端性能优化中比较简单和基础的一个做法。

注意:

如果我们直接在document.body上进行事件委托，可能会带来额外的问题;
由于浏览器在进行页面渲染的时候会有合成的步骤，合成的过程会先将页面分成不同的合成层，而用户与浏览器进行交互的时候需要接收事件。此时，浏览器会将页面上具有事件处理程序的区域进行标记，被标记的区域会与主线程进行通信。
如果我们document.body上被绑定了事件，这时候整个页面都会被标记;
即使我们的页面不关心某些部分的用户交互，合成器线程也必须与主线程进行通信，并在每次事件发生时进行等待。这种情况，我们可以使用passive: true选项来解决

五、总结

我们了解了 HTML 的作用，以及它是如何影响浏览器中页面的加载过程的，同时还介绍了使用 DOM 接口来控制 HTML 的展示和功能逻辑。我们了解了DOM解析事件委托等相关概念。

在线咨询

上一篇：创建专业电子邮件签名：提升个人与品牌形象的实用指南
下一篇：19.HTML CSS边距、边框、填充和内容

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

HTML 页面显示 XML 数据

家好，我是皮皮。

前言

一、浏览器页面加载过程

三、DOM 解析

二、HTML 与 DOM 有什么不同

三、DOM 解析

四、事件委托

五、总结

您的项目需求