js子节点children和childnodes的用法
想要获取子节点的数量,有几种办法。
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的用法的更多相关文章
- 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')//子节点的第一个
随机推荐
- NDK 链接第三方静态库的方法
将NDK编译的第三方静态拷贝到JNI目录下,在Android.mk中添加如下代码 以openssl静态库(libcrypto-static.a)为例 第一种链接方法:LOCAL_LDFLAGS := ...
- bg,fg,job命令详解
基础命令学习目录首页 原文链接:http://www.cnblogs.com/chjbbs/p/6307333.html linux提供的fg和bg命令,可以让我们轻松调度正在运行的任务 假如你发现前 ...
- 3.控制hive map reduce个数
参考: https://blog.csdn.net/wuliusir/article/details/45010129 https://blog.csdn.net/zhong_han_jun/arti ...
- nginx模块学习
rewrite模块的语法 链接
- CF 1095C Powers Of Two(二进制拆分)
A positive integer xx is called a power of two if it can be represented as x=2y, where y is a non-ne ...
- (第十周)Beta-2阶段成员贡献分
项目名:食物链教学工具 组名:奋斗吧兄弟 组长:黄兴 组员:李俞寰.杜桥.栾骄阳.王东涵 个人贡献分=基础分+表现分 基础分=5*5*0.5/5=2.5 成员得分如下: 成员 基础分 表现分 个人贡献 ...
- BugPhobia开发篇章:绩效管理的层次优化
0x00 :用0x00去书写一段故事 If you weeped for the missing sunset, you would miss all the shining stars 绩效管理,恐 ...
- OO学习体会与阶段总结(设计与实现)
前言 在最近的一个月的课程中,笔者对于规格化编程进行了深入的学习.运用面向对象抽象思想对编写的程序进行过程抽象.异常处理.数据抽象.类的层次规格与迭代等等规格设计,使得程序结构化程度提高,具有更好 ...
- 5337朱荟潼Java实验报告一
一.实验内容 1.内容一输出“Hello 名”. import java.util.Scanner;public class Hello{public static void main(String[ ...
- Python学习二
list [ ] Python内置的一种数据类型是列表:list.list是一种有序的集合,可以随时添加和删除其中的元素 classmates = ['Michael', 'Bob', 'Tracy ...