child和childNodes的区别
child和childNodes区别：
childNodes是标准属性， child是非标准属性
childNodes： 获取节点，不同浏览器表现不同
- IE 只获取元素节点
- 非IE 获取元素节点和文本节点
解决方案： if(元素.nodeName=="#text") continue 或者 if(元素.nodeType != '3') continue
- children: 获取元素节点，浏览器表现相同（如果只想获取DOM节点，使用children就行）
- children: 在IE8及以下， 使用 someElement.children 是包含注释节点的（可以看到nodeType为8是注释节点）
<script>
window.onload = function() {
let box = document.getElementById("box");
let list = document.getElementById("list");
console.log(box.childNodes);
/**
* nodeType 1 元素节点
* 2 属性节点
* 3 文本节点
* */
console.log("个数",box.childNodes.length);
console.log(box.firstChild.nodeType);//3
/**
* 现在我们要取到元素节点--由于换行、空格的存在，所有，上面的nodeType是3
* */
function getFirstEle(ele) {
for(var i=0, e; e=ele.childNodes[i];i++) {
if(e.nodeType === 1) {
return e;
}
}
}
console.log(getFirstEle(box));// span标签
console.log("40行",box.children);// 只返回元素节点
}
</script>
</head>
<body>
<div id="box">
<span>a</span>
121212
</div>
<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
child和childNodes的区别的更多相关文章
- JavaScript中Element与Node的区别，children与childNodes的区别
关于Element跟Node的区别,cilldren跟childNodes的区别很多朋友弄不清楚,本文试图让大家明白这几个概念之间的区别. Node(节点)是DOM层次结构中的任何类型的对象的通用名称 ...
- children 和childNodes 的区别
1:childNodes /children相同点:它返回指定元素的子元素集合. 2:区别:children : 它是非标准的,仅返回HTML节点.甚至不返回文本节点.所有浏览器表现一 致. chi ...
- children和childNodes的区别
children和childNodes 1,childNodes 属性,标准的,它返回指定元素的子元素集合,包括HTML节点,所有属性,文本.可以通过nodeType来判断是哪种类型的节点,只有当no ...
- children和childNodes 的区别
1.childNodes 属性,标准的,它返回指定元素的子元素集合,包括html节点,所有属性,文本.可以通过nodeType来判断是哪种类型的节点,只有当nodeType==时才是元素节点,是属性节 ...
- JavaScript中childNodes和children的区别
我在学习JavaScript对DOM操作的过程中,发现了使用childNodes属性,得不到我想要的结果,因此我就从JavaScript高级程序设计中了解了childNodes和children的区别 ...
- JS中childNodes深入学习
原文:JS中childNodes深入学习 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <ti ...
- js清除childNodes中的#text（选项卡中会用到获取第一级子元素）
我们一般为了代码整洁代码都会换行,如上面所述. 获取div1节点下的childNodes var div = document.getElementById('div1') var child = d ...
- 六天玩转javascript：javascript变量与表达式(2)
本系列内容为本人平时项目实践和参照MDN,MSDN,<javascript语言精粹>,<Effective Javascript>等资料,并且整理自己EverNote的日常积累 ...
- JS学习之路，菜鸟总结的注意事项及错误更正
JavaScript 是一种面向对象的动态语言,它的语法来源于 Java 和 C,所以这两种语言的许多语法特性同样适 用于 JavaScript.需要注意的一个主要区别是 JavaScript 不支持 ...
随机推荐
- easyui的datetimebox时间格式化详解
今天公司让用easyui的datetimebox组件,而且还要让格式化成大家通用的那种,网上搜了很多,但差不多都是复制黏贴的,最后请教了下螃蟹. 感谢螃蟹抽空给做了个例子,现在拿出来和大家分享下,效果 ...
- 杭电 1012 u Calculate e【算阶乘】
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1012 解题思路:对阶乘递归求和 反思:前面3个的输出格式需要注意,可以自己单独打印出来,也可以在for ...
- /usr/bin/ld: cannot find -lxxx 问题 解决方法总结
最近在做毕设的收尾工作,很多程序都要部署到linux下来运行,遇到了挺多问题,昨天就集中性遇到了 在编译应用时,遇到了 /usr/bin/ld: cannot find -lxxx 这种情况是系统找不 ...
- PhotoZoom Pro 7 支持哪些图像格式？
PhotoZoom是一款新颖的.技术上具有革命性的对数码图片无损放大的工具.为设计工作者提供了优良的解决方案,可快速渲染出完美的放大照片,呈现无与伦比的画质效果.将因其应用的广泛性,所以对图像文件的支 ...
- luogu 3467 [POI2008]PLA-Postering 单调栈
题目描述: Description N个矩形,排成一排. 现在希望用尽量少的矩形海报Cover住它们. Input 第一行给出数字N,代表有N个矩形.N在[1,250000] 下面N行,每行给出矩形的 ...
- Unicode编码，解释UCS、UTF、BMP、BOM等名词
(转载 谈谈Unicode编码,简要解释UCS.UTF.BMP.BOM等名词 这是一篇程序员写给程序员的趣味读物.所谓趣味是指可以比较轻松地了解一些原来不清楚的概念,增进知识,类似于打RPG游戏的升级 ...
- UVA1585 - Score（紫书习题3.1）
如何计算你们的得分呢?,如"OOXXOXXOOO". "O"表示问题的正确答案,"X"表示错误的答案.那么它得分是由它自己和它刚刚以前连续的 ...
- maven 依赖的传递性
1.如图我们有三个项目,项目Age,项目Bge,项目Cge 2.我们使Age项目依赖到Bge项目,Bge项目依赖到Cge项目 Age项目和Bge项目分别执行命令:mvn install 打包*.ja ...
- Win32 编程消息常量（C#)
public class WinMessages { #region 基本消息 public const int WM_NULL = 0x0000; public const int WM_CREAT ...
- C# List源码分析(二)
常用操作的复杂度分析 Contains 该方法是一个O(n)的方法,是根据顺序依次遍历整个列表的,观看源码,跟JAVA还是有不少分别的,在上一篇中就有发现,因为C#对Primitive类型是有处理的, ...