原生dom节点基础（获取子父兄弟节点）

 首先在html文件中新建一个div和几个p标签方便我们后续进行操作

<div class="box" id='100' abc='剑非出我心'>
		<p class="p1">1</p>
		<p class="p2">2</p>
		<p class="p3">3</p>
		<p class="p4">4</p>
	</div>

首先获取节点，通过getElement   Class类名获取，以前的文章中讲到过getElement 和 querySelect 的区别，感兴趣的大佬可以去翻阅一下。

var box=document.getElementsByClassName('box')[0]
	//.nodeName		节点名
	console.log(box.nodeName)
	//.nodeValue	节点值
	console.log(box.nodeValue)
	//.nodeType		节点
	console.log(box.nodeType)

获取元素，以及获取元素的属性

getAttribute('要获取的属性名')    获取属性

var box=document.getElementsByClassName('box')[0]
	
	 var mine=box.getAttribute('abc')
	 var boxid=box.getAttribute('id')
	 console.log(mine,boxid)

 setAttribute('要设置的属性名','要设置的属性值')    设置属性

 box.setAttribute('like','IT')

删除属性 ：removeAttribute('要删除的属性名') 删除属性

box.removeAttribute('like')

以上是对单个元素属性的操作。

获取父级元素的节点 .parentNode 获取父级元素的节点

var p1=document.getElementsByClassName('p1')[0]


//获取父级元素的节点	.parentNode	获取父级元素的节点
	 console.log(p1.parentNode)

//所有子节点	.childNodes	包含空白节点 是数组 可加下标取需要
	 console.log(box.childNodes[0])

//所有子节点	.children	只包括元素节点 不包含空白节点 是数组 可加下标取需要
	 console.log(box.children)

//获取第一个子元素	.firstChild	包含空白节点
	 console.log(box.firstChild)

//获取最后一个子元素	.lastChild	包含空白节点
	console.log(box.lastChild)

//获取元素的下一个兄弟元素	.nextSibling	包含空白节点
	 console.log(p1.nextSibling.nextSibling)//叠加

//获取元素的上一个兄弟元素	.previousSibling	包含空白节点
	 console.log(p1.previousSibling)

//获取元素的下一个兄弟元素	.nextElementSibling	不包含空白节点
	 console.log(p1.nextElementSibling)

//获取元素的上一个兄弟元素	.previousElementSibling	不包含空白节点
	 console.log(p1.previousElementSibling)