一、概念理解：

关于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. linux 信号屏蔽

    <span style="font-size:18px;">#include <sys/types.h> #include <unistd.h> ...

  2. Quartz 2D编程指南(2)图形上下文(Graphics Contexts)

    Graphics Contexts       一个Graphics Context表示一个绘制目标(也能够理解为图形上下文).它包括绘制系统用于完毕绘制指令的绘制參数和设备相关信息.Graphics ...

  3. Linux多线程编程的条件变量

    在stackoverflow上看到一关于多线程条件变量的问题,题主问道:什么时候会用到条件变量,mutex还不够吗?有个叫slowjelj的人做了很好的回答,我再看这个哥们其他话题的一些回答,感觉水平 ...

  4. JS 省市两级联动（不带地区版本）

    基于网上找的一个版本改造,因为项目需求不需要地区只要省.市,所以做了改版,两个input上直接取出了数据 <html> <head> <script src=" ...

  5. 用python编写的无线AP扫描器

    代码如下: #coding=utf-8 import os import sys import subprocess from scapy.all import * RSN = 48 #管理帧信息元素 ...

  6. window下Jira+SQL Server部署+汉化+破解

    网上很多都是jira+mysql部署的文章,由于我现在有需求要用SQL Server数据库,因此就动手试了一下,参考网上许多文章,再加上自己的几次尝试,很快也成功了,分享出来. 全文章节: 一.事前准 ...

  7. linux的su和sudo（转载）

    来源:http://www.jb51.net/LINUXjishu/12713.html 一. 使用 su 命令临时切换用户身份 1.su 的适用条件和威力 su命令就是切换用户的工具,怎么理解呢?比 ...

  8. centos6.4中文输入法安装和切换（转载）

    1.用root登录,或者切换到root账户(su root): 2.yum install "@Chinese Support"; 3.exit: 4.System→prefere ...

  9. SQL Server 2005中top关键字的用法

    1.返回N条记录数 select top n * from <表名> [查询条件] 2.返回总结果集中指定百分比记录数 select top n percent * from <表名 ...

  10. 大数据之环境准备系列 ——第二篇 新装VMware 虚拟机 网络配置（NAT模式）

    新安装虚拟机,需要配置网络环境,才可以使用ssh客户端(如xshell)远程登录 和 虚拟机访问Internet. 一. WMware 软件配置 WMware版本号:11.0.0 build-2305 ...