首先,我们给出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:不管父标签和最后一个子标签之间是否有空格或空行,拿到的都是最后一个子元素节点