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

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. PHP的垃圾回收

    PHP使用引用计数和写时拷贝(Copy-On-Write)来管理内存. 引用技术不言自明,写时拷贝工作原来如下: $worker = array("Fred", 35, " ...

  3. PC端上必应词典与金山词霸的测评分析

    1.  介绍 随着英语学习越来越普及,基本上现在每位大学生的电脑上都会有一款便捷的英语查词软件,这次我们团队选择测评的 是微软必应词典(3.5.0.4311)和金山词霸(2014.05.16.044) ...

  4. 2018-2019-20172321 《Java软件结构与数据结构》第九周学习总结

    2018-2019-20172321 <Java软件结构与数据结构>第九周学习总结 教材学习内容总结 第15章 图 无向图 图由顶点和边组成. 顶点由名字或标号来表示,如:A.B.C.D: ...

  5. 第二阶段每日站立会议Forth Day

    昨天对于程序中的字体显示进行细化修改,使界面更美观 今天准备继续调试手机界面 遇到的问题:上几次Tomcat运行正常,今天突然出现问题,Tomcat服务可以打开,但是无法连接到数据库

  6. 【Coursera】主成分分析

    一.问题 主方向的概念是什么?为什么降低维度的方法是使方差最大化? 假设某两个特征之间成线性关系,在二维平面上的表示就是数据点呈线性分布,那么可以通过将数据在主方向上进行投影,得到一个一维的数据,这个 ...

  7. Request[""]接收的值有逗号（，）

    这是因为你的前台页面有连个标签的name值相等导致的.Request["name"]其实是通过name值或得标签的value值的. 所以一般情况下name值不要相等. 需要互斥的就 ...

  8. 代码上传不到github远程仓库的经历和总结

    第二次的作业是分布式版本控制系统Git的安装与使用.一切都好端端地进行,知道最后的上传到给远程仓库时一直都上传失败.舍友也过来调试和助教的指导,依然不成功.我也上网进行了大量的翻查资料也未能成功.这是 ...

  9. Beta阶段团队项目开发篇章1

    例会时间:2016.12.1 例会照片: 个人工作: 任务分配: 组员 任务内容 李文涛 编写并发布调查问卷 姬索肇 审核并传播调查问卷 韩慧敏 审核并传播调查问卷 任务截止时间 2016.12.4 ...

  10. 词频统计的java实现方法——第一次改进

    需求概要 原需求 1.读取文件,文件内包可含英文字符,及常见标点,空格级换行符. 2.统计英文单词在本文件的出现次数 3.将统计结果排序 4.显示排序结果 新需求: 1.小文件输入. 为表明程序能跑 ...