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. Python3.7 下安装pyqt5

    第一步:首先进入python安装目录下的 [scripts]. 第二步:执行安装pyqt5的命令:python37 -m pip install pyqt5 出现以下安装过程代表安装成功. 第三步:在 ...

  2. 20 亿的 URL 集合,如何快速判断其中一个?

    假设遇到这样一个问题:一个网站有 20 亿 url 存在一个黑名单中,这个黑名单要怎么存?若此时随便输入一个 url,你如何快速判断该 url 是否在这个黑名单中?并且需在给定内存空间(比如:500M ...

  3. selenium获取微博用户粉丝数

    selenum的安装 selenium文档 获取微博用户粉丝数 from selenium import webdriver from time import sleep wd = webdriver ...

  4. mknod创建设备(加载新的设备驱动时候,通常会用到此命令)

    mknod - make block or character special filesmknod [OPTION]... NAME TYPE [MAJOR MINOR] option 有用的就是- ...

  5. PHP 数组辅助函数

    /** * 取多维数据中某字段的值 * @param array $array 数据源数组 * @param string|array $field 要获取的字段 * @return array 结果 ...

  6. YOLOv3训练过程笔记

    本人使用的是linux平台,按照YOLO网页0https://pjreddie.com/darknet/yolo/的步骤操作进行下载darkenet程序包以及编译,之后可尝试用VOC2007的数据集测 ...

  7. 关于echarts 重绘/图表切换/数据清空

    容器id 为main var myChart=document.getElementById("main") myChart.removeAttribute("_echa ...

  8. Echarts-样式简介

    本文介绍这几种方式,他们的功能范畴可能会有交叉(即同一种细节的效果可能可以用不同的方式实现),但是他们各有各的场景偏好. 颜色主题(Theme) 调色盘 直接样式设置(itemStyle.lineSt ...

  9. random 方法 生成随机数

    Math.random() 生成 大于等于0.0 且小于 1.0 的double 型随机数 ( 0.0 <= Math.random() < 1.0 ) 可以使用它便携简单了表达式,生成任 ...

  10. 【leetcode】 463. Island Perimeter

    题目: 以二维数组形式表示坐标岛屿,求边长. 例子: [[0,1,0,0], [1,1,1,0], [0,1,0,0], [1,1,0,0]] Answer: 16 Explanation: The ...