childNodes和children，firstChild和firstElementChild，lastChild和lastElementChild的区别

首先，我们给出HTML的代码

<ul id='city'><li>北京</li><li>南京</li><li>东京</li><li>南宁</li>
</ul>
<button id='btn'>点我</button>

一、childNodes和children的区别

先看看childNodes

window.onload = function() {var btn = document.getElementById('btn');btn.onclick = function() {var city = document.getElementById('city');var cns = city.childNodes;console.log(cns.length);cns.forEach(function(item){console.log(item.innerHTML);})}
}

可以看到childNodes除了获取到4个 li 元素节点还有5个空白文本节点

如果将HTML的代码变成这样，childNodes则得到4个 li 元素节点

<ul id='city'><li>北京</li><li>南京</li><li>东京</li><li>南宁</li></ul>
<button id='btn'>点我</button>

再来看children

window.onload = function() {var btn = document.getElementById('btn');btn.onclick = function() {var city = document.getElementById('city');var cns = city.children;console.log(cns.length);for(var i = 0; i < cns.length; i++) {console.log(cns[i].innerHTML);}}
}

children拿到的是子元素节点，不会拿到到空白文本节点

二、firstChild和firstElementChild的区别

firstChild

window.onload = function() {var btn = document.getElementById('btn');btn.onclick = function() {var city = document.getElementById('city');var cns = city.firstChild;console.log(cns.innerHTML);}
}

如果在 ul 标签和 li 标签之间有空格或者空行的话，firstChild 拿到的是第一个的空白文本节点

firstElementChild

window.onload = function() {var btn = document.getElementById('btn');btn.onclick = function() {var city = document.getElementById('city');var cns = city.firstElementChild;console.log(cns.innerHTML);}
}

不管在 ul 标签和 li 标签之间是否有空格或者空行，firstElementChild 拿到的都是第一个子元素节点

三、lastChild和lastElementChild的区别

同理：

lastChild：父标签和最后一个子标签之间有空格或空行时，拿到的是空白文本节点

lastElementChild：不管父标签和最后一个子标签之间是否有空格或空行，拿到的都是最后一个子元素节点

childNodes和children，firstChild和firstElementChild，lastChild和lastElementChild的区别相关推荐

javascript中childNodes与children的区别
1.childNodes:获取节点,不同浏览器表现不同: IE:只获取元素节点: 非IE:获取元素节点与文本节点: 解决方案:if(childNode.nodeName=="#text&qu ...
javascript中childNodes与children 区别以及firstChild与firstElementChild区别
1:childNodes属性: 标准的,它返回指定元素的子元素集合,包括html节点,所有属性,文本.可以通过nodeType来判断是哪种类型的节点,只有当nodeType==1时才是元素节点,2是属 ...
js中firstChild与firstElementChild及childNodes与children的区别
firstChild: 获取指定元素的第一个子节点 (包括元素节点和文本节点) . 若父元素与第一个子元素之间存在空白节点,firstChild 获取到的将是空白节点而不是第一个子元素.这时可以使用 ...
firstElementChild firstChild 以及childNodes和children方法
[转]js下firstElementChild,firstChild ,childNodes,children 一. <div><p>123</p> </di ...
浅谈childNodes和children以及firstChild和firstElementChild
1.childNodes属性: 返回指定元素的子节点集合,包括元素节点和文本节点. 除了IE9和Firefox,其他浏览器都支持通过childNodes[i]获取第i个子节点. 2.children属 ...
firstChild、lastChild 和 firstElementChild、lastElementChild 的区别
文章目录一.前言二.Node.prototype.firstChild,Node.prototype.lastChild 三.ParentNode.firstElementChild.Parent ...
firstChild和firstElementChild兼容
firstChild,在现代浏览器中会选中空格文本节点.而IE8及以下的IE浏览器不会选中空白文字节点.现代浏览器运行如下: <ul> <li></li> ...
兼容firstChild和firstElementChild
1.nextSibling和nextElementSibling 顾名思义,就是找下一个节点 nextSibling在低版本浏览器中可以顺利找到下一个元素节点,而在正常浏览器中找到的包含中间空格. n ...
Html DOM元素的childNodes和children的区别
对于DOM元素,children是指DOM Object类型的子对象,不包括tag之间隐形存在的TextNode,而childNodes包括tag之间隐形存在的TextNode对象. 具体看一下针对c ...