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

<body>

        <script type="text/javascript">

            function countBodyChildren() {

                var allelements = document.getElementsByTagName("body");

                alert(allelements[0].childNodes.length);

        }

        window.onload = countBodyChildren;

</script></body>

输出：3；这句代码的意思是输出<body></body>标签下所有的子元素数量；

那2么为什么是3呢,下面我要用到另一个属性nodeType属性来解释为什么会是3！

2.nodeType属性总共有12种可取值,但其中仅有三种具有实用价值。

(1)元素节点的nodeType属性值是1.

(2)属性节点的nodeType属性值是2.

(3)文本节点的nodeType属性值是3.

<body>

    <script type="text/javascript">

        function countBodyChildren() {

            var childelements = document.getElementsByTagName("body")[0];

            alert(childelements.childNodes[0].nodeType);

        }

        window.onload = countBodyChildren;

    </script>

</body>

输出：3.说明body下第一个子节点是文本节点；

<body>

    <script type="text/javascript">

        function countBodyChildren() {

            var childelements = document.getElementsByTagName("body")[0];

            alert(childelements.childNodes[1].nodeType);

        }

        window.onload = countBodyChildren;

    </script>

</body>

输出：1.说明body下第二个子节点是元素节点(<script></script>)；

<body>

    <script type="text/javascript">

        function countBodyChildren() {

            var childelements = document.getElementsByTagName("body")[0];

            alert(childelements.childNodes[2].nodeType);

        }

        window.onload = countBodyChildren;

    </script>

</body>

输出：3.说明body下第三个子节点还是文本节点；

观察上面结论得出：html标签如<a></a>等都是元素节点、标签里面的文本内容都是文本节点、标签里面的属性如title,href都是属性节点。

注意:html标签之间的空格会被解释称文本节点；

做个测试->看如下代码:

<body><script type="text/javascript">function countBodyChildren(){var childelements = document.getElementsByTagName("body")[0];alert(childelements.childNodes[2].nodeType);}window.onload = countBodyChildren;</script></body>

这段代码会报错:因为这种代码排版下,body下只有2个子节点,第一个是:元素节点,第二个是<script></script>间的文本节点；

注意:文本节点的个数不是按照空格的个数,或者是文字的个数来计算的。

会了nodeType这个属性,就意味着,我们可以对特定的节点进行处理,例如，我们可以变出一个完全只处理元素节点的函数。

JavaScript之childNodes属性、nodeType属性学习的更多相关文章

  1. HTML DOM 的nodeType属性

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

  2. childNodes属性 和 nodeType属性

    childNodes属性可以用来获取任何一个元素的所有子元素,它是一个包含这个元素的全部子元素的数组:element.childNodes 如果需要把某个文档的body元素的全体子元素检索出来.首先使 ...

  3. JavaScript中childNodes、children、nodeValue、nodeType、parentNode、nextSibling详细讲解

    其中属性.元素(标签).文本都属于节点 <title></title> <scripttype="text/javascript"> windo ...

  4. Javascript进阶篇——(DOM—节点---属性、访问节点)—笔记整理

    节点属性在文档对象模型 (DOM) 中,每个节点都是一个对象.DOM 节点有三个重要的属性 : 1. nodeName : 节点的名称 2. nodeValue :节点的值 3. nodeType : ...

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

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

  6. JavaScript中的方法和属性

    书读百遍其义自见 学习<JavaScript设计模式>一书时,前两个章节中的讲解的JavaScript基础知识,让我对属性和方法有了清晰的认识.如下是我的心得体会以及部分摘录的代码. 不同 ...

  7. 深入理解javascript对象系列第二篇——属性操作

    × 目录 [1]查询 [2]设置 [3]删除[4]继承 前面的话 对于对象来说,属性操作是绕不开的话题.类似于“增删改查”的基本操作,属性操作分为属性查询.属性设置.属性删除,还包括属性继承.本文是对 ...

  8. javascript继承(一)—类的属性研究

    本篇文章主要针对javascript的属性进行分析,由于javascript是一种基于对象的语言,本身没有类的概念,所以对于javascript的类的定义有很多名字,例于原型对象,构造函数等,它们都是 ...

  9. JavaScript的检测属性、属性特性、枚举属性

    /* 检测属性 检测属性可以通过三种方式 1.通过in运算符 2.通过hasOwnPerperty() 如果给定的属性是继承属性将返回false 3.通过propertyIsEnumerable(): ...

随机推荐

  1. CC++初学者编程教程(10) 搭建Android java C/C++ NDK QTforAndroid 开发环境

    1 安装JDK 2 点下一步 3 点下一步 4 开始安装 5 定制路径,点下一步 6 开始安装 7 安装完成, 8 解压缩 9 启动eclipse 10 看到启动画面 11 设置工作文件夹 12 单击 ...

  2. C语言入门（17）——C语言数组应用的一个实例

    本篇通过一个实例介绍使用数组的一些基本模式.问题是这样的:首先生成一列0-9的随机数保存在数组中,然后统计其中每个数字出现的次数并打印,检查这些数字的随机性如何.随机数在某些场合(例如游戏程序)中是非 ...

  3. #include <fstream>

    1 fstream 2 ifstream 3 ofstream 4 seekg 5 seekp 6 tellg 7 tellp 1 fstream 打开输入输出文件流 #include <ios ...

  4. 【转】C#自定义控件：WinForm将其它应用程序窗体嵌入自己内部

    PS:文末的附件已更新,这次我放到博客园里面了,不会弹出广告,放心下载,O(∩_∩)O谢谢! 这是最近在做的一个项目中提到的需求,把一个现有的窗体应用程序界面嵌入到自己开发的窗体中来,看起来就像自己开 ...

  5. 如何使用dynamic

    DataTable dt = new DataTable("TableOne"); dt.Columns.Add("ID", typeof(int));     ...

  6. windows编程之菜单操作

    分清几个概念 <1>"主菜单" 和 "顶层菜单" 是一个意思. <2>主菜单中的项目叫做 "弹出菜单" 或者 &qu ...

  7. CRM odata方法如何使用$top

    odata方法 $top $top1 取1个 ￥top100取100个,放在$select前,中间用&符号隔开. 例如: var activeserviceReq = "/xrmse ...

  8. vb.net常用函数

    当然,这些都可以从MSDN查到,但是有时候打开帮助老慢的,所以先放到这里放一放,查个函数什么的比较快一点.都是从网上搜来的.Abs(number) 取得数值的绝对值. Asc(String) 取得字符 ...

  9. 与后台进行连接，mysql模块 第六篇

    var mysql = require("mysql"); var client = function(sql, callback) { var db = mysql.create ...

  10. TCP/IP的三次握手协议

    关于TCP/IP的三次握手协议,这篇文章中有详细的介绍,很通俗易懂,什么时候忘了,都可以过来瞧两眼,保证很快就明白了. 首先TCP/IP协议分为三个阶段:建立连接(握手阶段),数据传输阶段,连接终止阶 ...