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')//子节点的第一个
随机推荐
- go struct结构体
struct结构体 用来自定义复杂数据结构 struct里面可以包含多个字段(属性),字段可以是任意类型 struct类型可以定义方法,注意和函数的区分 struct类型是值类型 struct类型可以 ...
- Nginx 403 forbidden多种原因及故障模拟重现
访问Nginx出现状态码为403 forbidden原因及故障模拟 1) nginx配置文件里不配置默认首页参数或者首页文件在站点目录下没有 1 index index.php index.html ...
- tomcat配置好后，启动eclipse中的server，不能出现有猫的页面，提示404
原因:tomcat与eclipse中的server未关联起来 解决办法:双击servers中的server,在Server Locations中选中第二项,保存之后再进行刚才的操作就好了.
- Gym - 100085G - GCD Guessing Game
原题链接 题意一个数字x在1-n之间,现在猜数字,每次猜一个数字a,告知gcd(x, a)的答案,问最坏情况下需要猜几次 分析 考虑素数.当猜的数为一组素数的乘积时,就可以把这些素数都猜出来.那么答案 ...
- toFixed方法的bug
最近在工作过程中碰到一个隐藏的bug,经调试发现竟然是toFixed函数不可靠的结果引起的.后端同学在处理价格比较的时候,用foFixed进行价格的四舍五入之后,竟然发现比较的结果有问题: 大家都知道 ...
- 液晶数字显示屏QLCDNumbe
import sys from PyQt5.QtWidgets import QApplication, QWidget, QLCDNumber, QVBoxLayout class Demo(QWi ...
- jQuery——Js与jQuery的相互转换
$()与jQuery() jQuery中$函数,根据传入参数的不同,进行不同的调用,实现不同的功能.返回的是jQuery对象 jQuery这个js库,除了$之外,还提供了另外一个函数:jQuery j ...
- js获取对象的最后一个
Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组,数组中属性名的排列顺序和使用 for...in 循环遍历该对象时返回的顺序一致 (两者的主要区别是 一个 for-i ...
- 2018-2019-2 网络对抗技术 20165320 Exp4 恶意代码分析
2018-2019-2 网络对抗技术 20165320 Exp4 恶意代码分析 一.实践目标 监控你自己系统的运行状态,看有没有可疑的程序在运行 分析一个恶意软件,就分析Exp2或Exp3中生成后门软 ...
- java的一维数组
数组的基础知识: 数组一旦创建,它的的大小是固定的.使用一个数组引用变量,通过下标来访问数组中的元素. 初始化数组的方法: 复制数组的方法: 1.使用循环语句逐个地复制数组的元素 2.使用System ...