XML DOM 是 XML Document Object Model 的缩写,即 XML 文档对象模型。
XML DOM 定义访问和操作XML文档的标准方法。
DOM 将 XML 文档作为一个树形结构,而树叶被定义为节点。
如果你想使用XML,你就需要了解XML DOM。
现在开始学习XML DOM !
在W3Cschool 教程中,我们提供完整的 DOM 参考手册,其中包括所有的对象以及它们的属性和方法。
学习 50 个实例!使用我们的编辑器,你可以编辑源代码,然后单击测试按钮来查看结果。
XML DOM 定义了访问和处理 XML 文档的标准。
在继续学习之前,您应当对下列知识有基本的了解:
如果您想要首先学习这些项目,请在我们的首页访问这些教程。
DOM 是 W3C(World Wide Web Consortium)标准。
DOM 定义了访问诸如 XML 和 HTML 文档的标准:
"W3C 文档对象模型(DOM,全称 Document Object Model)是一个使程序和脚本有能力动态地访问和更新文档的内容、结构以及样式的平台和语言中立的接口。"
DOM 被分为 3 个不同的部分/级别:
DOM 定义了所有文档元素的对象和属性,以及访问它们的方法(接口)。
HTML DOM 定义了所有 HTML 元素的对象和属性,以及访问它们的方法(接口)。
如果您想要学习 HTML DOM,请在我们的首页访问 HTML DOM 教程。
XML DOM 是:
XML DOM 定义了所有 XML 元素的对象和属性,以及访问它们的方法(接口)。
换句话说:XML DOM 是用于获取、更改、添加或删除 XML 元素的标准。
在 DOM 中,XML 文档中的每个成分都是一个节点。
整个文档就是一个文档节点,每个XML标签是一个元素节点。
根据 DOM,XML 文档中的每个成分都是一个节点。
DOM 是这样规定的:
请看下面的 XML 文件(books.xml):
<?xml version="1.0" encoding="ISO-8859-1"?><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><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><book category="web" cover="paperback"><title lang="en">Learning XML</title><author>Erik T. Ray</author><year>2003</year><price>39.95</price></book></bookstore>
在上面的 XML 中,根节点是 <bookstore>。文档中的所有其他节点都被包含在 <bookstore> 中。
根节点 <bookstore> 有四个 <book> 节点。
第一个 <book> 节点有四个节点:<title>、<author>、<year> 和 <price>,其中每个节点都包含一个文本节点,"Everyday Italian"、"Giada De Laurentiis"、"2005" 和 "30.00"。
在 DOM 处理中一个普遍的错误是,认为元素节点包含文本。
不过,元素节点的文本是存储在文本节点中的。
在这个实例中:<year>2005</year>,元素节点 <year>,拥有一个值为 "2005" 的文本节点。
"2005" 不是 <year> 元素的值!
本节介绍了 XML DOM 节点的知识,在下一节内容中,你将学习 XML DOM 节点树。
XML DOM 把 XML 文档视为一棵节点树。
树中的所有节点彼此之间都有关系。
XML DOM 把 XML 文档视为一种树结构。这种树结构被称为节点树。
可通过这棵树访问所有节点。可以修改或删除它们的内容,也可以创建新的元素。
这颗节点树展示了节点的集合,以及它们之间的联系。这棵树从根节点开始,然后在树的最低层级向文本节点长出枝条:
上面的图片表示 XML 文件 books.xml。
节点树中的节点彼此之间都有层级关系。
父节点、子节点和同级节点用于描述这种关系。父节点拥有子节点,位于相同层级上的子节点称为同级节点(兄弟或姐妹)。
下面的图片展示出节点树的一个部分,以及节点间的关系:
因为 XML 数据是按照树的形式进行构造的,所以可以在不了解树的确切结构且不了解其中包含的数据类型的情况下,对其进行遍历。
您将在本教程稍后的章节学习更多有关遍历节点树的知识。
请看下面的 XML 片段:
<bookstore><book category="cooking"><title lang="en">Everyday Italian</title><author>Giada De Laurentiis</author><year>2005</year><price>30.00</price></book></bookstore>
在上面的 XML 中,<title> 元素是 <book> 元素的第一个子节点,而 <price> 元素是 <book> 元素的最后一个子节点。
此外,<book> 元素是 <title>、<author>、<year> 和 <price> 元素的父节点。
提示:在 XML 中共有12种节点类型,其中有5种最常见的基本节点类型,如下所示:
大多数浏览器都内建了供读取和操作 XML 的 XML 解析器。
解析器把 XML 转换为 JavaScript 可存取的对象(XML DOM)。
XML DOM 包含了遍历 XML 树,访问、插入及删除节点的方法(函数)。
然而,在访问和操作 XML 文档之前,它必须加载到 XML DOM 对象。
XML 解析器读取 XML,并把它转换为 XML DOM 对象,这样才可以使用 JavaScript 访问它。
大多数浏览器有一个内建的 XML 解析器。
下面的 JavaScript 片段加载一个 XML 文档("books.xml"):
代码解释:
下面的代码加载并解析一个 XML 字符串:
注意:Internet Explorer 使用 loadXML() 方法来解析 XML 字符串,而其他浏览器使用 DOMParser 对象。
出于安全原因,现代的浏览器不允许跨域访问。
这意味着,网页以及 XML 文件,它必须位于同一台服务器上尝试加载。
W3CSchool 上的实例中所有打开的 XML 文件都是位于 W3CSchool 域上的。
如果您想要在您的网页上使用上面的实例,您加载的 XML 文件必须位于您自己的服务器上。
加载 XML 文档中的代码可以存储在一个函数中。
为了使前一页中的代码易于维护(检查旧的浏览器),它应该写成一个函数:
function loadXMLDoc(dname){if (window.XMLHttpRequest){xhttp=new XMLHttpRequest();}else{xhttp=new ActiveXObject("Microsoft.XMLHTTP");}xhttp.open("GET",dname,false);xhttp.send();return xhttp.responseXML;}
上面的函数可以存储在 HTML 页面的 <head> 部分,并从页面中的脚本调用。
上面描述的函数,用于本教程中所有 XML 文档实例!
为了使上述代码更容易维护,以确保在所有页面中使用相同的代码,我们把函数存储在一个外部文件中。
文件名为 "loadxmldoc.js",且在 HTML 页面中的 head 部分被加载。然后,页面中的脚本调用 loadXMLDoc() 函数。
下面的实例使用 loadXMLDoc() 函数加载 books.xml:
如何从 XML 文件中获得数据,将在下一章中讲解。
为了使前一页中的代码易于维护(检查旧的浏览器),它应该写成一个函数:
function loadXMLString(txt) {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); }return xmlDoc;}
上面的函数可以存储在 HTML 页面的 <head> 部分,并从页面中的脚本调用。
上面描述的函数,用于本教程中所有 XML 字符串实例!
我们已经把 loadXMLString() 函数存储在名为 "loadxmlstring.js" 文件中。
属性和方法向 XML DOM 定义了编程接口。
DOM 把 XML 模拟为一系列节点对象。可通过 JavaScript 或其他编程语言来访问节点。在本教程中,我们使用 JavaScript。
对 DOM 的编程接口是通过一套标准的属性和方法来定义的。
属性经常按照"某事物是什么"的方式来使用(例如节点名是 "book")。
方法经常按照"对某事物做什么"的方式来使用(例如删除 "book" 节点)。
一些典型的 DOM 属性:
注释:在上面的列表中,x 是一个节点对象。
注释:在上面的列表中,x 是一个节点对象。
从 books.xml 中的 <title> 元素获取文本的 JavaScript 代码:
txt=xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue
在该语句执行后,txt 保存的值是 "Everyday Italian"。
解释:
通过 DOM,您能够访问 XML 文档中的每个节点。
DOM 访问节点的方法有三种,分别是:使用 getElementsByTagName() 方法、通过循环(遍历)节点树以及利用节点的关系在节点树中导航
下面的实例使用 XML 文件 books.xml。
函数 loadXMLDoc(),位于外部 JavaScript 中,用于加载 XML 文件。
使用节点列表中的索引号来访问节点
本例使用 getElementsByTagname() 方法来获取 "books.xml" 中的第三个 <title> 元素。
使用 length 属性来遍历节点
本例使用 length 属性来遍历 "books.xml" 中的所有 <title> 元素。
查看元素的节点类型
本例使用 nodeType 属性来获取 "books.xml" 中根元素的节点类型。
遍历元素节点
本例使用 nodeType 属性来处理 "books.xml" 中的元素节点。
使用节点的关系来遍历元素节点
本例使用 nodeType 属性和 nextSibling 属性来处理 "books.xml" 中的元素节点。
您可以通过三种方式来访问节点:
1. 通过使用 getElementsByTagName() 方法。
2. 通过循环(遍历)节点树。
3. 通过利用节点的关系在节点树中导航。
getElementsByTagName() 返回拥有指定标签名的所有元素。
下面的实例返回 x 元素下的所有 <title> 元素:
请注意,上面的实例仅返回 x 节点下的 <title> 元素。如需返回 XML 文档中的所有 <title> 元素,请使用:
在这里,xmlDoc 就是文档本身(文档节点)。
getElementsByTagName() 方法返回节点列表。节点列表是节点的数组。
下面的代码使用 loadXMLDoc() 把 "books.xml" 载入 xmlDoc 中,然后在变量 x 中存储 <title> 节点的一个列表:
可通过索引号访问 x 中的 <title> 元素。如需访问第三个 <title>,您可以编写:
注意:该索引从 0 开始。
在本教程后面的章节中,您将学习更多有关节点列表(Node List)的知识。
length 属性定义节点列表的长度(即节点的数量)。
您可以通过使用 length 属性来遍历节点列表:
实例解释:
XML 文档的 documentElement 属性石根节点。
节点的 nodeName 属性是节点的名称。
节点的 nodeType 属性是节点的类型。
您将在本教程的下一章中学习更多有关节点属性的知识。
下面的代码遍历根节点的子节点,同时也是元素节点:
实例解释:
下面的代码使用节点关系导航节点树:
DOM 节点信息是指在 XML、DOM 中,每个节点都是一个对象。
nodeName、nodeValue 和 nodeType 属性包含有关节点的信息。
下面的实例使用 XML 文件 books.xml。
函数 loadXMLDoc(),位于外部 JavaScript 中,用于加载 XML 文件。
获取元素节点的节点名称
本例使用 nodeName 属性来获取 "books.xml" 中根元素的节点名称。
从文本节点获取文本
本例使用 nodeValue 属性来获取 "books.xml" 中第一个 <title> 元素的文本。
更改文本节点中的文本
本例使用 nodeValue 属性来更改 "books.xml" 中第一个 <title> 元素的文本。
获取元素节点的节点名称和类型
本例使用 nodeName 和 nodeType 属性来获取 "books.xml" 中根元素的节点名称和类型。
在 XML DOM 中,每个节点都是一个对象。
对象拥有方法和属性,并可通过 JavaScript 进行访问和操作。
三个重要的节点属性是:
nodeName 属性规定节点的名称。
nodeValue 属性规定节点的值。
下面的代码检索第一个 <title> 元素的文本节点的值:
结果:txt = "Everyday Italian"
实例解释:
下面的代码更改第一个 <title> 元素的文本节点的值:
实例解释:
nodeType 属性规定节点的类型。
nodeType 是只读的。
最重要的节点类型是:
节点类型 | NodeType |
---|---|
元素 | 1 |
属性 | 2 |
文本 | 3 |
注释 | 8 |
文档 | 9 |
在下一节内容中,我们将为你介绍 XML DOM 的节点;列表和命名节点图。
节点列表由 getElementsByTagName() 方法和 childNodes 属性返回。
下面的实例使用 XML 文件 books.xml。
函数 loadXMLDoc(),位于外部 JavaScript 中,用于加载 XML 文件。
从第一个 <title> 元素获取文本
本例使用 getElementsByTagName() 方法从 "books.xml" 中的第一个 <title> 元素获取文本。
使用 length 属性遍历节点
本例使用节点列表和 length 属性来遍历 "books.xml" 中所有的 <title> 元素。
获取元素的属性
本例使用属性列表从 "books.xml" 中的第一个 <book> 元素获取属性。
当使用诸如 childNodes 或 getElementsByTagName() 的属性或方法是,会返回节点列表对象。
节点列表对象表示节点的列表,与 XML 中的顺序相同。
节点列表中的节点使用从 0 开始的索引号进行访问。
下面的图像表示 "books.xml" 中 <title> 元素的节点列表:
下面的代码片段通过使用 loadXMLDoc() 把 "books.xml" 载入 xmlDoc 中,并返回 "books.xml" 中 title 元素的节点列表:
xmlDoc=loadXMLDoc("books.xml");x=xmlDoc.getElementsByTagName("title");
在上面的语句执行之后,x 是节点列表对象。
下面的代码片段从节点列表(x)中的第一个 <title> 元素返回文本:
在上面的语句执行之后,txt = "Everyday Italian"。
节点列表对象会保持自身的更新。如果删除或添加了元素,列表会自动更新。
节点列表的 length 属性是列表中节点的数量。
下面的代码片段通过使用 loadXMLDoc() 把 "books.xml" 载入 xmlDoc 中,并返回 "books.xml" 中 <title> 元素的数量:
xmlDoc=loadXMLDoc("books.xml");x=xmlDoc.getElementsByTagName('title').length;
在上面的语句执行之后,x = 4。
节点列表的长度可用于遍历列表中所有的元素。
下面的代码片段使用 length 属性来遍历 <title> 元素的列表:
输出:
实例解释:
元素节点的 attributes 属性返回属性节点的列表。
这被称为命名节点图(Named Node Map),除了方法和属性上的一些差别以外,它与节点列表相似。
属性列表会保持自身的更新。如果删除或添加属性,这个列表会自动更新。
下面的代码片段通过使用 loadXMLDoc() 把 "books.xml" 载入 xmlDoc 中,并返回 "books.xml" 中第一个 <book> 元素的属性节点列表:
xmlDoc=loadXMLDoc("books.xml");x=xmlDoc.getElementsByTagName('book')[0].attributes;
在上面的代码执行之后,x.length 等于属性的数量,可使用 x.getNamedItem() 返回属性节点。
下面的代码片段显示一个 book 的 "category" 属性的值,以及其属性的数量:
输出:
实例解释:
您经常需要循环 XML 文档,比如,当你需要提取每个元素的值时,这个过程叫作“遍历节点树”。
遍历(Traverse)意味着在节点树中进行循环或移动。
通常您想要循环 XML 文档,比如:当您需要提取每个元素的值时。
这叫做"遍历节点树"。
下面的实例遍历 <book> 的所有子节点,并显示他们的名称和值:
输出:
实例解释:
以上就是关于 DOM 遍历节点树的全部内容了,通过遍历操作,你可以获得子节点的名称和值!
所有现代的浏览器都支持 W3C DOM 规范。
然而,浏览器之间是有差异的。一个重要的差异是:
XML 经常在节点之间包含换行或空白字符。这是在使用简单的编辑器(比如记事本)编辑文档时经常出现的情况。
下面的例子(由记事本编辑)在每行之间包含 CR/LF(换行),在每个子节点之前包含两个空格:
<book><title>Everyday Italian</title><author>Giada De Laurentiis</author><year>2005</year><price>30.00</price></book>
Internet Explorer 将不会把空的空白或换行作为文本节点,而其他浏览器会。
下面的代码片段显示(books.xml 的)根元素拥有多少个子节点:
实例解释:
可通过使用节点间的关系对节点进行导航。
通过节点间的关系访问节点树中的节点,通常称为导航节点("navigating nodes")。
在 XML DOM 中,节点的关系被定义为节点的属性:
下面的图像展示了 books.xml 中节点树的一个部分,并说明了节点之间的关系:
所有的节点都仅有一个父节点。下面的代码导航到 <book> 的父节点:
实例解释:
Firefox 以及其他一些浏览器,把空的空白或换行当作文本节点,而 Internet Explorer 不会这么做。
这会在使用以下属性:firstChild、lastChild、nextSibling、previousSibling 时产生一个问题。
为了避免导航到空的文本节点(元素节点之间的空格和换行符),我们使用一个函数来检查节点类型:
function get_nextSibling(n){y=n.nextSibling;while (y.nodeType!=1){y=y.nextSibling;}return y;}
上面的函数允许您使用 get_nextSibling(node)来代替 node.nextSibling 属性。
代码解释:
元素节点的类型是 1。如果同级节点不是元素节点,就移动到下一个节点,直到找到元素节点为止。通过这个办法,在 Internet Explorer 和 Firefox 中,都可以得到相同的结果。
下面的代码显示第一个 <book> 的第一个元素:
输出:
实例解释:
lastChild()
本例使用 lastChild() 方法和一个自定义函数来获取节点的最后一个子节点
nextSibling()
本例使用 nextSibling() 方法和一个自定义函数来获取节点的下一个同级节点
previousSibling()
本例使用 previousSibling() 方法和一个自定义函数来获取节点的上一个同级节点
nodeValue 属性用于获取节点的文本值。
getAttribute() 方法返回属性的值。
在 DOM 中,每种成分都是节点。元素节点没有文本值。
元素节点的文本存储在子节点中。该节点称为文本节点。
获取元素文本的方法,就是获取这个子节点(文本节点)的值。
getElementsByTagName() 方法返回包含拥有指定标签名的所有元素的节点列表,其中的元素的顺序是它们在源文档中出现的顺序。
下面的代码通过使用 loadXMLDoc() 把 "books.xml" 载入 xmlDoc 中并检索第一个 <title> 元素:
xmlDoc=loadXMLDoc("books.xml");x=xmlDoc.getElementsByTagName("title")[0];
childNodes 属性返回子节点的列表。<title> 元素只有一个子节点。它是一个文本节点。
下面的代码检索 <title> 元素的文本节点:
x=xmlDoc.getElementsByTagName("title")[0];y=x.childNodes[0];
nodeValue 属性返回文本节点的文本值:
结果:txt = "Everyday Italian"
遍历所有 <title> 元素: 尝试一下
在 DOM 中,属性也是节点。与元素节点不同,属性节点拥有文本值。
获取属性的值的方法,就是获取它的文本值。
可以通过使用 getAttribute() 方法或属性节点的 nodeValue 属性来完成这个任务。
getAttribute() 方法返回属性值。
下面的代码检索第一个 <title> 元素的 "lang" 属性的文本值:
结果:txt = "en"
实例解释:
遍历所有的 <book> 元素,并获取它们的 "category" 属性: 尝试一下
getAttributeNode() 方法返回属性节点。
下面代码检索第一个 <title> 元素的 "lang" 属性的文本值:
结果:Result: txt = "en"
实例解释:
遍历所有的 <book> 元素并获取它们的 "category" 属性: 尝试一下
以上就是 DOM 获取节点值的方法,在下一节内容中,继续了解如何改变节点值。nodeValue 属性用于改变节点值。
setAttribute() 方法用于改变属性值。
下面的实例使用 XML 文件 books.xml。
函数 loadXMLDoc(),位于外部 JavaScript 中,用于加载 XML 文件。
改变元素的文本节点
本例使用 nodeValue 属性来改变 "books.xml" 中第一个 <title> 元素的文本节点。
通过使用 setAttribute 来改变属性值
本例使用 setAttribute() 方法来改变第一个 <book> 的 "category" 属性的值。
通过使用 nodeValue 来改变属性值
本例使用 nodeValue 属性来改变第一个 <book> 的 "category" 属性的值。
在 DOM 中,每种成分都是节点。元素节点没有文本值。
元素节点的文本存储在子节点中。该节点称为文本节点。
改变元素文本的方法,就是改变这个子节点(文本节点)的值。
nodeValue 属性可用于改变文本节点的值。
下面的代码片段改变了第一个 <title> 元素的文本节点值:
实例解释:
遍历并更改所有 <title> 元素的文本节点: 尝试一下
在 DOM 中,属性也是节点。与元素节点不同,属性节点拥有文本值。I
改变属性的值的方法,就是改变它的文本值。
可以通过使用 setAttribute() 方法或属性节点的 nodeValue 属性来完成这个任务。
setAttribute() 方法改变已有属性的值,或创建新属性。
下面的代码改变 <book> 元素的 category 属性:
实例解释:
遍历所有的 <title> 元素并添加一个新属性: 尝试一下
注意:如果属性不存在,则创建一个新属性(拥有指定的名称和值)。
nodeValue 属性可用于更改属性节点的值:
实例解释:
removeChild() 方法删除指定节点。
removeAttribute() 方法删除指定属性。
下面的实例使用 XML 文件 books.xml。
函数 loadXMLDoc(),位于外部 JavaScript 中,用于加载 XML 文件。
删除元素节点
本例使用 removeChild() 来删除第一个 <book> 元素。
删除当前元素节点
本例使用 parentNode 和 removeChild() 来删除当前的 <book> 元素。
删除文本节点
本例使用 removeChild() 来删除第一个 <title> 元素的文本节点。
清空文本节点的文本
本例使用 nodeValue() 属性来清空第一个 <title> 元素的文本节点。
根据名称删除属性
本例使用 removeAttribute() 从第一个 <book> 元素中删除 "category" 属性。
根据对象删除属性
本例使用 removeAttributeNode() 从所有 <book> 元素中删除所有属性。
removeChild() 方法删除指定的节点。
当一个节点被删除时,其所有子节点也会被删除。
下面的代码片段将从载入的 xml 中删除第一个 <book> 元素:
实例解释:
removeChild() 方法是唯一可以删除指定节点的方法。
当您已导航到需要删除的节点时,就可以通过使用 parentNode 属性和 removeChild() 方法来删除此节点:
实例解释:
removeChild() 方法可用于删除文本节点:
实例解释:
不太常用 removeChild() 从节点删除文本。可以使用 nodeValue 属性代替它。请看下一段。
nodeValue 属性可用于改变或清空文本节点的值:
实例解释:
遍历并更改所有 <title> 元素的文本节点: 尝试一下
removeAttribute(name) 方法用于根据名称删除属性节点。
实例:removeAttribute('category')
下面的代码片段删除第一个 <book> 元素中的 "category" 属性:
实例解释:
遍历并删除所有 <book> 元素的 "category" 属性: 尝试一下
removeAttributeNode(node) 方法通过使用 node 对象作为参数,来删除属性节点。
实例: removeAttributeNode(x)
下面的代码片段删除所有 <book> 元素的所有属性:
实例解释:
replaceChild() 方法替换指定节点。
nodeValue 属性替换文本节点中的文本。
下面的实例使用 XML 文件 books.xml。
函数 loadXMLDoc(),位于外部 JavaScript 中,用于加载 XML 文件。
替换元素节点
本例使用 replaceChild() 来替换第一个 <book> 节点。
替换文本节点中的数据
本例使用 nodeValue 属性来替换文本节点中的数据。
replaceChild() 方法用于替换节点。
下面的代码片段替换第一个 <book> 元素:
实例解释:
replaceData() 方法用于替换文本节点中的数据。
replaceData() 方法有三个参数:
实例解释:
用 nodeValue 属性来替换文本节点中数据会更加容易。
下面的代码片段将用 "Easy Italian" 替换第一个 <title> 元素中的文本节点值:
实例解释:
您可以在改变节点这一章中阅读更多有关更改节点值的内容。
当节点替换完成之后,原来的文本和标记替换成为新的文本和标记。
下面的实例使用 XML 文件 books.xml。
函数 loadXMLDoc(),位于外部 JavaScript 中,用于加载 XML 文件。
创建元素节点
本例使用 createElement() 来创建一个新的元素节点,并使用 appendChild() 把它添加到一个节点中。
使用 createAttribute 创建属性节点
本例使用 createAttribute() 来创建一个新的属性节点,并使用 setAttributeNode() 把它插入一个元素中。
使用 setAttribute 创建属性节点
本例使用 setAttribute() 为一个元素创建一个新的属性。
创建文本节点
本例使用 createTextNode() 来创建一个新的文本节点,并使用 appendChild() 把它添加到一个元素中。
创建 CDATA section 节点
本例使用 createCDATAsection() 来创建一个 CDATA section 节点,并使用 appendChild() 把它添加到一个元素中。
创建注释节点
本例使用 createComment() 来创建一个注释节点,并使用 appendChild() 把它添加到一个元素中。
createElement() 方法创建一个新的元素节点:
实例解释:
遍历并向所有 <book> 元素添加一个元素: 尝试一下
createAttribute() 用于创建一个新的属性节点:
实例解释:
遍历所有的 <title> 元素,并添加一个新的属性节点: 尝试一下
注意:如果该属性已存在,则被新属性替代。
由于 setAttribute() 方法可以在属性不存在的情况下创建新的属性,我们可以使用这个方法来创建一个新的属性。
实例解释:
遍历所有的 <title> 元素并添加一个新属性: 尝试一下
createTextNode() 方法创建一个新的文本节点:
实例解释:
向所有的 <book> 元素添加一个带有文本节点的元素节点: 尝试一下
createCDATASection() 方法创建一个新的 CDATA section 节点。
实例解释:
遍历并向所有 <book> 元素添加一个 CDATA section: 尝试一下
createComment() 方法创建一个新的注释节点。
实例解释:
循环并向所有 <book> 元素添加一个注释节点: 尝试一下
当你创建新的节点后,有几个方法可用于将这些节点插入到树中,我们将在下一节内容中描述如何插入节点。
下面的实例使用 XML 文件 books.xml。
函数 loadXMLDoc(),位于外部 JavaScript 中,用于加载 XML 文件。
在最后一个子节点之后添加一个节点
本例使用 appendChild() 方法向一个已有的节点添加一个子节点。
在指定的子节点之前添加一个节点
本例使用 insertBefore() 方法在一个指定的子节点之前插入一个节点。
添加一个新属性
本例使用 setAttribute() 方法添加一个新的属性。
向文本节点添加数据
本例使用 insertData() 把数据插入一个已有的文本节点中。
appendChild() 方法向一个已有的节点添加一个子节点。
新节点会添加(追加)到任何已有的子节点之后。
注意:如果节点的位置很重要,请使用 insertBefore() 方法。
下面的代码片段创建一个元素(<edition>),并把它添加到第一个 <book> 元素的最后一个子节点后面:
实例解释:
遍历并向所有 <book> 元素追加一个元素:尝试一下
insertBefore()方法用于在指定的子节点之前插入节点。
在被添加的节点的位置很重要时,此方法很有用:
实例解释:
如果 insertBefore() 的第二个参数是 null,新节点将被添加到最后一个已有的子节点之后。
x.insertBefore(newNode,null) 和 x.appendChild(newNode) 都可以向 x 追加一个新的子节点。
addAtribute() 这个方法是不存在的。
如果属性不存在,则 setAttribute() 可创建一个新的属性:
实例解释:
注意:如果属性已存在,setAttribute() 方法将覆盖已有的值。
insertData() 方法将数据插入已有的文本节点中。
insertData() 方法有两个参数:
下面的代码片段将把 "Easy" 添加到已加载的 XML 的第一个 <title> 元素的文本节点:
下面的实例使用 XML 文件 books.xml。
函数 loadXMLDoc(),位于外部 JavaScript 中,用于加载 XML 文件。
复制一个节点,并把它追加到已有的节点
本例使用 cloneNode() 来复制一个节点,并把它追加到 XML 文档的根节点。
cloneNode() 方法创建指定节点的副本。
cloneNode() 方法有一个参数(true 或 false)。该参数指示被克隆的节点是否包括原节点的所有属性和子节点。
下面的代码片段复制第一个 <book> 节点,并把它追加到文档的根节点:
输出:
实例解释:
通过 XMLHttpRequest 对象,您可以在不重新加载整个页面的情况下更新网页中的某个部分。
XMLHttpRequest 对象用于幕后与服务器交换数据。
XMLHttpRequest 对象是开发者的梦想,因为您可以:
所有现代的浏览器(IE7+、Firefox、Chrome、Safari 和 Opera)都有一个内建的 XMLHttpRequest 对象。
创建 XMLHttpRequest 对象的语法
xmlhttp=new XMLHttpRequest();
旧版本的 Internet Explorer(IE5 和 IE6)使用 ActiveX 对象:
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
为了处理所有现代的浏览器,包括 IE5 和 IE6,请检查浏览器是否支持 XMLHttpRequest 对象。如果支持,则创建一个 XMLHttpRequest 对象,如果不支持,则创建一个 ActiveX 对象:
为了发送一个请求到服务器,我们使用 XMLHttpRequest 对象的 open() 和 send() 方法:
方法 | 描述 |
---|---|
open(method,url,async) | 规定请求的类型,URL,请求是否应该进行异步处理。 method:请求的类型:GET 或 POST url:文件在服务器上的位置 async:true(异步)或 false(同步) |
send(string) | 发送请求到服务器。 string:仅用于 POST 请求 |
GET 比 POST 简单并且快速,可用于大多数情况下。
然而,下面的情况下请始终使用 POST 请求:
open() 方法的 url 参数,是一个在服务器上的文件的地址:
xmlhttp.open("GET","/statics/demosource/xmlhttp_info.txt",true);
该文件可以是任何类型的文件(如 .txt 和 .xml),或服务器脚本文件(如.html 和 .php,可在发送回响应之前在服务器上执行动作)。
如需异步发送请求,open() 方法的 async 参数必需设置为 true:
xmlhttp.open("GET","/statics/demosource/xmlhttp_info.txt",true);
发送异步请求对于 Web 开发人员是一个巨大的进步。在服务器上执行的许多任务非常费时。
通过异步发送,JavaScript 不需要等待服务器的响应,但可以替换为:
当使用 async=true 时,在 onreadystatechange 事件中响应准备时规定一个要执行的函数:
如需使用 async=false,请更改 open() 方法的第三个参数为 false:
xmlhttp.open("GET","/statics/demosource/xmlhttp_info.txt",false);
不推荐使用 async=false,但如果处理几个小的请求还是可以的。
请记住,JavaScript 在服务器响应准备之前不会继续执行。如果服务器正忙或缓慢,应用程序将挂起或停止。
注意:当您使用 async=false 时,不要编写 onreadystatechange 函数 - 只需要把代码放置在 send() 语句之后即可:
如需从服务器获取响应,请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。
属性 | 描述 |
---|---|
responseText | 获取响应数据作为字符串 |
responseXML | 获取响应数据作为 XML 数据 |
如果来自服务器的响应不是 XML,请使用 responseText 属性。
responseText 属性以字符串形式返回响应,您可以相应地使用它:
如果来自服务器的响应不是 XML,且您想要把它解析为 XML 对象,请使用 responseXML 属性:
请求文件 cd_catalog.xml 并解析响应:
当请求被发送到服务器,我们要根据响应执行某些动作。
onreadystatechange 事件在每次 readyState 变化时被触发。
readyState 属性持有 XMLHttpRequest 的状态。
XMLHttpRequest 对象的三个重要的属性:
属性 | 描述 |
---|---|
onreadystatechange | 存储函数(或函数的名称)在每次 readyState 属性变化时被自动调用 |
readyState | 存放了 XMLHttpRequest 的状态。从 0 到 4 变化: 0:请求未初始化 1:服务器建立连接 2:收到的请求 3:处理请求 4:请求完成和响应准备就绪 |
status | 200:"OK" 404:找不到页面 |
在 onreadystatechange 事件中,我们规定当服务器的响应准备处理时会发生什么。
当 readyState 是 4 或状态是 200 时,响应准备:
注意:onreadystatechange 事件在每次 readyState 发生变化时被触发,总共触发了四次。
通过 getAllResponseHeaders() 检索头信息
检索资源(文件)的头信息。
通过 getResponseHeader() 检索指定头信息
检索资源(文件)的指定头信息。
检索 ASP 文件的内容
当用户在输入字段键入字符时,网页如何与 Web 服务器进行通信。
从数据库中检索内容
网页如何通过 XMLHttpRequest 对象从数据库中提取信息。
检索 XML 文件的内容
创建一个 XMLHttpRequest 从 XML 文件中检索数据并把数据显示在一个 HTML 表格中。
DOM 是一个代表节点对象层次的文档。
XML 文档对象模型(DOM)具有多种节点类型。
下面的实例使用 XML 文件 books.xml。
函数 loadXMLDoc(),位于外部 JavaScript 中,用于加载 XML 文件。
下面的表格列举了不同的 W3C 节点类型,每个节点类型中可能会包含子类:
节点类型 | 描述 | 子类 |
---|---|---|
Document | 代表整个文档(DOM 树的根节点) | Element (max. one), ProcessingInstruction, Comment, DocumentType |
DocumentFragment | 代表"轻量级"的 Document 对象,它可以保留文档中的一部分 | Element, ProcessingInstruction, Comment, Text, CDATASection, Entity参考手册 |
DocumentType | 为文档中定义的实体提供了一个接口 | None |
ProcessingInstruction | 代表一个处理指令 | None |
EntityReference | 代表一个实体引用 | Element, ProcessingInstruction, Comment, Text, CDATASection, EntityReference |
Element | 表示一个元素 | Element, Text, Comment, ProcessingInstruction, CDATASection, EntityReference |
Attr | 代表一个属性 | Text, EntityReference |
Text | 代表元素或属性的文本内容 | None |
CDATASection | 代表文档中的 CDATA 区段(文本不会被解析器解析) | None |
Comment | 代表一个注释 | None |
Entity | 代表一个实体 | Element, ProcessingInstruction, Comment, Text, CDATASection, EntityReference |
Notation | 定义一个在 DTD 中声明的符号 | None |
下面的表格列举了每个节点类型(nodetype)所返回的节点名称(nodeName)和节点值(nodeValue):
节点类型 | 返回的节点名称 | 返回的节点值 |
---|---|---|
Document | #document | null |
DocumentFragment | #document fragment | null |
DocumentType | 文档类型名称 | null |
Entity参考手册 | 实体引用名称 | null |
Element | 元素名称 | null |
Attr | 属性名称 | 属性值 |
ProcessingInstruction | 目标 | 节点的内容 |
Comment | #comment | 注释文本 |
Text | #text | 节点的内容 |
CDATASection | #cdata-section | 节点的内容 |
Entity | 实体名称 | null |
Notation | 符号名称 | null |
节点类型 | 命名常量 |
---|---|
1 | ELEMENT_NODE |
2 | ATTRIBUTE_NODE |
3 | TEXT_NODE |
4 | CDATA_SECTION_NODE |
5 | ENTITY_REFERENCE_NODE |
6 | ENTITY_NODE |
7 | PROCESSING_INSTRUCTION_NODE |
8 | COMMENT_NODE |
9 | DOCUMENT_NODE |
10 | DOCUMENT_TYPE_NODE |
11 | DOCUMENT_FRAGMENT_NODE |
12 | NOTATION_NODE |
以上就是本节介绍的 XML DOM 节点类型的全部内容了。
本节讲解 XML DOM Node 对象,它可以用于表示文档树中的单独的节点。
Node 对象代表文档树中的一个单独的节点。
这里的节点可以是:元素节点、属性节点、文本节点以及所有在 节点类型这章中所提到的所有其他的节点类型。
请注意,尽管所有的对象都继承了用以处理父节点和子节点的 Node 属性 / 方法,但是并不是所有的对象都可以包含父节点或子节点。举个例子来说,Text 节点中可能不包含子节点,所以把子节点添加到文本节点中可能会导致一个 DOM 错误。
属性 | 描述 |
---|---|
baseURI | 返回节点的绝对基准 URI。 |
childNodes | 返回节点的子节点的节点列表。 |
firstChild | 返回节点的第一个子节点。 |
lastChild | 返回节点的最后一个子节点。 |
localName | 返回节点名称的本地部分。 |
namespaceURI | 返回节点的命名空间 URI。 |
nextSibling | 返回元素之后紧接的节点。 |
nodeName | 返回节点的名称,根据其类型。 |
nodeType | 返回节点的类型。 |
nodeValue | 设置或返回节点的值,根据其类型。 |
ownerDocument | 返回节点的根元素(document 对象)。 |
parentNode | 返回节点的父节点。 |
prefix | 设置或返回节点的命名空间前缀。 |
previousSibling | 返回元素之前紧接的节点。 |
textContent | 设置或返回节点及其后代的文本内容。 |
方法 | 描述 |
---|---|
appendChild() | 把新的子节点添加到节点的子节点列表末尾。 |
cloneNode() | 克隆节点。 |
compareDocumentPosition() | 比较两个节点的文档位置。 |
getFeature(feature,version) | 返回 DOM 对象,此对象可执行带有指定特性和版本的专门的 API。 |
getUserData(key) | 返回与节点上键关联的对象。此对象必须首先通过使用相同的键调用 setUserData 来设置到此节点。 |
hasAttributes() | 如果节点拥有属性,则返回 ture,否则返回 false。 |
hasChildNodes() | 如果节点拥有子节点,则返回 true,否则返回 false。 |
insertBefore() | 在已有的子节点之前插入一个新的子节点。 |
isDefaultNamespace(URI) | 返回指定的 namespaceURI 是否默认。 |
isEqualNode() | 检查两个节点是否相等。 |
isSameNode() | 检查两个节点是否为同一节点。 |
isSupported(feature,version) | 返回指定的特性是否在此节点上得到支持。 |
lookupNamespaceURI() | 返回匹配指定前缀的命名空间 URI。 |
lookupPrefix() | 返回匹配指定命名空间 URI 的前缀。 |
normalize() | 把节点(包括属性)下的所有文本节点放置到一个"标准"的格式中,其中只有结构(比如元素、注释、处理指令、CDATA 区段以及实体引用)来分隔 Text 节点,例如,既没有相邻的 Text 节点,也没有空的 Text 节点。 |
removeChild() | 删除子节点。 |
replaceChild() | 替换子节点。 |
setUserData(key,data,handler) | 把对象关联到节点上的键。 |
NodeList 对象代表一个有序的节点列表。
在 NodeList 对象中有一个 length 属性以及一个 item() 方法。
节点列表中的节点可以通过其对应的索引数字(从 0 开始计数)进行访问。
节点列表可保持其自身的更新。如果节点列表或 XML 文档中的某个元素被删除或添加,列表也会被自动更新。
注意:在一个节点列表中,节点被返回的顺序与它们在 XML 文档中被规定的顺序相同。
属性 | 描述 |
---|---|
length | 返回节点列表中的节点数量。 |
方法 | 描述 |
---|---|
item() | 返回节点列表中指定索引号的节点。 |
NamedNodeMap 对象代表一个节点的无序列表。
本节介绍了该 NamedNodeMap 对象的属性与方法。
NamedNodeMap 中的节点可以通过它们的名称进行访问。
NamedNodeMap 将会自我更新。如果在节点列表或 XML 文档中删除或添加一个元素,那么该列表将会自动更新。
注意:在命名节点图中,节点不会以任何特定的顺序返回。
属性 | 描述 |
---|---|
length | 返回列表中节点的数量。 |
方法 | 描述 |
---|---|
getNamedItem() | 返回指定的节点(通过名称)。 |
getNamedItemNS() | 返回指定的节点(通过名称和命名空间)。 |
item() | 返回指定索引号的节点。 |
removeNamedItem() | 删除指定的节点(通过名称)。 |
removeNamedItemNS() | 删除指定的节点(通过名称和命名空间)。 |
setNamedItem() | 设置指定的节点(通过名称)。 |
setNamedItemNS() | 设置指定的节点(通过名称和命名空间)。 |
Document 对象代表整个 XML 文档。
通过 Document 对象,你几乎可以操作任何元素标签,从而得到你想要的任何结果。
Document 对象是文档树的根,并为我们提供对文档数据的最初(或最顶层)的访问入口。
由于元素节点、文本节点、注释、处理指令等均无法存在于文档之外,Document 对象也提供了创建这些对象的方法。Node 对象提供了一个 ownerDocument 属性,此属性可把它们与在其中创建它们的 Document 关联起来。
属性 | 描述 |
---|---|
async | 规定 XML 文件的下载是否应当被异步处理。 |
childNodes | 返回文档的子节点的节点列表。 |
doctype | 返回与文档相关的文档类型声明(DTD,全称 Document Type Declaration)。 |
documentElement | 返回文档的根节点。 |
documentURI | 设置或返回文档的位置。 |
domConfig | 返回 normalizeDocument() 被调用时所使用的配置。 |
firstChild | 返回文档的第一个子节点。 |
implementation | 返回处理该文档的 DOMImplementation 对象。 |
inputEncoding | 返回用于文档的编码方式(在解析时)。 |
lastChild | 返回文档的最后一个子节点。 |
nodeName | 返回节点的名称(根据节点的类型)。 |
nodeType | 返回节点的节点类型。 |
nodeValue | 设置或返回节点的值(根据节点的类型)。 |
strictErrorChecking | 设置或返回是否强制进行错误检查。 |
xmlEncoding | 返回文档的 XML 编码。 |
xmlStandalone | 设置或返回文档是否为 standalone。 |
xmlVersion | 设置或返回文档的 XML 版本。 |
方法 | 描述 |
---|---|
adoptNode(sourcenode) | 从另一个文档向本文档选定一个节点,然后返回被选节点。 |
createAttribute(name) | 创建带有指定名称的属性节点,并返回新的 Attr 对象。 |
createAttributeNS(uri,name) | 创建带有指定名称和命名空间的属性节点,并返回新的 Attr 对象。 |
createCDATASection() | 创建 CDATA 区段节点。 |
createComment() | 创建注释节点。 |
createDocumentFragment() | 创建空的 DocumentFragment 对象,并返回此对象。 |
createElement() | 创建元素节点。 |
createElementNS() | 创建带有指定命名空间的元素节点。 |
createEntityReference(name) | 创建 EntityReference 对象,并返回此对象。 |
createProcessingInstruction(target,data) | 创建一个 ProcessingInstruction 对象,并返回此对象。 |
createTextNode() | 创建文本节点。 |
getElementById(id) | 返回带有指定值的 ID 属性的元素。如果不存在这样的元素,则返回 null。 |
getElementsByTagName() | 返回带有指定名称的所有元素的 NodeList。 |
getElementsByTagNameNS() | 返回带有指定名称和命名空间的所有元素的 NodeList。 |
importNode(nodetoimport,deep) | 从另一个文档向本文档选定一个节点。该方法创建源节点的一个新的副本。如果 deep 参数设置为 true,它将导入指定节点的所有子节点。 如果设置为 false,它将只导入节点本身。该方法返回被导入的节点。 |
normalizeDocument() | |
renameNode() | 重命名元素或属性节点。 |
DocumentImplementation 对象提供了不依赖于任何 document 的方法。
DOMImplementation 对象执行的操作是独立于文档对象模型的任何特定实例。
方法 | 描述 |
---|---|
createDocument(nsURI, name, doctype) | 创建一个新的指定文档类型的 DOM Document 对象。 |
createDocumentType(name, pubId, systemId) | 创建一个空的 DocumentType 节点。 |
getFeature(feature, version) | 返回一个对象,此对象可执行带有指定特性和版本的 API。 |
hasFeature(feature, version) | 检查 DOM implementation 是否实现指定的特性和版本。 |
每个文档都包含一个 DOCTYPE 属性,该属性值可以是一个空值或是一个 DocumentType 对象。
DocumentType 对象提供了一个接口,用于定义 XML 文档的实体。
属性 | 描述 |
---|---|
entities | 返回包含有在 DTD 中所声明的实体的 NamedNodeMap。 |
internalSubset | 以字符串形式返回内部 DTD。 |
name | 返回 DTD 的名称。 |
notations | 返回包含 DTD 声明的符号的 NamedNodeMap。 |
systemId | 返回外部 DTD 的系统标识符。 |
XML DOM ProcessingInstruction 对象是一种处理指令,它的目的是为了给处理页面的程序(例如 XML 解析器)提供额外的信息。
ProcessingInstruction 对象代表一个处理指令。
处理指令用于维护 XML 文档的文本中特定处理器的信息。
属性 | 描述 |
---|---|
data | 设置或返回处理指令的内容。 |
target | 返回处理指令的目标。 |
Element 对象代表 XML 文档中的一个元素。元素可以包含属性、其他元素或文本。如果一个元素包含文本,则在文本节点中表示该文本。
重要事项:文本永远存储在文本节点中。在 DOM 处理过程中的一个常见的错误是,导航到元素节点,并认为此节点含有文本。不过,即使最简单的元素节点之下也拥有文本节点。举例,在 <year>2005</year> 中,有一个元素节点(year),同时此节点之下存在一个文本节点,其中含有文本(2005)。
由于 Element 对象也是一种节点,因此它可继承 Node 对象的属性和方法。
属性 | 描述 |
---|---|
attributes | 返回元素的属性的 NamedNodeMap。 |
baseURI | 返回元素的绝对基准 URI。 |
childNodes | 返回元素的子节点的 NodeList。 |
firstChild | 返回元素的第一个子节点。 |
lastChild | 返回元素的最后一个子节点。 |
localName | 返回元素名称的本地部分。 |
namespaceURI | 返回元素的命名空间 URI。 |
nextSibling | 返回元素之后紧接的节点。 |
nodeName | 返回节点的名称,根据其类型。 |
nodeType | 返回节点的类型。 |
ownerDocument | 返回元素所属的根元素 (document 对象)。 |
parentNode | 返回元素的父节点。 |
prefix | 设置或返回元素的命名空间前缀。 |
previousSibling | 返回元素之前紧接的节点。 |
schemaTypeInfo | 返回与元素相关联的类型信息。 |
tagName | 返回元素的名称。 |
textContent | 设置或返回元素及其后代的文本内容。 |
方法 | 描述 |
---|---|
appendChild() | 把新的子节点添加到节点的子节点列表末尾。 |
cloneNode() | 克隆节点。 |
compareDocumentPosition() | 比较两个节点的文档位置。 |
getAttribute() | 返回属性的值。 |
getAttributeNS() | 返回属性的值(带有命名空间)。 |
getAttributeNode() | 以 Attribute 对象返回属性节点。 |
getAttributeNodeNS() | 以 Attribute 对象返回属性节点(带有命名空间)。 |
getElementsByTagName() | 返回匹配的元素节点及它们的子节点的 NodeList。 |
getElementsByTagNameNS() | 返回匹配的元素节点(带有命名空间)及它们的子节点的 NodeList。 |
getFeature(feature,version) | 返回 DOM 对象,此对象可执行带有指定特性和版本的专门的 API。 |
getUserData(key) | 返回与节点上键关联的对象。此对象必须首先通过使用相同的键调用 setUserData 来设置到此节点。 |
hasAttribute() | 返回元素是否拥有匹配指定名称的属性。 |
hasAttributeNS() | 返回元素是否拥有匹配指定名称和命名空间的属性。 |
hasAttributes() | 返回元素是否拥有属性。 |
hasChildNodes() | 返回元素是否拥有子节点。 |
insertBefore() | 在已有的子节点之前插入一个新的子节点。 |
isDefaultNamespace(URI) | 返回指定的 namespaceURI 是否为默认。 |
isEqualNode() | 检查两个节点是否相等。 |
isSameNode() | 检查两个节点是否为同一节点。 |
isSupported(feature,version) | 返回指定的特性是否在此元素上得到支持。 |
lookupNamespaceURI() | 返回匹配指定前缀的命名空间 URI。 |
lookupPrefix() | 返回匹配指定命名空间 URI 的前缀。 |
normalize() | 把节点(包括属性)下的所有文本节点放置到一个"标准"的格式中,其中只有结构(比如元素、注释、处理指令、CDATA 区段以及实体引用)来分隔 Text 节点,例如,既没有相邻的 Text 节点,也没有空的 Text 节点。 |
removeAttribute() | 删除指定的属性。 |
removeAttributeNS() | 删除指定的属性(带有命名空间)。 |
removeAttributeNode() | 删除指定的属性节点。 |
removeChild() | 删除子节点。 |
replaceChild() | 替换子节点。 |
setUserData(key,data,handler) | 把对象关联到元素上的键。 |
setAttribute() | 添加新属性。 |
setAttributeNS() | 添加新属性(带有命名空间)。 |
setAttributeNode() | 添加新的属性节点。 |
setAttributeNodeNS(attrnode) | 添加新的属性节点(带有命名空间)。 |
setIdAttribute(name,isId) | 如果 Attribute 对象的 isId 属性为 true,那么此方法会把指定的属性声明为一个用户确定 ID 的属性(user-determined ID attribute)。 |
setIdAttributeNS(uri,name,isId) | 如果 Attribute 对象的 isId 属性为 true,那么此方法会把指定的属性声明为一个用户确定 ID 的属性(user-determined ID attribute)(带有命名空间)。 |
setIdAttributeNode(idAttr,isId) | 如果 Attribute 对象的 isId 属性为 true,那么此方法会把指定的属性声明为一个用户确定 ID 的属性(user-determined ID attribute)。 |
Attr 对象表示 Element 对象的属性。属性的容许值通常定义在 DTD 中。
由于 Attr 对象也是一种节点,因此它继承 Node 对象的属性和方法。不过属性无法拥有父节点,同时属性也不被认为是元素的子节点,对于许多 Node 属性来说都将返回 null。
属性 | 描述 |
---|---|
baseURI | 返回属性的绝对基准 URI。 |
isId | 如果属性是 ID 类型,则返回 true,否则返回 false。 |
localName | 返回属性名称的本地部分。 |
name | 返回属性的名称。 |
namespaceURI | 返回属性的命名空间 URI。 |
nodeName | 返回节点的名称,根据其类型。 |
nodeType | 返回节点的类型。 |
nodeValue | 设置或返回节点的值,根据其类型。 |
ownerDocument | 返回属性所属的根元素(document 对象)。 |
ownerElement | 返回属性所附属的元素节点。 |
prefix | 设置或返回属性的命名空间前缀。 |
schemaTypeInfo | 返回与属性相关联的类型信息。 |
specified | 如果属性值被设置在文档中,则返回 true,如果其默认值被设置在 DTD/Schema 中,则返回 false。 |
textContent | 设置或返回属性的文本内容。 |
value | 设置或返回属性的值。 |
Text 对象表示元素或属性的文本内容。
属性 | 描述 |
---|---|
data | 设置或返回元素或属性的文本。 |
isElementContentWhitespace | 判断文本节点是否包含空白字符内容。如果文本节点包含空白字符内容,则返回 true,否则返回 false。 |
length | 返回元素或属性的文本长度。 |
wholeText | 以文档中的顺序向此节点返回相邻文本节点的所有文本。 |
方法 | 描述 |
---|---|
appendData() | 向节点追加数据。 |
deleteData() | 从节点删除数据。 |
insertData() | 向节点中插入数据。 |
replaceData() | 替换节点中的数据。 |
replaceWholeText(text) | 使用指定文本来替换此节点以及所有相邻的文本节点。 |
splitText() | 在指定的偏移处将此节点拆分为两个节点,同时返回包含偏移处之后的文本的新节点。 |
substringData() | 从节点提取数据。 |
XML DOM CDATASection 对象描述 XML 数据中的 CDATA 节。
下面的实例使用 XML 文件 books.xml。
外部 JavaScript 用于加载 XML 文件。
createCDATASection() - 创建一个 CDATA 区段节点
CDATASection 对象表示文档中的 CDATA 区段。
CDATA 区段包含了不会被解析器解析的文本。一个 CDATA 区段中的标签不会被视为标记,同时实体也不会被展开。主要的目的是为了包含诸如 XML 片段之类的材料,而无需转义所有的分隔符。
在一个 CDATA 区段中唯一被识别的分隔符是 "]]>",它可标示 CDATA 区段的结束。CDATA 区段不能进行嵌套。
属性 | 描述 |
---|---|
data | 设置或返回此节点的文本。 |
length | 返回 CDATA 区段的长度。 |
方法 | 描述 |
---|---|
appendData() | 向节点追加数据。 |
deleteData() | 从节点删除数据。 |
insertData() | 向节点中插入数据。 |
replaceData() | 替换节点中的数据。 |
splitText() | 把 CDATA 节点分拆为两个节点。 |
substringData() | 从节点提取数据。 |
以上就是关于 XML DOM – CDATASection 对象的全部内容。
本节介绍 XML DOM – Comment 对象。
下面的实例使用 XML 文件 books.xml。
外部 JavaScript 用于加载 XML 文件。
Comment 对象表示文档中注释节点的内容。
属性 | 描述 |
---|---|
data | 设置或返回此节点的文本。 |
length | 返回此节点的文本的长度。 |
方法 | 描述 |
---|---|
appendData() | 向节点追加数据。 |
deleteData() | 从节点删除数据。 |
insertData() | 向节点中插入数据。 |
replaceData() | 替换节点中的数据。 |
substringData() | 从节点中提取数据。 |
通过 XMLHttpRequest 对象,您可以在不重新加载整个页面的情况下更新网页中的某个部分。
一个简单的 XMLHttpRequest 实例
创建一个简单的 XMLHttpRequest,从 TXT 文件中检索数据。
通过 getAllResponseHeaders() 检索头信息
检索资源(文件)的头信息。
通过 getResponseHeader() 检索指定头信息
检索资源(文件)的指定头信息。
检索 ASP 文件的内容
当用户在输入字段键入字符时,网页如何与 Web 服务器进行通信。
从数据库中检索内容
网页如何通过 XMLHttpRequest 对象从数据库中提取信息。
检索 XML 文件的内容
创建一个 XMLHttpRequest 从 XML 文件中检索数据并把数据显示在一个 HTML 表格中。
XMLHttpRequest 对象是用于幕后与服务器交换数据。
XMLHttpRequest 对象是开发者的梦想,因为您可以:
方法 | 描述 |
---|---|
abort() | 取消当前的请求。 |
getAllResponseHeaders() | 返回头信息。 |
getResponseHeader() | 返回指定的头信息。 |
open(method,url,async,uname,pswd) | 规定请求的类型,URL,请求是否应该进行异步处理,以及请求的其他可选属性。 method:请求的类型:GET 或 POST url:文件在服务器上的位置 async:true(异步)或 false(同步) |
send(string) | 发送请求到服务器。 string:仅用于 POST 请求 |
setRequestHeader() | 把标签/值对添加到要发送的头文件。 |
属性 | 描述 |
---|---|
onreadystatechange | 存储函数(或函数的名称)在每次 readyState 属性变化时被自动调用。 |
readyState | 存放了 XMLHttpRequest 的状态。从 0 到 4 变化: 0:请求未初始化 1:服务器建立连接 2:收到的请求 3:处理请求 4:请求完成和响应准备就绪 |
responseText | 返回作为一个字符串的响应数据。 |
responseXML | 返回作为 XML 数据响应数据。 |
status | 返回状态数(例如 "404" 为 "Not Found" 或 "200" 为 "OK")。 |
statusText | 返回状态文本(如 "Not Found" 或 "OK")。 |
微软的 parseError 对象可用于从微软的 XML 分析器取回错误信息。
要查看 Firefox 如何处理解析器错误,请看本教程的下一个页面。
在您试图打开一个 XML 文档时,就可能发生一个解析器错误(parser-error)。
通过这个 parseError 对象,您可取回错误代码、错误文本、引起错误的行等等。
注意:parseError 对象不属于 W3C DOM 标准!
在下面的代码中,我们会试图加载一个不存在的文件,并显示某些错误属性:
在下面的代码中,我们会让解析器加载一个形式不良的 XML 文档。
(您可以在我们的 XML 教程中阅读更多有关形式良好且有效的 XML。)
查看 XML 文件:note_error.xml
属性 | 描述 |
---|---|
errorCode | 返回一个长整数错误代码。 |
reason | 返回一个字符串,包含错误的原因。 |
line | 返回一个长整数,代表错误的行号。 |
linepos | 返回一个长整数,代表错误的行位置。 |
srcText | 返回一个字符串,包含引起错误的行。 |
url | 返回指向被加载文档的 URL。 |
filepos | 返回错误的一个长整型文件位置。 |
XML DOM 解析
下面的实例使用 XML 文件 books.xml。
XML DOM 属性和方法
下面的实例使用 XML 文件 books.xml。
函数 loadXMLDoc(),在外部 JavaScript 中,用于加载 XML 文件。
函数 loadXMLString(),在外部 JavaScript 中,用于加载 XML 字符串。
加载并解析 XML 文件 - 外部解析脚本
加载并解析 XML 字符串 - 外部解析脚本
XML DOM 访问节点
下面的实例使用 XML 文件 books.xml。
函数 loadXMLDoc(),在外部 JavaScript 中,用于加载 XML 文件。
使用节点列表中的索引号访问节点
使用 length 属性循环遍历节点
查看元素的节点类型
循环遍历元素节点
使用节点关系循环遍历元素节点
XML DOM 节点信息
下面的实例使用 XML 文件 books.xml。
函数 loadXMLDoc(),在外部 JavaScript 中,用于加载 XML 文件。
获取元素节点的节点名称
从文本节点获取文本
更改文本节点的文本
获取元素节点的节点名称和类型
XML DOM 节点列表和属性列表
下面的实例使用 XML 文件 books.xml。
函数 loadXMLDoc(),在外部 JavaScript 中,用于加载 XML 文件。
从第一个 <title> 元素获取文本
使用 length 属性循环遍历节点
获取元素的属性
XML DOM 遍历节点树
下面的实例使用 XML 文件 books.xml。
函数 loadXMLString(),在外部 JavaScript 中,用于加载 XML 字符串。
XML DOM 浏览器差异
下面的实例使用 XML 文件 books.xml。
函数 loadXMLDoc(),在外部 JavaScript 中,用于加载 XML 文件。
显示节点列表的长度 - IE 和其他浏览器的不同结果
忽略节点之间的空文本
XML DOM 导航节点
下面的实例使用 XML 文件 books.xml。
函数 loadXMLDoc(),在外部 JavaScript 中,用于加载 XML 文件。
获取节点的父节点
获取节点的第一个子元素
获取节点的最后一个子元素
获取节点的下一个同级元素
获取节点的上一个同级元素
XML DOM 获取节点值
下面的实例使用 XML 文件 books.xml。
函数 loadXMLDoc(),在外部 JavaScript 中,用于加载 XML 文件。
XML DOM 更改节点值
下面的实例使用 XML 文件 books.xml。
函数 loadXMLDoc(),在外部 JavaScript 中,用于加载 XML 文件。
更改元素文本节点
使用 setAttribute 更改属性值
使用 nodeValue 更改属性值
XML DOM 删除节点
下面的实例使用 XML 文件 books.xml。
函数 loadXMLDoc(),在外部 JavaScript 中,用于加载 XML 文件。
删除元素节点
删除当前的元素节点
删除文本节点
清空文本节点的文本
按名称删除属性
按对象删除属性
XML DOM 替换节点
下面的实例使用 XML 文件 books.xml。
函数 loadXMLDoc(),在外部 JavaScript 中,用于加载 XML 文件。
XML DOM 创建节点
下面的实例使用 XML 文件 books.xml。
函数 loadXMLDoc(),在外部 JavaScript 中,用于加载 XML 文件。
创建元素节点
使用 createAttribute 创建属性节点
使用 setAttribute 创建属性节点
创建文本节点
创建 CDATA 区段节点
创建注释节点
XML DOM 添加节点
下面的实例使用 XML 文件 books.xml。
函数 loadXMLDoc(),在外部 JavaScript 中,用于加载 XML 文件。
在最后一个子节点后添加一个节点
在指定子节点前添加一个节点
添加一个新的属性
向文本节点添加数据
XML DOM 克隆节点
下面的实例使用 XML 文件 books.xml。
函数 loadXMLDoc(),在外部 JavaScript 中,用于加载 XML 文件。
XML DOM XMLHttpRequest 对象
一个简单的 XMLHttpRequest 实例
创建一个简单的 XMLHttpRequest,并从一个 TXT 文件中检索数据。
通过 getAllResponseHeaders() 检索头信息
检索资源(文件)的头信息。
通过 getResponseHeader() 检索指定的头信息
检索资源(文件)的指定头信息。
检索 ASP 文件的内容
用户在输入字段中键入字符时,网页如何与 Web 服务器进行通信。
从数据库检索内容
网页如何通过 XMLHttpRequest 对象从数据库中提取信息。
检索 XML 文件的内容
创建一个 XMLHttpRequest 从 XML 文件中检索数据并把数据显示在一个 HTML 表格中。
当 Firefox 遇到解析器错误,它会载入一个包含错误的 XML 文档。
在您试图打开一个 XML 文档时,就可能发生一个解析器错误(parser-error)。
与 Internet Explorer 浏览器不同,如果 Firefox 遇到错误,它会载入包含错误描述的 XML 文档中。
XML 错误文档的根节点的名称是 "parsererror"。这是用来检查是否有错误。
在下面的代码中,我们会让解析器加载一个形式不良的 XML 文档。
(您可以在我们的 XML 教程中阅读更多有关形式良好且有效的 XML。)
查看 XML 文件:note_error.xml
实例解释:
注意:实际上,只有 Internet Explorer 会用 DTD 检查您的 XML,Firefox 不会。
在这里,我们创建了一个 XML 加载函数,在 Internet Explorer 和 Firefox 中检查解析器错误:
查看 XML 文件:note_error.xml
实例解释 - Internet Explorer:
实例解释 - Firefox:
XML DOM 定义了访问和操作 XML 的标准。
根据 DOM,XML 文档中的一切是一个节点。
元素节点中的文本存储在一个文本节点中。
XML DOM 把 XML 文档视为树结构。树结构被称为节点树。
在节点树中,父级、子级和同级是用来描述关系。
所有现代的浏览器都有内建的 XML 解析器,可用于读取和操作 XML。
通过 XML DOM 属性和方法,您可以访问 XML 文档中的每个节点。
重要节点属性:nodeName、nodeValue 和 nodeType。
当使用像 childNodes 或 getElementsByTagName() 的属性或方法时,返回节点列表对象。
不同的浏览器处理节点之间的换行或空格字符时是不同的。
如需忽略元素节点间的空文本字节,您可以检查节点类型。
节点可以使用节点的关系进行导航。
我们的 XML DOM 实例也表示了 XML DOM 教程的一个总结。
我们的建议是学习 XSLT。
如果您想要学习更多有关验证 XML 的知识,我们建议学习 DTD 和 XML Schema。
下面是每个主题的一个简短描述。
XSLT 是 XML 文件的样式表语言。
通过使用 XSLT,可以把 XML 文档转换为其他格式,比如 XHTML。
如果您想要学习更多有关 XSLT 的知识,请访问我们的 XSLT 教程。
DTD 的目的是定义 XML 文档中合法的元素、属性和实体。
通过使用 DTD,每个 XML 文件可以随身携带它自己的格式的描述。
DTD 可以被用来确认您收到的数据和您自己的数据是否有效。
如果您想要学习更多有关 DTD 的知识,请访问我们的 DTD 教程。
以上就是 XML DOM 教程的全部内容了,感谢你的阅读!下面的实例使用 XML 文件 books.xml。
XML DOM 属性和方法
下面的实例使用 XML 文件 books.xml。
函数 loadXMLDoc(),在外部 JavaScript 中,用于加载 XML 文件。
函数 loadXMLString(),在外部 JavaScript 中,用于加载 XML 字符串。
加载并解析 XML 文件 - 外部解析脚本
加载并解析 XML 字符串 - 外部解析脚本
XML DOM 访问节点
下面的实例使用 XML 文件 books.xml。
函数 loadXMLDoc(),在外部 JavaScript 中,用于加载 XML 文件。
使用节点列表中的索引号访问节点
使用 length 属性循环遍历节点
查看元素的节点类型
循环遍历元素节点
使用节点关系循环遍历元素节点
XML DOM 节点信息
下面的实例使用 XML 文件 books.xml。
函数 loadXMLDoc(),在外部 JavaScript 中,用于加载 XML 文件。
获取元素节点的节点名称
从文本节点获取文本
更改文本节点的文本
获取元素节点的节点名称和类型
XML DOM 节点列表和属性列表
下面的实例使用 XML 文件 books.xml。
函数 loadXMLDoc(),在外部 JavaScript 中,用于加载 XML 文件。
从第一个 <title> 元素获取文本
使用 length 属性循环遍历节点
获取元素的属性
XML DOM 遍历节点树
下面的实例使用 XML 文件 books.xml。
函数 loadXMLString(),在外部 JavaScript 中,用于加载 XML 字符串。
XML DOM 浏览器差异
下面的实例使用 XML 文件 books.xml。
函数 loadXMLDoc(),在外部 JavaScript 中,用于加载 XML 文件。
显示节点列表的长度 - IE 和其他浏览器的不同结果
忽略节点之间的空文本
XML DOM 导航节点
下面的实例使用 XML 文件 books.xml。
函数 loadXMLDoc(),在外部 JavaScript 中,用于加载 XML 文件。
获取节点的父节点
获取节点的第一个子元素
获取节点的最后一个子元素
获取节点的下一个同级元素
获取节点的上一个同级元素
XML DOM 获取节点值
下面的实例使用 XML 文件 books.xml。
函数 loadXMLDoc(),在外部 JavaScript 中,用于加载 XML 文件。
XML DOM 更改节点值
下面的实例使用 XML 文件 books.xml。
函数 loadXMLDoc(),在外部 JavaScript 中,用于加载 XML 文件。
更改元素文本节点
使用 setAttribute 更改属性值
使用 nodeValue 更改属性值
XML DOM 删除节点
下面的实例使用 XML 文件 books.xml。
函数 loadXMLDoc(),在外部 JavaScript 中,用于加载 XML 文件。
删除元素节点
删除当前的元素节点
删除文本节点
清空文本节点的文本
按名称删除属性
按对象删除属性
XML DOM 替换节点
下面的实例使用 XML 文件 books.xml。
函数 loadXMLDoc(),在外部 JavaScript 中,用于加载 XML 文件。
XML DOM 创建节点
下面的实例使用 XML 文件 books.xml。
函数 loadXMLDoc(),在外部 JavaScript 中,用于加载 XML 文件。
创建元素节点
使用 createAttribute 创建属性节点
使用 setAttribute 创建属性节点
创建文本节点
创建 CDATA 区段节点
创建注释节点
XML DOM 添加节点
下面的实例使用 XML 文件 books.xml。
函数 loadXMLDoc(),在外部 JavaScript 中,用于加载 XML 文件。
在最后一个子节点后添加一个节点
在指定子节点前添加一个节点
添加一个新的属性
向文本节点添加数据
XML DOM 克隆节点
下面的实例使用 XML 文件 books.xml。
函数 loadXMLDoc(),在外部 JavaScript 中,用于加载 XML 文件。
XML DOM XMLHttpRequest 对象
一个简单的 XMLHttpRequest 实例
创建一个简单的 XMLHttpRequest,并从一个 TXT 文件中检索数据。
通过 getAllResponseHeaders() 检索头信息
检索资源(文件)的头信息。
通过 getResponseHeader() 检索指定的头信息
检索资源(文件)的指定头信息。
检索 ASP 文件的内容
用户在输入字段中键入字符时,网页如何与 Web 服务器进行通信。
从数据库检索内容
网页如何通过 XMLHttpRequest 对象从数据库中提取信息。
检索 XML 文件的内容
创建一个 XMLHttpRequest 从 XML 文件中检索数据并把数据显示在一个 HTML 表格中。
XML 文档中的错误将停止您的 XML 程序。
W3C XML 规范规定如果发现错误,程序不应该继续处理 XML 文档。究其原因是 XML 软件应该是易于编写的,所有的 XML 文档应该是兼容的。
通过 HTML 就有可能创建带有"错误"(如缺少结束标签)的文档。HTML 浏览器如此巨大且不相容的主要原因之一是在遇到 HTML 错误时它们都有自己的方法弄明白文档本应该是什么样的。
通过 XML,这应该是不可能的。
为协助检查您的 XML 语法,请粘贴下面文本区中的 XML 代码,并按"验证 XML"按钮。
如需检查 XML 文件的语法,请在下面输入字段中键入文件的 URL,并按"验证 XML"按钮。
为了验证一个错误的XML文件,请把下面的 URL 粘贴到上面的输入字段中://www.51coolma.cn/dom/cd_catalog.xml
注意:当您访问这个文件时,如果显示 "Access denied" 的错误,这是因为您的浏览器安全设置不允许跨域访问。