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. 详解MySql的配置文件my.cnf

    1.Windows下MySQL的配置文件是my.ini,一般会在安装目录的根目录. 2.Linux下MySQL的配置文件是my.cnf,一般会放在/etc/my.cnf,/etc/mysql/my.c ...

  2. [转帖]数据库默认驱动、URL、端口

    超详细的各种数据库默认驱动.URL.端口总结 http://database.51cto.com/art/201906/598043.htm 学习了解一下.  概述 今天主要对各种数据库默认端口和UR ...

  3. Editor placeholder in source code错误

    When you insert code via autocompletion (or via a code snippet, sometimes), there may be placeholder ...

  4. numpy中的快速的元素级数组函数

    numpy中的快速的元素级数组函数 一元(unary)ufunc 对于数组中的每一个元素,都将元素代入函数,将得到的结果放回到原来的位置 >>> import numpy as np ...

  5. springBoot2.0使用@slf4j注解记录日志

    1. idea上安装Lombok插件 File --> setting --> Plugins 安装完后重启idea 2. 在springboot项目中修改pom.xml,添加如下配置引入 ...

  6. laravel框架之批刪&全選&全不選&反選

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. doT学习(三)之实战

    案例一: <html> <head> <script id="headertmpl" type="text/x-dot-template&q ...

  8. Ubuntu 双网卡route

    ip route flush table sz ip route add default via 183.2.218.254 dev eth0 src 183.2.218.4 table sz ip ...

  9. Java Script入门

    学习来源:https://www.runoob.com/js/js-tutorial.html JavaScript 教程 JavaScript 是 Web 的编程语言. 所有现代的 HTML 页面都 ...

  10. 浅谈java虚拟机|系列1|架构简介

    今天开了一个专题.谈谈我们java程序员每天面对的java虚拟机(jvm). 本质上来说,jvm分两部分:编译器(compiler)和运行时(runtime). 所谓的编译器,简单来说,他就是个翻译机 ...