childNodes和Children的区别
1、childNodes:
标准的,返回指定元素的子元素集合,包括HTML属性,所有属性,文本。可以通过nodeType来判断是哪种类型的节点,只有当nodeType==1时才是元素节点,2是属性节点,3是文本节点。
有些人错误的使用()去取该集合元素,下表列出各浏览器对childNodes(i)的支持情况:
| IE6/7/8/safiri/chrome/Opera | IE9/FireFox | |
| childNodes(i) | 支持 | 不支持 |
有时候需要获取指定元素的第一个HTML子节点(非属性/文本节点),最容易想到的就是firstChild 属性。代码中第一个HTML节点前如果有换行,空格,那么firstChild返回的就不是你想要的了。可以使用nodeType来判断下。
function getFirst(elem){
for(var i=0,e;e=elem.childNodes[i++];){
if(e.nodeType==1)
return e;
}
}
2、children:
非标准的,它返回指定元素的子元素集合。经测试,它只返回HTML节点,甚至不返回文本节点。且在所有浏览器下表现惊人的一致。和childNodes 一样,在Firefox下不支持()取集合元素。因此如果想获取指定元素的第一个HTML节点,可以使用children[0]来替代上面的 getFirst函数。需注意children在IE中包含注释节点。
childNodes和Children的区别的更多相关文章
- js表单验证处理和childNodes 和children 的区别
一.对提交表单进行空值验证 html代码: <form action="#"onsubmit="return validate_form(this);" ...
- JavaScript中childNodes和children的区别
我在学习JavaScript对DOM操作的过程中,发现了使用childNodes属性,得不到我想要的结果,因此我就从JavaScript高级程序设计中了解了childNodes和children的区别 ...
- Javascript 中childNodes和children的区别
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- javascript中childNodes与children的区别
1.childNodes:获取节点,不同浏览器表现不同: IE:只获取元素节点: 非IE:获取元素节点与文本节点: 解决方案:if(childNode.nodeName=="#text&qu ...
- parentNode、parentElement,childNodes、children 它们有什么区别呢?
parentNode.parentElement,childNodes.children 它们有什么区别呢?parentElement 获取对象层次中的父对象. parentNode 获取文档层次中的 ...
- node与Elment以及子节点childrenNode与children的区别(2)
测试代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- js下firstElementChild firstChild 以及childNodes和children方法
一. <div> <p>123</p> </div> 在上面这段代码中,如果使用以下js代码 var oDiv=document.getElementB ...
- childNodes和children
childNodes 返回指定元素的子节点集合,包括HTML节点,所有文本(元素之间的空格换行childNodes会看作文本节点). 通过nodeType来判断节点的类型: 元素 1 属性 2 文本 ...
- ParentNodes、childNodes、children之间的区别
"parentNode" 常用来获取某个元素的父节点. 把 parentNodes 理解为容器, 在容器中有个子节点 例: <div id="parent" ...
随机推荐
- Effective C++ 条款七 为多态基类声明virtual析构函数
class TimeKeeper { public: TimeKeeper(); // ~TimeKeeper(); 错误,此作为一个基类,被继承了.其继承类被delete后,基类被销毁,但继承类可能 ...
- 未来 5 年八大热门 IT 职业
近日.外媒梳理了未来5年内.也是就是2020年仍将受到热捧的八大科技领域,为IT从业者怎样做好长远规划.有针对性地培养自身技能.又不偏离热门岗位提供了參考. (图片来自网易) 2020年将热门的8大I ...
- 简单的glib测试(三)
#include <stdlib.h> #include <stdio.h> #include <string.h> #include <locale.h&g ...
- Spark 学习笔记:(四)MLlib基础
MLlib:Machine Learning Library.主要内容包括: 数据类型 统计工具 summary statistics correlations stratified sampling ...
- Android cookies正确的更新方式
之前的更新方式 一搜cookies的使用,非常easy搜到非常多文章.主要的几步大致同样.例如以下图: 基本上都要求大家先调用cookieManager.removeAllCookie()或者调用 c ...
- UICollectionView基础用法
初始化部分: UICollectionViewFlowLayout *flowLayout= [[UICollectionViewFlowLayout alloc]init]; self.myColl ...
- vue弹窗插件实战
vue做移动端经常碰到弹窗的需求, 这里写一个功能简单的vue弹窗 popup.vue <template> <div class="popup-wrapper" ...
- 缓存框架Ehcache相关
单点缓存框架 只能针对单个jvm中,缓存容器存放jvm中,每个缓存互不影响 Ehcache gauva chache 内置缓存框架 jvm缓存框架 分布式缓存框架(共享缓存数据) Redis ...
- 网站建设中用JS判断时间并显示不同内容
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- CoreData兼容iOS9和iOS10
由于iOS10之后CoreData Stack的更改无法在iOS9的系统中运行,所以我们需要对上一小节中封装的工具类进行系统版本的兼容 iOS9和iOS10中CoreData最本质的区别其实就是管理对 ...