一、概念理解：

关于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. Vue.directive 自定义指令

    一.什么是全局API? 全局API并不在构造器里,而是先声明全局变量或者直接在Vue上定义一些新功能,Vue内置了一些全局API,比如我们今天要学习的指令Vue.directive.说的简单些就是,在 ...

  2. toad for oracle中文显示乱码

    toad for oracle中文显示乱码 数据入库的时候中文显示正常,在toad for oracleclient和页面显示都是乱码!!! 原因:在数据入库时候出现的问题. 解决方式: 在系统变量中 ...

  3. WPF控件模板和数据模板 - 醉意人间

    来自:http://www.th7.cn/Program/WPF/2011/12/21/51676.shtml ControlTemplate用于描述控件本身. 使用TemplateBinding来绑 ...

  4. eclipse调试第三方jar包需要源码的问题

    很多时候测试自己的jar包功能时,需要有一个测试工程导入该jar包,但是一般在调试的时候,需要跟进去看看步骤和逻辑是否正确,这个时候就需要在jar包的源码中下断点.最近刚好自己也会经常这样做,也遇到了 ...

  5. Hadoop实战-MapReduce之WordCount(五)

    环境介绍: 主服务器ip:192.168.80.128(master)  NameNode  SecondaryNameNode ResourceManager 从服务器ip:192.168.80.1 ...

  6. ElasticSearch（八）关于document的一些知识点

    先查看一条数据: GET /ecommerce/product/5 { "_index" : "ecommerce", "_type" : ...

  7. 使用酷Q SDK开发QQ机器人

    酷Q SDK下载地址:https://github.com/CoolQ/cqsdk-vc 打开工程,编辑appmain.cpp 将“私聊消息”处的代码 更改为 CQEVENT(int32_t, __e ...

  8. assign,copy,strong,weak,nonatomic的具体理解

    例子: NSString *houseOfMM = [[NSString alloc] initWithString:'MM的三室两厅']; 上面一段代码会执行以下两个动作:  1 在堆上分配一段内存 ...

  9. LuNamp和LuManager的目录结构

    /|---- etc/|-------- my.cnf #mysql配置文件|-------- ipfw.conf #ipfw防火墙的配置文件(仅FreeBSD)|---- home/|------- ...

  10. 如何把wecenter的推荐的问题模块单独调取出来？

    查阅文档: http://wenda.wecenter.com/question/1893 http://www.zhidiu.com/article/1012 http://wenda.wecent ...