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来判断下。

1 function getFirst(elem){
2     for(var i=0,e;e=elem.childNodes[i++];){
3         if(e.nodeType==1)
4             return e;
5     }
6 }

2、children:

非标准的,它返回指定元素的子元素集合。经测试,它只返回HTML节点,甚至不返回文本节点。且在所有浏览器下表现惊人的一致。和childNodes 一样,在Firefox下不支持()取集合元素。因此如果想获取指定元素的第一个HTML节点,可以使用children[0]来替代上面的 getFirst函数。需注意children在IE中包含注释节点。

时间: 2024-11-03 21:37:06

childNodes和Children的区别的相关文章

Javascript 中childNodes和children的区别

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script type="text/javascrip

js表单验证处理和childNodes 和children 的区别

一.对提交表单进行空值验证 html代码: 1 <form action="#"onsubmit="return validate_form(this);" method="post"> 2 Email: <input type="text" name="emails" size="30"><br> 3 Phone: <input type=&q

parentNode、parentElement,childNodes、children 它们有什么区别呢?

parentNode.parentElement,childNodes.children 它们有什么区别呢?parentElement 获取对象层次中的父对象. parentNode 获取文档层次中的父对象. childNodes 获取作为指定对象直接后代的 HTML 元素和 TextNode 对象的集合. children 获取作为对象直接后代的 DHTML 对象的集合. -------------------------------------------------------- pare

node与Elment以及子节点childrenNode与children的区别(2)

测试代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <ul id="ul1"> <li>x</li> <li>x</li> <li

jQuery:find()及children()的区别

1:children及find方法都用是用来获得element的子elements的,两者都不会返回 text node,就像大多数的jQuery方法一样. 2:children方法获得的仅仅是元素一下级的子元素,即:immediate children. 3:find方法获得所有下级元素,即:descendants of these elements in the DOM tree 4:children方法的参数selector 是可选的(optionally),用来过滤子元素,但find方法

ParentNodes、childNodes、children之间的区别

"parentNode" 常用来获取某个元素的父节点. 把 parentNodes 理解为容器, 在容器中有个子节点 例: <div id="parent"><b id="child">My text</b></div> 在上面的代码中, 你看到把"爹"作为一个 div 容器, 该容器中有个"孩子", 就是粗体的文字部分. 如果你打算用getElementBy

javascript中的子节点查找,childNodes和children

一.查找元素: 1.getElementById():接收一个参数:要取得的元素的 ID.如果找到相应的元素则返回该元素,如果不存在带有相应 ID 的元素,则返回 null.严格匹配,包括大小写. IE7 及较低版本还为此方法添加了一个有意思的"怪癖": name 特性与给定 ID 匹配的表单元素(<input>.<textarea>. <button>及<select>)也会被该方法返回.如果有哪个表单元素的 name 特性等于指定的

js下firstElementChild firstChild 以及childNodes和children方法

一. <div> <p>123</p> </div> 在上面这段代码中,如果使用以下js代码 var oDiv=document.getElementByTagName("div")[0]; alert(oDiv.firstChild.nodeName) 在ie9以下,alert出来的是p(p标签名字),但是在现代浏览器下,比如Chrome,FF,ie11等等,由于会把<div>   <p>两个标签之间的空白节点也

childNodes 和children

<script>window.onload = function() {var oUl = document.getElementById('ul1');//alert(oUl.childNodes.length);//弹出来是11 //alert(oUl.children.length);//弹出来是3 }</script> <ul id="ul1" style="border: 1px solid red;"><li&g