想要获取子节点的数量，有几种办法。

childNodes

它会把空的文本节点当成节点，

<ul>

文本节点

<li>元素节点</li>

文本节点

<li>元素节点</li>

文本节点

</ul>

所以childNodes.length就是5

而另一种方法

Children

就不用担心

它只显示元素节点即使是非空的文字节点也不显示。

最后，还有一种方法。

NodeType、节点类型。

nodeType=3-------------->文本节点

nodeType=1------------->元素节点

请注意子节点只算第一层的，孙子节点不在子节点的范畴内。

 <!DOCTYPE html>

 <html lang="en">

 <head>

   <meta charset="UTF-8">

   <meta name="viewport" content="width=device-width, initial-scale=1.0">

   <meta http-equiv="X-UA-Compatible" content="ie=edge">

   <title>Document</title>

   <script type="text/javascript">

     window.onload=function(){

       var oUl=document.getElementById("ul");

       var span1=document.getElementById("span1");

       var span2=document.getElementById("span2");

       var span3=document.getElementById("span3");

       var sum=0;

       span1.innerHTML=oUl.children.length+"";

       span2.innerHTML=oUl.childNodes.length+"";

       for(var i=0;i<oUl.childNodes.length;i++){

         if(oUl.childNodes[i].nodeType==1){

           sum++;

         }

       }

       span3.innerHTML=sum+"";

     }

   </script>

 </head>

 <body>

   <ul id="ul">

     <li>aaa</li>

     <li>bbb</li>

     ccc

   </ul>

   children显示的节点数：

   <span id="span1"></span>

   <br/>

   chileNodes显示的节点数：

   <span id="span2"></span>

   <br/>

   nodeType为1的节点数：

   <span id="span3"></span>

   <br/>

 </body>

 </html>

js子节点children和childnodes的用法的更多相关文章

  1. js子节点children和childnodes的用法(非原创)

    想要获取子节点的数量,有几种办法. childNodes 它会把空的文本节点当成节点, <ul> 文本节点 <li>元素节点</li> 文本节点 <li> ...

  2. 使用JavaScript访问子节点方法elementNode.childNodes时，需要注意的地方

    有这样一个HTML结构 <div> javascript <p>javascript</p> <div>jQuery</div> <h ...

  3. 问题：jQuery中遍历XML文件时候，获取子节点children不支持的情况（已解决）

    问题描述: 今天在写一个基于 jquery 的读取xml文件的程序时候,需要遍历xml的节点. 代码片段如下: function parse_xml_node(parent,result){ // r ...

  4. JS中，children和childNodes的不同之处

    <ul id="ul"><li></li><li></li><li><span></spa ...

  5. js - 子节点

    子节点数量:this.wdlgLossInfo.childNodes.length

  6. js，jq获取父，兄弟，子节点整理

    js获取节点 父: parentNode 获取已知节点的父节点. 子: childNodes; 得到全部子节点 children 得到全部子节点 firstChild 获得第一个子节点 lastChi ...

  7. 5月25日-js操作DOM遍历子节点

    一.遍历节点 遍历子节点 children();//获取节点的所有直接子类 遍历同辈节点 next(); prev(); siblings();//所有同辈元素 *find(); 从后代元素中查找匹配 ...

  8. DOM访问关系（父节点 子节点）

    把下面的知识点掌握了,可以做一下下面的案例,都是工作中常用的,很有用 知识点   1.带Eleent和不带区别     a)带Element的获取的是元素节点     b)不带Element的获取文本 ...

  9. JQuery获取子节点的第一个元素

    $.children()//全部子节点 $.children(':first')//子节点的第一个

随机推荐

  1. bootstrap轮播图不能显示左右箭头

    引入font文件夹即可 原文 :http://www.imooc.com/qadetail/64277

  2. Scrum Meeting 11.1

    成员 今日任务 明日计划 用时 徐越 学习利用servlet上传下载文件 代码迁移 4h 赵庶宏 数据库的连接及代码学习 数据库连接 2h 武鑫 设计界面;尝试写一些初步的代码,独立完成一些简单界面 ...

  3. OO最后一次总结

    测试与正确性论证 Dijkstra说过:“程序测试只能证明程序有错,不能证明程序正确.”所谓程序测试,实际上是测试者特意挑出一批检查数据,通过运行程序,检查每个输入数据所对应的运行结果是否符合预期要求 ...

  4. 实验1 熟悉Linux开发环境 实验报告

    参见http://www.cnblogs.com/lhc-java/p/4970269.html

  5. java集合ArrayList

    基于jdk_1.8.0 关于List,主要是有序的可重复的数据结构.jdk主要实现类有ArrayList(底层使用数组).LinkedList(底层使用双向链表) ArrayList: (一)继承关系 ...

  6. week2：个人博客作业

    1.这周写程序感想: 昨天差不多,也是这个时候看些的程序,写了4个小时程序,感触颇多.昨日,原打算,就完成程序就吧这个随笔写完结果,由于各种原因,没写一直拖到现在.就做昨天写的程序,本身题目很简单,主 ...

  7. Maven解读:强大的依赖体系

    Github地址:https://github.com/zwjlpeng/Maven_Detail Maven最大的好处就是能够很方便的管理项目对第三方Jar包的依赖,只需在Pom文件中添加几行配置文 ...

  8. windows下的C++ socket服务器（2）

    int main(int ac, char *av[]) { ); ) { exit(); } thread t; ) { int socket_fd = accept(tcp_socket, nul ...

  9. 最近JavaScript的一些收获

    开发习惯的上的收获 1,开发过程中,要让整个逻辑展示在一个函数中,中间部分则做可以考虑公用策略优化 2,开发完成至少有三个角度进行测试,正面方面和中立 开发技巧上面的收获 1,驼峰转为‘-’以及‘-’ ...

  10. 通过ctrl+r快速启动程序

    步骤1:在[我的电脑]右键-[系统属性]-[环境变量]中增加如图1设置并保存 步骤2:在图2中添加步骤1中增加的变量名并保存 步骤3:在ctrl+r的运行窗口中输入步骤1中的变量名即可快速启动程序   ...