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：不管父标签和最后一个子标签之间是否有空格或空行，拿到的都是最后一个子元素节点