原生JS获取父节点、子节点、兄弟节点

1、访问父节点

parentNode : Node 类型，返回指定节点的父节点,如果指定节点没有父节点，则返回 null。

<div id="box">
	<p id="hello">hello world!</p>
</div>
<script>
	var hello=document.getElementById("hello");
	console.log(hello.parentNode.nodeName);   //DIV
</script>

2、访问所有子节点
childNodes： NodeList 类型，返回指定节点的所有子节点，可以看作是类数组对象，可以使用 length 属性来确定子节点的数量

<div id="box">
	<p>hello world!</p>
	<p>today is Sunday.</p>
</div>
<script>
	var box=document.getElementById("box");
	console.log(box.childNodes.length);   //5
</script>

注意：浏览器之间存在差异，有的浏览器默认空白(换行)是文本节点，有的会忽略空白节点，所以要注意兼容

3、访问第一个子节点
firstChild：Node 类型，返回指定节点的第一个子节点，注意空白文本节点

<div id="box">
	<p id="hello">hello world!</p>
	<p>today is Sunday.</p>
</div>
<script>
	var box=document.getElementById("box");
	console.log(box.firstChild.nodeName);   //#text
	var firstChild=getFirstChildNode(box);
	console.log(firstChild.nodeName);  //p

	//通过判断nodeType的值是否为1,如果是则为元素节点,否则跳过。
	//获取当前元素节点的第一个子节点,过滤空白文本节点
	function getFirstChildNode(box){
		if(box.firstChild.nodeType!=1){
			return box.firstChild.nextSibling;
		}else{
			return box.firstChild;
		}
	 }
</script>

4、访问最后一个子节点
lastChild：Node 类型，返回指定节点的最后一个子节点，注意空白文本节点

<div id="box">
	<p id="hello">hello world!</p>
	<p>today is Sunday.</p>
</div>
<script>
	var box=document.getElementById("box");
	console.log(box.lastChild.nodeName);   //#text
	var lastChild=getLastChildNode(box);
	console.log(lastChild.nodeName);  //p

	//获取当前元素节点的最后一个子节点,过滤空白文本节点
	function getLastChildNode(box){
		if(box.lastChild.nodeType!=1){
			return box.lastChild.previousSibling;
		}else{
			return box.lastChild;
		}
	}
</script>

5、访问下一个兄弟节点
nextSibling： Node 类型，返回指定节点之后紧跟的节点，如果没有 nextSibling 节点，则返回值为 null。

<div id="box">
	<p id="hello">hello world!</p>
	<p>today is Sunday.</p>
</div>
<script>
	var hello=document.getElementById("hello");
	console.log(hello.nextSibling.nodeName);   //#text
	var nextSibling=getNextNode(hello);
	console.log(nextSibling.nodeName);  //p

	//获取当前元素节点的下一个节点,过滤空白文本节点
	function getNextNode(box){
		if(box.nextSibling.nodeType!=1){
			return box.nextSibling.nextSibling;
		}else{
			return box.nextSibling;
		}
	}
</script>

6、访问前一个兄弟节点
previousSibling：Node 类型，返回指定节点的前一个节点，如果没有 previousSibling 节点，则返回值为 null。

<div id="box">
	<p>hello world!</p>
	<p id="today">today is Sunday.</p>
</div>
<script>
	var today=document.getElementById("today");
	console.log(hello.previousSibling .nodeName);   //#text
	var previousSibling=getNextNode(hello);
	console.log(previousSibling.nodeName);  //p

	//获取当前元素节点的下一个节点,过滤空白文本节点
	function getPrevNode(box){
		if(box.previousSibling .nodeType!=1){
			return box.previousSibling.previousSibling;
		}else{
			return box.previousSibling;
		}
	}
</script>

nodeType节点类型：
元素节点—1
属性节点—2
文本节点—3
注释节点—8
document—9
DocumentFragment —11

节点的四个属性：
nodeName:返回元素的标签名，大写，只读
nodeValue:Text节点或Comment节点的文本内容，可读写
nodeType:该节点的类型，只读(*)
attributes:Elements节点的属性集合
节点方法：Node.hasChildNodes();