DOM(二)——XML DOM-白红宇

DOM(二)——XML DOM

阅读量：5993 次

发布时间：2019-06-20

本文共 4527 字，大约阅读时间需要 15 分钟。

XML（Extensible Markup Language）可扩展标记语言（可以通过这篇博客简单了解），DOM（Document ObjectModel）文档对象模型（通过上篇博客了解）。非常明显，XML DOM就是文档类型模型针对XML做的一些操作。是和HTMLDOM共同合作来完成网页数据的动态改变显示等问题！和XML DOM有很多相似的地方，但是基于XML和HTML的区别，他们的一些操作还是有很大不同的。来看一下通过DOM对XML的操作相关知识。

DOM在XML中关于节点，属性，方法等的概念，知识都是非常相似的，这里不再赘述，这里重点通过几个实例运用一下！

我们先引进一个XML文件books.xml，以后操作都在它上进行：（注意观察XML和HTML的不同处和相同处）

[html]

<span style="font-size:18px;"><?xml version="1.0" encoding="ISO-8859-1"?>

<bookstore>

<book category="children">

<title lang="en">Harry Potter</title>

<author>J K. Rowling</author>

<year>2005</year>

<price>29.99</price>

</book>

<book category="cooking">

<title lang="en">Everyday Italian</title>

<author>Giada De Laurentiis</author>

<year>2005</year>

<price>30.00</price>

</book>

<book category="web">

<title lang="en">Learning XML</title>

<author>Erik T. Ray</author>

<year>2003</year>

<price>39.95</price>

</book>

<book category="web">

<title lang="en">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>

</bookstore>

</span>

一，解析XML文件，大多数浏览器都内建了读取和操作XML的解析器，通过解析器把XML转换为JavaScript可存取的对象。但是这里的以IE为内核的和FireFox或其他的浏览器是不同的，这里看个全面的加载解析XML文件的例子：（以上边books.xml进行实验）

[javascript]

<span style="font-size:18px;"><html>

<body>

<script type="text/javascript">

try //Internet Explorer

{

xmlDoc=new ActiveXObject("Microsoft.XMLDOM");//创建IE浏览器的XML文档对象

}

catch(e)

{

try //Firefox, Mozilla, Opera, etc.

{

xmlDoc=document.implementation.createDocument("","",null);//创建空的XML文档对象

}

catch(e) {alert(e.message)}

}

{

xmlDoc.async=false;//关闭异步加载，这样可确保在文档完整加载之前，解析器不会继续执行脚本

xmlDoc.load("/books.xml");//加载books.xml文件。注意：loadXML() 方法用于加载字符串（文本），而 load() 用于加载文件

document.write("xmlDoc is loaded, ready for use");//表明创建成功

}

catch(e) {alert(e.message)}//创建失败，给出信息提示

</script>

</body>

</html>

</span>

二，主要是对节点的各种操作了，主要就是一些属性和方法的使用，这里先看一下典型最常用的属性和方法：

XML DOM典型属性

XML DOM常见方法

一些典型的 DOM属性：

x.nodeName - x的名称

x.nodeValue - x的值

x.parentNode - x的父节点

x.childNodes - x的子节点

x.attributes - x的属性节点

- x.getElementsByTagName(name) -获取带有指定标签名称的所有元素
- x.appendChild(node) -向 x插入子节点
- x.removeChild(node) -从 x删除子节点

更多的详细请看，非常详细：。

1，首先看一下节点的访问：可以通过三种方法（和HTML区别很大）：

通过使用 getElementsByTagName()方法

通过循环（遍历）节点树

通过利用节点的关系在节点树中导航

由于XML的内容量要比HTML文件的量小的多，可以通过b,c两种方法，HTML也可以，但是效率是非常差的（一般不用）。下边看一个循环节点树的实例：

[javascript]

<span style="font-size:18px;"><html>

<head>

<script type="text/javascript" src="/example/xdom/loadxmldoc.js"></script>

</head>

<body>

<script type="text/javascript">

xmlDoc=loadXMLDoc("/example/xdom/books.xml");

x=xmlDoc.documentElement.childNodes;//获得第一个book元素的子节点

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

{

if (x[i].nodeType==1)//检查其节点类型是否为元素节点（节点类型和HTML DOM中一样）

{
//Process only element nodes (type 1)

document.write(x[i].nodeName);//输出元素节点

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

}

}

</script>

</body>

</html>

</span>

2，改变节点的的属性值可以通过nodeValue,setAttribute(),和HTML基本一样，比较简单。对于节点的删除，替换，创建，添加等，都是相似了，只要我们使用对应的方法或者属性即可完成，这里仅仅看了一个改变节点属性的例子：

[javascript]

<span style="font-size:18px;"><html>

<head>

<script type="text/javascript" src="/example/xdom/loadxmldoc.js">

</script>

</head>

<body>

<script type="text/javascript">

xmlDoc=loadXMLDoc("/example/xdom/books.xml");

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

y=x.getAttributeNode("category");

y.nodeValue="child";

document.write(y.nodeValue);

</script>

</body>

</html>

</span>

3，这里我单独出来谈一下节点的克隆，也就是复制节点，也就是将原有的节点进行复制，看下边这个例子：

[javascript]

<span style="font-size:18px;"><html>

<head>

<script type="text/javascript" src="/example/xdom/loadxmldoc.js">

</script>

</head>

<body>

<script type="text/javascript">

xmlDoc=loadXMLDoc("/example/xdom/books.xml");

x=xmlDoc.getElementsByTagName('book')[0];//得到为book的第一个节点

cloneNode=x.cloneNode(true);//克隆此节点

xmlDoc.documentElement.appendChild(cloneNode);//将克隆好的节点添加到xml文件中

//Output all titles

y=xmlDoc.getElementsByTagName("title");

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

{

document.write(y[i].childNodes[0].nodeValue);//循环显示title的节点

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

}

</script>

</body>

</html>

</span>

三，在视频中看到这样一个功能，感觉是对XML操作前非常必要的，也就是对于XML中的空行和换行的处理

：

Firefox，以及其他一些浏览器，会把空的空白或换行作为文本节点来处理，而Internet Explorer 不会这样。这就需要我们在操作XML时，先将其空文本去掉：

综上为XML DOM的简单理论学习，这里需要我们结合实例，来学习，多了解各种方法属性，结合HTML DOM一起学习。比较其中的同与异。当然这些都需要在用中不断发现，不断积累。

DOM是学习AJAX的非常重要的一部分，起到了异步更新网页的的主要操作功能。当然AJAX中的核心还得学习XMLHttpRequest对象，下篇将来学习XMLHttpRequest的具体使用法。这段时间AJAX的学习，对B/S的很多块内容都起到了补充的作用。本来吗，AJAX就是多种知识结合的一个新知识。继续深入学习中……