js子节点children和childnodes的用法(非原创)
想要获取子节点的数量，有几种办法。
childNodes
它会把空的文本节点当成节点，
<ul>
文本节点
<li>元素节点</li>
文本节点
<li>元素节点</li>
文本节点
</ul>
所以childNodes.length就是5
而另一种方法
Children
就不用担心
它只显示元素节点即使是非空的文字节点也不显示。
最后，还有一种方法。
NodeType、节点类型。
nodeType=3-------------->文本节点
nodeType=1------------->元素节点
请注意子节点只算第一层的，孙子节点不在子节点的范畴内。
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Document</title>
8 <script type="text/javascript">
9 window.onload=function(){
10 var oUl=document.getElementById("ul");
11 var span1=document.getElementById("span1");
12 var span2=document.getElementById("span2");
13 var span3=document.getElementById("span3");
14 var sum=0;
15 span1.innerHTML=oUl.children.length+"";
16 span2.innerHTML=oUl.childNodes.length+"";
17 for(var i=0;i<oUl.childNodes.length;i++){
18 if(oUl.childNodes[i].nodeType==1){
19 sum++;
20 }
21 }
22 span3.innerHTML=sum+"";
23
24 }
25 </script>
26 </head>
27 <body>
28 <ul id="ul">
29 <li>aaa</li>
30 <li>bbb</li>
31 ccc
32 </ul>
33 children显示的节点数：
34 <span id="span1"></span>
35 <br/>
36 chileNodes显示的节点数：
37 <span id="span2"></span>
38 <br/>
39 nodeType为1的节点数：
40 <span id="span3"></span>
41 <br/>
42 </body>
43 </html>
js子节点children和childnodes的用法(非原创)的更多相关文章
- js子节点children和childnodes的用法
想要获取子节点的数量,有几种办法. childNodes 它会把空的文本节点当成节点, <ul> 文本节点 <li>元素节点</li> 文本节点 <li> ...
- 使用JavaScript访问子节点方法elementNode.childNodes时，需要注意的地方
有这样一个HTML结构 <div> javascript <p>javascript</p> <div>jQuery</div> <h ...
- 问题：jQuery中遍历XML文件时候，获取子节点children不支持的情况（已解决）
问题描述: 今天在写一个基于 jquery 的读取xml文件的程序时候,需要遍历xml的节点. 代码片段如下: function parse_xml_node(parent,result){ // r ...
- JS中，children和childNodes的不同之处
<ul id="ul"><li></li><li></li><li><span></spa ...
- js - 子节点
子节点数量:this.wdlgLossInfo.childNodes.length
- js，jq获取父，兄弟，子节点整理
js获取节点 父: parentNode 获取已知节点的父节点. 子: childNodes; 得到全部子节点 children 得到全部子节点 firstChild 获得第一个子节点 lastChi ...
- 5月25日-js操作DOM遍历子节点
一.遍历节点 遍历子节点 children();//获取节点的所有直接子类 遍历同辈节点 next(); prev(); siblings();//所有同辈元素 *find(); 从后代元素中查找匹配 ...
- DOM访问关系（父节点 子节点）
把下面的知识点掌握了,可以做一下下面的案例,都是工作中常用的,很有用 知识点 1.带Eleent和不带区别 a)带Element的获取的是元素节点 b)不带Element的获取文本 ...
- JQuery获取子节点的第一个元素
$.children()//全部子节点 $.children(':first')//子节点的第一个
随机推荐
- office 激活教程
首先在我的百度云里下载:http://pan.baidu.com/share/link?shareid=2200272243&uk=1985086665激活工具安装包 如果遇到问题,可以加我Q ...
- pycharm git无法使用问题（待解决）
PyCharm 2017.3.1 (Community Edition)Build #PC-173.3942.36, built on December 14, 2017JRE: 1.8.0_152- ...
- HDU - 3973 AC's String（Hash+线段树）
http://acm.hdu.edu.cn/showproblem.php?pid=3973 题意 给一个词典和一个主串.有两种操作,查询主串某个区间,问这主串区间中包含多少词典中的词语.修改主串某一 ...
- Javaweb学习笔记——（七）——————myexlipse基本使用、jdk5.0新特性及反射讲解
1.debug调试模式: *使用这种模式,调试程序(看到程序运行停止在这一行) -显示出来行号 -双击左边,出现一个圆点,表示设置了一个断点 *使用debug as方式,运行程序 -特使是否进入到调试 ...
- buildroot构建项目（三）--- u-boot 2017.11 适配开发板修改 1
当前虽然编译成功了,但是对于我们自己的目标板并不太适用.还得做一系列得修改. 一.lds 文件分析 u-boot 中最重要得链接文件即是,u-boot.lds.我们可以查看我们编译出来得 u-boot ...
- Linux - openssl 加密
openssl rand 15 -base64 # 口令生成 openssl sha1 filename # 哈希算法校验文件 openssl md5 filename # MD5校验文件 opens ...
- MySQL中查询行数最多的表并且排序
#切换到schema use information_schema; #查询数据量最大的30张表 并排序 select table_name,table_rows from tables order ...
- python作业简单FTP（第七周）
作业需求: 1. 用户登陆 2. 上传/下载文件 3. 不同用户家目录不同 4. 查看当前目录下文件 5. 充分使用面向对象知识 思路分析: 1.用户登陆保存文件对比用户名密码. 2.上传用json序 ...
- Python 入门基础13 --模块与包
本节内容: 一.模块及使用 1.模块及使用 2.起别名.from导入 3.自执行与模块 二.包的使用 2.1 包中模块的使用:import 2.2 包的嵌套 2.3 包中模块的使用:from ...i ...
- adb shell dumpsys meminfo [packagename] 输出内容的含义
Private Dirty:私有的脏内存页(还在使用中)的大小: Private Clean:私有的干净内存页(现在未使用了)的大小: 以上这二者相加,便是应用曾经申请过的内存空间大小.Priva ...