XML DOM

DOM 把 XML 文档视为一种树结构。通过这个 DOM 树,可以访问所有的元素。可以修改它们的内容(文本以及属性),而且可以创建新的元素。元素,以及它们的文本和属性,均被视为节点。

在本教程的较早章节中,我们介绍了 XML DOM,并使用了 XML DOM 的 getElementsByTagName() 从 DOM 树中取回数据。

在本节中,我们将讲解一些其他较常用的 XML DOM 方法。在本例中,我们使用 XML 文件 books.xml,并使用一个 JavaScript 函数把 XML 文件加载到名为 xmlDoc 的 DOM 对象中。

如需学习更多有关 XML DOM 的知识,请访问我们的 XML DOM 教程。

获取元素的值

下面的代码检索第一个 <title> 元素的文本值:

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

结果:txt = "Harry Potter"

亲自试一试

获取属性的值

下面的代码检索第一个 <title> 元素的 "lang" 属性的文本值:

txt=xmlDoc.getElementsByTagName("title")[0].getAttribute("lang");

结果:txt = "en"

亲自试一试

改变元素的值

下面的代码改变第一个 <title> 元素的文本值:

x=xmlDoc.getElementsByTagName("title")[0].childNodes[0];
x.nodeValue="Easy Cooking";

亲自试一试

改变属性的值

setAttribute() 方法可用于改变已有属性的值,或创建一个新属性。

下面的代码向每个 <book> 元素添加了名为 "edition" 的新属性(值是 "first"):

x=xmlDoc.getElementsByTagName("book");

for(i=0;i<x.length;i++)
{
x[i].setAttribute("edition","first");
}

亲自试一试

创建元素

createElement() 方法创建新的元素节点。

createTextNode() 方法创建新的文本节点。

appendChild() 方法向节点添加子节点(在最后一个子节点之后)。

如需创建带有文本内容的新元素,需要同时创建元素节点和文本节点。

下面的代码创建了一个元素 (<edition>),然后把它添加到第一个 <book> 元素中:

newel=xmlDoc.createElement("edition");
newtext=xmlDoc.createTextNode("First");
newel.appendChild(newtext); x=xmlDoc.getElementsByTagName("book");
x[0].appendChild(newel);

例子解释:

  1. 创建 <edition> 元素
  2. 创建值为 "First" 的文本节点
  3. 把这个文本节点追加到 <edition> 元素
  4. 把 <edition> 元素追加到第一个 <book> 元素

亲自试一试

删除元素

removeChild() 方法删除指定的节点(或元素)。

下面的代码片段将删除第一个 <book> 元素中的第一个节点:

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

x.removeChild(x.childNodes[0]);

亲自试一试

注释:上例的结果可能会根据所用的浏览器而不同。Firefox 把新行字符当作空的文本节点,而 Internet Explorer 不是这样。您可以在 w3school 的 XML DOM 教程中阅读到更多有关这个问题以及如何避免它的知识。

这里提供的 XML DOM 实例,只向您展示了少数几项我们可以利用 XML DOM 完成的工作。

XML DOM (Document Object Model) 定义了访问和操作 XML 文档的标准方法。的更多相关文章

  1. HTML DOM 定义了访问和操作 HTML 文档标准

    HTML DOM 定义了访问和操作 HTML 文档的标准. 您应该具备的基础知识 在您继续学习之前,您需要对以下内容拥有基本的了解: HTML CSS JavaScript 如果您需要首先学习这些项目 ...

  2. 认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法。元素、属性和文本的树结构(节点树)。

    认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 先来看看下面代码 ...

  3. DOM访问和处理HTML文档的标准方法

    innerHTML获取或替换HTML元素的内容 <p id="d">对于错我无法来判断 </p><script type="text/jav ...

  4. javascript之DOM(Document Object Model) 文档对象模型

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  5. DOM (Document Object Model)文档对象模型

    [理解下DOM] DOM——Document Object Mode.DOM是网页上XHTML中文档正文标题啊.段落.列表.样式.以及ID/class等所有其他数据的一个内部表示.我自己的理解是将网页 ...

  6. DOM(Document Object Model)

    DOM(Document Object Model):    结点的概念:整个文档就是由层次不同的多个节点组成,可以说结点代表了全部内容.    结点类型        1.元素结点 对于元素结点的n ...

  7. DOM - Document Object Model

    Document Object Model

  8. BOM—Browser Object Model and DOM—Document Object Model

    浏览器对象模型的内涵是每个页面都是一个window对象,而dom是document为基准的模型,而document与wimdow.document指向相同,所以可以这么理解,bom模型的定义是包括do ...

  9. DOM document object model learn

    DOM对W3C DOM而言,HTML文档中任何一样东西都是一个节点,而且节点之间是有层次的.如<p>I am a JavaScript hacker.</p>有两个节点,一个是 ...

随机推荐

  1. 最大公约数与最小公倍数C++实现

    最大公约数为辗转相除法求得, 最小公倍数为两数之积与最大公约数的比值 #include<iostream> using namespace std; int gcd(int, int); ...

  2. session 的理解

  3. shell脚本一键部署nginx

    一键部署nginx 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 ...

  4. 国产银河麒麟 安装wps 的简单方法

    前提说明 银河麒麟 是总部在天津的企业 有国防科大还有 ubuntu的母公司一起在维护 主要的产品有 优麒麟 还有 银河麒麟 优麒麟 可以看做是 国产版的ubuntu的社区版 银河麒麟 则是 面向国内 ...

  5. Javascript设计原则

    Javascript设计原则 在面向对象的程序设计思想中, 我们能够遵循一些原则能够让我们开发代码时结构层次清晰, 更具说服力, 可谓是事半功倍. 做到这一点我们掌握一些程序设计原则是非常有利的, 如 ...

  6. java集群技术(转)

    序言 越来越多的关键应用运行在J2EE(Java 2, Enterprise Edition)中,这些诸如银行系统和账单处理系统需要高的可用性(High Availability, HA),同时像Go ...

  7. python之入门

    第一章 入门 1.1 变量-输出 a = 1 # 声明变量 a # 变量的名字 = # 赋值 1 # 值 变量定义的规则: 1.变量由数字,字母,下划线组成 2.不能以数字开头 3.不能使用pytho ...

  8. Quartz.net 3.x使用总结(一)——简单使用

    原文:Quartz.net 3.x使用总结(一)--简单使用 阅读目录 1.Quartz.net简介 2.简单使用 3.TriggerBuilder介绍 3.1  SimpleSchedule 3.2 ...

  9. IWorkspace pWorkspace = pWorkspaceFactory.OpenFromFile(Application.StartupPath + "\\temp", 0); 报:异常来自 HRESULT:0x80040228

    原因:未添加License. 解决办法:在窗体中添加LicenseControl即可.如下图,License图标运行时不会显示.

  10. npm命令的使用

    本人实际项目开发前端用的是单页vue组件开发.不管是启动项目还是下载依赖,都要使用npm命令. 东凑凑,西拼拼,整理些常用的. 前提:需要下载node.js.这里就不详细说明了.具体参照官方文档. 1 ...