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

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. HDU 1556 Color the ball (一维树状数组,区间更新,单点查询)

    中文题,题意就不说了 一开始接触树状数组时,只知道“单点更新,区间求和”的功能,没想到还有“区间更新,单点查询”的作用. 树状数组有两种用途(以一维树状数组举例): 1.单点更新,区间查询(即求和) ...

  2. Fourteenth scrum meeting

    闫昊 今日完成:整理上一阶段代码,规划第二阶段实施过程 明日完成:学习讨论区开发 唐彬 今日完成:整理上一阶段代码,规划第二阶段实施过程 明日完成:学习学习进度部分开发 史烨轩 今日完成:整理上一阶段 ...

  3. "1001. A+B Format (20)" 解题报告

    Github : git@github.com:Circlecos/object-oriented.git PDF Of Markdown : "1001. A+B Format (20)& ...

  4. Maya学习笔记

    软件: Maya 2016 : 参考教材: Maya 2016 中文版标准教程 ; 改变视图颜色 [窗口]|[设置/首项选择]|[颜色设置]|[3D视图]: 观察视图 旋转视图 Alt + 鼠标左键 ...

  5. Week4-作业1:《构建之法》第四章、第十七章 阅读笔记与思考

    第四章 两人合作   这一章是讲述了两人结对编程的一些东西,包括一些代码的规范,还有结对编程的优点.怎么做.以及一些注意事项. 1.“错误处理 当程序的主要功能实现后,一些程序员会乐观地估计只需要另外 ...

  6. Alpha阶段综合报告

    1.版本测试报告 1.1在测试过程中总共发现了多少Bug?每个类别的Bug分别为多少个? Bug分类 Bug内容 Fixed 编辑博文时改变文字格式会刷新界面 Can’t reproduced 无 N ...

  7. Mac OS10.10 openfire无法启动问题

    1.我用的Java版本是Version 8 Update 51,验证方法可到这个网址下去验证http://www.java.com/zh_CN/download/installed.jsp 2.ope ...

  8. Scrum Meeting Beta - 10

    Scrum Meeting Beta - 10 NewTeam 2017/12/11 地点:新主楼F座二楼 任务反馈 团队成员 完成任务 计划任务 安万贺 完成了作业详情的本地存储Issue #165 ...

  9. svmtrain和svmpredict简介

    转自:http://blog.sina.com.cn/s/blog_4d7c97a00101bwz1.html 本文主要介绍了SVM工具箱中svmtrain和svmpredict两个主要函数: (1) ...

  10. koa中接收前台传递的各种数据类型的方式

    标签(空格分隔): koa 数据类型接收 主要介绍三种会用到的中间件,其实都是自己在开发的过程中踩过的坑 首先介绍koa-body [详情介绍 https://github.com/dlau/koa- ...