一、概念理解：

关于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. SWIM接口及STM8烧录过程

    1. 硬件连接 SWIM接口只需要一根传输线,即可完成双向的传输.传输过程,都是由主控制端(host)发起,设备端然后做出反应.host端需要在一个总线上实现读和写,那就是说必须要同时接一个输出IO和 ...

  2. 前端UI框架整理

    JQuery Jquery官网:http://jquery.com/ jQuery是一个快速,小巧,且功能丰富的JavaScript库. Jquery-1.11.3.min.js 压缩版:http:/ ...

  3. SSH实现在WIN7系统下访问虚拟机中的Linux系统

    使用的是centos6.4进行练习的,安装的是vmware8虚拟机.以下是总结的一些步骤: 一.确保vmware使用NAT的连接方式,如做地址.端口映射 首先查看vmware的中网络连接的一些方式:E ...

  4. easyui Combotree 怎么加载数据 支持多选

    1.开发环境vs2012 mvc4  c# 2.HTML前端代码 <%@ Page Language="C#" AutoEventWireup="true" ...

  5. launchMode之的几种取值

    Activity的launchMode launchMode之standard   ·标准模式.每次激活Activity时均在当前任务栈中创建新的实例. 在配置文件里把activity节点的属性配置为 ...

  6. 深入浅出谈DM

  7. 怎样把word直接转换成ppt

  8. 在react jsx中，为什么使用箭头函数和bind容易出现问题

    在之前的文章中,已经说明如何避免在react jsx中使用箭头函数和bind(https://medium.freecodecamp.o... 但是没有提供一个清晰的demo展示为什么要这样做. 现在 ...

  9. 使用webpack4搭建一个基于Vue的组件库

    组内负责的几个项目都有一些一样的公共组件,所以就着手搭建了个公共组件开发脚手架,第一次开发 library,所以是参考着 iview 的配置来搭建的.记录如何使用webpack4搭建一个library ...

  10. 浅淡!important对CSS的重要性

    SS中的!important是一个非常重要的属性,有时候发挥着非常大的作用,52CSS.com这方面的知识并不是非常多,我们看下面的文章,对它作比较感观的了解. 前几天写一些CSS代码的时候又难为我了 ...