JS的DOM解析1--节点操作(节点获取)

1.DOM解析定义：
针对于XML结构（树形结构）的一种解析方式，其中HTML标签本身就是XML结构的衍生品。
2.节点获取方法：

(1). getElementById() 通过id名来获取
(2). getElementsByTagName() 通过标签名来获取一个数组
(3). querySelector() 通过css3的方式来获得
(4). querySelectorAll() 得到一个数组

3.当前结点，子节点，父节点的获取：
body部分：

<div id="wrap">
		<p></p>
		<ul>
			<li></li>
		</ul>
</div>

JS部分：

<script type="text/javascript">
	var wrap=document.getElementById('wrap');
	//1.获得当前结点的子节点：
	var children=wrap.childNodes;//childNodes是包含文本内容，文本内容也是节点之一
	//获得当前结点所有子节点,文本内容也是属于节点
	var children=wrap.children;
	//获得非文本的节点
	var first=wrap.firstChild;
	//获得标签的首个节点，获得首节点是文本节点，匹配于childNodes
	var first=wrap.firstElementChild;
	//获得标签的首个节点，获得首节点不是文本，匹配于children
	//2.获得当前节点：
	//(1)nodeName:获得当前结点的名称
	var value=wrap.nodeName;
	//获得当前结点的名称
	//3.获得当前结点的父节点：
	//(1)parentNode:获得当前结点的父节点
	var obj=wrap.parentNode;
    console.log(obj);
</script>

小结：
1.获得当前节点的子节点：
childNodes:包含文本，算做节点，获得首子节点方式是 标签.firstChild
children:包含节点，不包含文本,获得首子节点方式是 标签.firstElementChild
注意：获得子节点分为两种：
1.将文本内容也当作节点之一
childNodes
firstChild
lastChild
2.获得标签内容的子节点
children
firstElementChild
lastElementChild
2.获得当前节点：
(1)nodeName:获得当前结点的名字
3.获得当前结点的父节点：
(1)parentNode:获得当前结点的父节点