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

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. dos2unix命令详解

    基础命令学习目录首页 原文链接:https://blog.csdn.net/leedaning/article/details/53024290 使用git 的时候碰到git将unix换行符转换为wi ...

  2. 【quickhybrid】如何实现一个Hybrid框架

    章节目录 [quickhybrid]如何实现一个跨平台Hybrid框架 [quick hybrid]架构一个Hybrid框架 [quick hybrid]H5和Native交互原理 [quick hy ...

  3. Daily Scrumming* 2015.11.2（Day 14）

    一.今明两天任务表 Member Today’s Task Tomorrow’s Task 江昊 实现前后端整合 继续实现前后端整合 杨墨犁 修改好首页 开始实现社团页 付帅 测试api 继续测试并完 ...

  4. c# 程序重启设定

    问题情境: 程序随着时间运行,越来越大.暂时想到的两种方法,一是反攻代码,查看占内存大的函数,是不是没有回收.再就是暴力设定程序定时重启. 解决原理: 定时重启:暂设定timer,时间匹配执行rest ...

  5. Task 4.3 求环形数组的最大子数组和

    任务要求:输入一个整形数组,数组里有正数也有负数. 数组中连续的一个或多个整数组成一个子数组,每个子数组都有一个和.    如果数组A[0]……A[j-1]首尾相邻,允许A[i-1], …… A[n- ...

  6. Web应用程序的基本安全实践

    创建安全Web应用程序的主题非常广泛.它需要研究以了解安全漏洞.您还需要熟悉Windows..NET框架和ASP.NET的安全设施.最后,有必要了解如何使用这些安全特性来对付威胁. 即使您没有安全方面 ...

  7. 利用CNN进行多分类的文档分类

    # coding: utf-8 import tensorflow as tf class TCNNConfig(object): """CNN配置参数"&qu ...

  8. MapReduce编程之Map Join多种应用场景与使用

    Map Join 实现方式一:分布式缓存 ● 使用场景:一张表十分小.一张表很大. ● 用法: 在提交作业的时候先将小表文件放到该作业的DistributedCache中,然后从DistributeC ...

  9. Python入门：条件控制

    条件控制其实就是if...else...(如果...条件是成立的,就做...:反之,就做...)的使用,其基本结构是: 具体看下面这个例子: def account_login(): # 定义函数 p ...

  10. PHP学习心得2

    对于PHP的语法结构,刚开始真的很不习惯,真搞不懂为什么每个变量之前都要加个“$”符号,每个语句写完之后都必须加上“分号”来表示此句已经结束,还有,PHP对字母的大小写是敏感的,写的时候一定要注意大小 ...