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. 【Linux 网络编程】数据在网络中传输过程(以ping命令为例)

    (1)应用程序ping会判断发送的是主机名还是IP地址,调用函数gethostbyname()解析主机B,将主机转换为一个32位的    IP地址.这个过程叫做DNS域名解析. (2)ping程序向目 ...

  2. [转帖]linux文件描述符文件/etc/security/limits.conf

    linux文件描述符文件/etc/security/limits.conf https://blog.csdn.net/fanren224/article/details/79971359 需要多学习 ...

  3. Windows2012r2 安装SQLSERVER2017 与 SQLSERVER2016 的错误提示解决KB2919355 以及 KB2919442

    1. win2012r2 安装时 总是提示: 然后费了半天劲 下载下来又提示 找了一下 需要先安装这么一个补丁才可以 KB2919442 然后才能安装上 KB2919355 然后就可以正常安装了:

  4. start-all.sh启动HDFS,datanode没有启动

    第一次格式化dfs后,启动并使用hadoop,之后如果再次重新执行了格式化(hdfs namenode -format) start-all.sh启动时就会遇到datanode无法启动的问题,通常情况 ...

  5. webpack的插件 http-webpack-plugin。 webpack-dev-server

    自动的生成: bundle.js  和 index.html 在该项目的目录下:npm init -yes npm install vue -D npm install webpack@3.12.0 ...

  6. Java作业 题目:16版.真实员工数统计

    题目:16版.真实员工数统计 该资源支持按部自动给分,评分规则如下: sjkdfhslkfdhdsiog函数定义测试 sjkdfhslkfdhdsiog函数定义测试 sjkdfhslkfdhdsiog ...

  7. java tomcat服务器

    1.什么是javaweb? Java web,是用java技术来解决相关web互联网领域的技术的总称. web包括:web服务器和web客户端两部分.java在最早web客户端的应用有java app ...

  8. mysql 聚合函数(2)

    平均 svg select avg(sal + IFNULL(comm,0)) as avg_sal from t_emp 总和 sum select sum(sal + IFNULL(comm,0) ...

  9. 如何用vue封装一个防用户删除的平铺页面的水印组件

    需求 为了防止截图等安全问题,在web项目页面中生成一个平铺全屏的水印 要求水印内容为用户名,水印节点用户不能通过开发者工具等删除 效果 如上图 在body节点下插入水印DOM节点,水印节点覆盖在页面 ...

  10. filebeat->redis->logstash->elasticsearch->kibana

    整体流程 filebeat收集openresty应用日志传输到Redis集群中 Logstash从Redis集群中拉取数据,并传输到Elasticsearch集群 使用Kibana可视化索引 使用El ...