childNodes属性可以用来获取任何一个元素的所有子元素,它是一个包含这个元素的全部子元素的数组:
element.childNodes

如果需要把某个文档的body元素的全体子元素检索出来。首先使用getElementsByTagName得到body元素。
因为每份文档只有一个body元素,所以它将是getElementsByTagName("body")方法所返回的数组中的第一个(也是唯一一个)元素:
var body_element = document.getElementsByTagName("body")[0];

现在变量body_element已经指向了那个文档的body元素。接下来可以用如下所示语法获取body元素的全体子元素:
body_element.childNodes
这显然比下面这样写简明多了:
document.getElementsByTagName("body")[0].childNodes
现在已经知道如何获取body元素的全体子元素了,接下来看看这些信息的用途。
首先可以精确的查处body元素一共有多少个子元素。因为childNodes属性返回的是一个数组,所以用数组的length属性就可以知道它所包含的元素的个数:
body_element.childNodes.length;
定义一个函数把上述代码放到函数里:
function countBodyChildren()
{
var body_element = document.getElementsByTagName("body")[0];
alert(body_element.childNodes.length);
}
这个函数将弹出一个alert对话框,显示body元素的子元素的总个数。
我想让这个函数在页面加载时执行,需要使用onload事件处理函数。
window.onload = countBodyChildren;
刷行页面,你会看到一个alert对话框,显示body元素的子元素的总个数。

事实上,countBodyChildren()函数给出来的数字可能会让你大吃一惊,假设body元素有3个子元素,分别是h1、ul、img元素。但countBodyChildren()函数
给出的数字却远大于此,这是因为文档树的节点类型并非只有元素节点一种。

childNodes属性返回的数组包含所有类型的节点,而不仅仅是元素节点。事实上,文档里几乎每一样东西都是一个节点,甚至包括空格和换行符都会被解释
为节点,而它们也全都包含在childNodes属性所返回的数组当中。

还好每一个节点都有nodeType属性。这个属性可以让我们知道自己正在与哪一种节点打交道。
用下面的语法获取节点的nodeType属性:
node.nodeType
nodeType的值是一个数字而不是像"element"或"attribute"那样的英文字符串。
可以把countBodyChildren()函数中alert语句替换为下面这条语句,这样我们就可以知道body_element元素的nodeType属性了:
alert(body_element.nodeType);
重新刷新页面将看到显示数字"1"。换句话说,元素节点的nodeType的属性值是1。
nodeType属性总共有12种可取值,其中仅有3种具有实用价值。

元素节点的nodeType属性值是1。
属性节点的nodeType属性值是2。
文本节点的nodeType属性值是3。

这就意味着,可以让函数只对特定类型的节点进行处理。

childNodes属性 和 nodeType属性的更多相关文章

  1. JavaScript之childNodes属性、nodeType属性学习

    1.childNodes属性:在一颗节点树上,childNodes属性可以用来获取任何一个元素的所有元素,它是一个包含这个元素所有子元素的数组. <body> <script typ ...

  2. nodeType属性在vue源码中的使用

    每个节点都有一个 nodeType 属性,用于表明节点的类型,节点类型由 Node 类型中定义12个常量表示:  nodeType在vue中的应用 在vue编译的过程中需要查找html结构中的双大括号 ...

  3. HTML DOM 的nodeType属性

    在HTML DOM中每一部分都是节点: HTML元素是元素节点 HTML中属性是属性节点 文本是文本节点 注释是注释节点 这时我们要给它区分开我们就可以使用HTML DOM的nodeType属性 no ...

  4. HTML DOM nodeType 属性

    实例 获得 body 元素的节点类型: document.body.nodeType; 结果: 1 定义和用法 nodeType 属性返回以数字值返回指定节点的节点类型. 如果节点是元素节点,则 no ...

  5. JavaScript之firstChild属性、lastChild属性、nodeValue属性学习

    1.数组元素childNodes[0]有更直观易读的优点,这边在介绍一个有同样功能的属性,且更加语义化-------->firstChild属性 假设我们需要目标元素节点下的所有子元素中的第一个 ...

  6. js nextSibling属性和previousSibling属性概述及使用注意

    1:nextSibling属性 该属性表示当前节点的下一个节点(其后的节点与当前节点同属一个级别):如果其后没有与其同级的节点,则返回null. 需要特别注意的是:该属性在不同的浏览器中的执行结果并不 ...

  7. APUE学习之多线程编程(三):线程属性、同步属性

    一.线程属性      可以使用pthread_attr_t结构修改线程默认属性,并这些属性和创建的线程练习起来,可以使用pthread_att_init函数初始化pthread_attr_t结构,调 ...

  8. jquery html属性和text属性的区别

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. 【Python】[面性对象编程] 获取对象信息,实例属性和类属性

    获取对象信息1.使用isinstance()判断class类型2.dir() 返回一个对象的所有属性和方法3.如果试图获取不存在的对象会抛出异常[AttributeError]4.正确利用对象内置函数 ...

随机推荐

  1. 64位平台支持大于2 GB大小的数组

    64位平台支持大于2 GB大小的数组 64位平台.NET Framework数组限制不能超过2GB大小.这种限制对于需要使用到大型矩阵和向量计算的工作人员来说,是一个非常大问题. 无论RAM容量有多大 ...

  2. Ibatis ISqlMapper工厂类案例

    namespace Model{ public class MapperFactory { //声明一个ISqlMapper接口类型的数据映射器 _mapper,其初始值为null private s ...

  3. Java(5/6和8)中interface和Abstract Class

    这篇文章主要是自己在使用java的过程中对自己一些之前常困惑的问题的一些总结. 正如题目所言,这篇博客主要是讨论java中的接口与抽象类的区别,有自己的使用心得,以及自己平时在使用的过程中遇到的问题及 ...

  4. Content Negotiation(内容协商)

    Asp.Net Web API 2第十四课——Content Negotiation(内容协商)   前言 阅读本文之前,您也可以到Asp.Net Web API 2 系列导航进行查看 http:// ...

  5. .Net 异步随手记(二)

    Task.ContinueWith 这货,和 await 一样有“陷阱”.^^,因为写 ContinueWith 不能直观如人的“过程性”思维,写在 ContinueWith 括号里的部分不一定只在发 ...

  6. java用正则表达式获取domain

    在工作中经常用到获取url的来源和域名的黑白名单功能.前段时间写了一个获取url中域名的方法.但是在测试过程中发现有些小问题. /** * 根据URL获取domain * @param url * @ ...

  7. JavaEE:Cookie和Session

    Cookie是客户端技术,程序把每个用户的数据以cookie的形式写给用户各自的浏览器.当用户使用浏览器再去访问服务器中的web资源时,就会带着各自的数据去.这样web资源处理的就是用户各自的数据了. ...

  8. MacOSX64位机器上gcc编译32位x264静态库

    x264最新包地址:http://www.videolan.org/developers/x264.html 编译命令: ./configure --enable-static --host=i386 ...

  9. Linux IO控制命令生成

    在驱动程序里, ioctl() 函数上传送的变量 cmd 是应用程序用于区别设备驱动程序请求处理内容的值.cmd除了可区别数字外,还包含有助于处理的几种相应信息. cmd的大小为 32位,共分 4 个 ...

  10. 从零开始学C++之构造函数与析构函数(三):深拷贝与浅拷贝、空类

    一.深拷贝与浅拷贝 说得简单点,假设一个类有指针成员,如果在拷贝的时候顺带连指针指向的内存也分配了,就称为深拷贝:如果只是分配指针本身的内存,那就是浅拷贝.浅拷贝造成的问题是有两个指针指向同块内存,d ...