一、概念理解：

关于Element跟Node的区别，cilldren跟childNodes的区别很多朋友弄不清楚，本文试图让大家明白这几个概念之间的区别。

　　Node(节点)是DOM层次结构中的任何类型的对象的通用名称，Node有很多类型，如元素节点，属性节点，文本节点，注释节点等，通过NodeType区分，常见的有：

节点类型 NodeType
元素element 1
属性attr 2
文本text 3
注释comments 8
文档document 9

　　更多节点类型参考：https://developer.mozilla.org/en-US/docs/DOM/Node.nodeType?redirectlocale=en-US&redirectslug=nodeType

　　Element继承了Node类，也就是说Element是Node多种类型中的一种，即当NodeType为1时Node即为ElementNode，另外Element扩展了Node，Element拥有id、class、children等属性。

　　以上就是Element跟Node的区别。

　　那么用document.getElementById("xxx")取到的是Node还是Element呢？我们来测试一下：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>Demo</title>

</head>

<body>

    <div id="test">

        <p>One</p>

        <P>Two</p>

    </div>

    <script>

        var oDiv=document.getElementById("test");

        console.log(oDiv instanceof Node);        //true

        console.log(oDiv instanceof Element);    //true

    </script>

</body>

</html>

　　我们可以看到用document.getElementById("xxx")取到的既是Element也是Node。

　　children是Element的属性，childNodes是Node的属性，我们再来测试一下：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>Demo</title>

</head>

<body>

    <div id="test">

        <p>One</p>

        <P>Two</p>

    </div>

    <script>

        var oDiv=document.getElementById("test");

        console.log(oDiv.children[0] instanceof Node);        //true

        console.log(oDiv.children[0] instanceof Element);    //true

        console.log(oDiv.childNodes[0] instanceof Node);    //true

        console.log(oDiv.childNodes[0] instanceof Element);    //false

        console.log(typeof oDiv.childNodes[0].children);    //undefined

        console.log(typeof oDiv.childNodes[0].childNodes);    //object

    </script>

</body>

</html>

　　通过上面的代码我们可以看到，Element的children[0]仍为Element，是Node和Element的实例，Node的childNdoes[0]为Node，只是Node的实例，不是Element的实例。

　　同时，Node的children属性为为undefined。

二、使用全解

一些典型的 DOM 属性：

  • x.nodeName - x 的名称
  • x.nodeValue - x 的值
  • x.nodeType -x  的类型
  • x.parentNode - x 的父节点
  • x.childNodes - x 的子节点
  • x.attributes - x 的属性节点

从 books.xml 中的 <title> 元素获取文本的 JavaScript 代码：

txt=xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue
x=xmlDoc.getElementsByTagName("book")[0].attributes;
cat=x.getNamedItem("category").nodeValue

在此语句执行后，txt 保存的值是 "Harry Potter"。

解释：

  • xmlDoc - 由解析器创建的 XML DOM                                （文档节点）
  • getElementsByTagName("title")[0] - 第一个 <title> 元素   （元素节点）
  • childNodes[0] - <title> 元素的第一个子节点                       (文本节点)
  • nodeValue - 节点的值                                                        (文本节点的值)
  • attributes   -属性节点                                                        （属性节点）

在上面的例子中，getElementsByTagName 是方法，而 childNodes 和 nodeValue 是属性。

XML DOM 笔记的更多相关文章

  1. XML学习笔记

    XML学习笔记 第一部分:XML简介 我们经常可以听到XML.HTML.XHTML这些语言,后两者比较清楚,一直不是很明白XML是什么,这里做一个总结. XML(eXtensible Markup L ...

  2. DOM笔记（五）：JavaScript的常见事件和Ajax小结

    一.常见事件类型 1.鼠标事件 事件名称 说明 onclick 鼠标单击时触发 ondbclick 鼠标双击时触发 onmousedown 鼠标左键按下时触发 onmouseup 鼠标释放时触发 on ...

  3. DOM笔记（三）：Element接口和HTMLElement接口

    一.Element接口 Element接口表示一个元素,该接口扩展自Node接口,自然继承了Node接口的属性和方法,也有一套针对元素的属性和方法. Element接口常见的属性比较少,常用的就是一个 ...

  4. DOM笔记（一）：HTMLDocument接口

    操作HTML文档的第一步就是获取对文档元素的引用,每一个元素在DOM中就是一个节点,所有的元素在DOM中构成一个节点树. 用于获取元素节点定义的方法定义于HTMLDocument接口,window.d ...

  5. JavaScript 【 IE中的XML DOM 】

    IE中的 XML DOM 在统一的正式规范出来以前,浏览器对于XML的解决方案各不相同.DOM2级提出了动态创建XML DOM规范,DOM3进一步增强了XML DOM.所以,在不同的浏览器实现XML的 ...

  6. XML与web开发-01- 在页面显示和 XML DOM 解析

    前言: 关于 xml 特点和基础知识,可以菜鸟教程进行学习:http://www.runoob.com/xml/xml-tutorial.html 本系列笔记,主要介绍 xml 在 web 开发时需要 ...

  7. delphi操作xml学习笔记 之一 入门必读

    Delphi 对XML的支持---TXMLDocument类       Delphi7 支持对XML文档的操作,可以通过TXMLDocument类来实现对XML文档的读写.可以利用TXMLDocum ...

  8. mybatis-config.xml简单笔记

    mybatis-config.xml简单笔记 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE ...

  9. applicationContext.xml简单笔记

    applicationContext.xml简单笔记 <?xml version="1.0" encoding="UTF-8"?> <bean ...

随机推荐

  1. CentOS minimal 安装ssh 服务 和客户端

      检查是否装了SSH包 如果现实有openssh-server 说明系统已经安装了ssh 2 如果系统没有安装ssh 那么可以在线安装 yum install openssh-server 3 设置 ...

  2. Andriod三步学会安卓自己定义视图及其属性

    第一步:自己定义属性 第二步:自己定义控件解析属性 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcm5adW9adW8=/font/5a6L5L2T/fo ...

  3. hdu1878欧拉回路(DFS+欧拉回路)

    欧拉回路 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Submi ...

  4. ReboletricSample工程搭建

    受到  Just Say No to More End-to-End Tests 文章链接:http://googletesting.blogspot.tw/2015/04/just-say-no-t ...

  5. MySQL-怎样使update操作sleep一段时间

    )) a on mytest.id=a.id set mytest.name='xiaowang';

  6. Performance Tuning Using Linux Process Management Commands

    [root@bigdata-server-02 /]# ps --help all Usage: ps [options] Basic options: -A, -e all processes -a ...

  7. SYN FLOOD学习理解

    SYN FLOOD是一种比较常见的DoS攻击手段,它的特点就是防不胜防.SYN攻击属于DOS攻击的一种,它利用TCP协议缺陷,通过发送大量的半连接请求,耗费CPU和内存资源.SYN攻击除了能影响主机外 ...

  8. input表单元素的默认padding不一致问题

    最近做的项目,发现一堆问题,input type=“text”和type=“button” (1)在无文字的时候高度是一致的,分别写入相同大小的文字type=“button”高度>type=“t ...

  9. git使用笔记（四）错误报告 Git push rejected error: fatal: refusing to merge unrelated histories

    Reason: The reason is because I created repo in Github with initiated README.md file, and I tried to ...

  10. 发布镶嵌数据集，服务端Raster Function制作

    1.新建GDB 2.GDB里右键,New 镶嵌数据集. 3.向镶嵌数据集中添加风速TIF. 4.利用原样式,导出一个函数模板. 导出是XML. 5.发布ImageService服务时,在Functio ...