JavaScript Dom选择器&节点

DOM

dom(Document Object Model）文档对象模型。是当HTML网页被加载时，浏览器自动创建的。可以通过该对象实现对HTML标签及其属性的修改。也可以间接实现对于CSS样式的修改。

通过DOM查询节点

首先要清楚节点有哪些类型：

节点类型	类型值（type）
元素节点	1
属性节点	2
文本节点	3
注释节点	8
DOM树根节点（整个文档 document）	9

完整节点类型：传送门

节点的四个属性：

1. nodeName：元素标签名，只读
2. nodeValue：text节点或comment节点的文本内容，可读写
3. nodeType：节点类型，只读
4. attributes:Element 节点的属性集合

查询节点的方法

1. getElementById() 通过Id值查找，返回一个元素节点
2. getElementsByTagName（） 通过标签名,返回整个文档下的该标签集合（类数组）

	<div>
		<ul>
			<li></li>
			<li></li>
		</ul>
		<span></span>
	</div>
	<div></div>
	<script type="text/javascript">
		var divs = document.getElementsByTagName('div');   //HTMLCollection
		console.log(divs[0]);     //第一个div
		console.log(divs[1]);  //第二个div
	</script>

4. getElementsByName() 通过name查找，返回该name集合
5. getElementsByClassName()
6. querySelector() //css选择器
7. querySelectorAll() //css选择器

注：css选择器不是实时的，通过它得到的只是一个副本

	<div>
		<ul>
			<li class='qwe'></li>
			<li></li>
		</ul>
		<span></span>
	</div>
	<div></div>
	<script type="text/javascript">
		var li = document.querySelector('div > ul li.qwe');   //可通过样式选择
		var divs = document.getElementsByTagName('div');   //HTMLCollection
		var divs1 = document.querySelectorAll('div');

		var newdiv = document.createElement('div');
		document.body.appendChild(newdiv);   //增加一个标签
		
	</script>

可以看到通过querySelectorAll（） 得到的NodeList没有更新。

遍历节点树

• parentNode（父节点）
• childNodes（全部子节点）
• firstChild
• lastChild
• nextSibling(后一个兄弟节点）
• previousSibling(前一个兄弟节点）

遍历元素节点树

• parentElement
• children(当前元素的所有子元素）
• childElementCount (子元素数）
• firstElementChild
• lastElementChild
• nextElementSibling
• previousElementSibling

	<div>
		你好
		<div>
			<span></span>
		</div>
	</div>
	<script type="text/javascript">
		var div = document.getElementsByTagName('div')[0];
	</script>

可以看到第一种里的方法会统计所有的节点类型，而第二种只会计算元素标签。