DOM树

DOM树简单例子

	<div>
		<span>
			<span></span>
			<em>
			<a></a>
			</em>
			<strong  class="demo">123</strong>
		</span>
	</div>

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

遍历节点树（所有浏览器都兼容）

节点有 （元素节点–1，属性节点–2，文本节点–3，注释节点–8，document–9
DocumentFragment–11）

parentNode->父节点（最顶端的parentNode为#document);

如下图，每个节点都可以通过.parentNode方法找到它的父节点

childNodes->子节点们

节点有 （元素节点–1，属性节点–2，文本节点–3，注释节点–8，document–9
DocumentFragment–11）

firstChild->第一个子节点

lastChild->最后一个子节点

nextSibling->后一个兄弟节点，previousSibling->前一个兄弟节点

遍历元素节点树（除了children，IE9以下都不兼容）

😁只遍历元素，其他没用的不进行遍历。

parentElement->返回当前元素的元素父节点（IE不兼容）

children->只返回当前元素的元素子节点

node.childElementCount===node.children.length当前元素节点的子元素个数

firstElementChild->返回的是第一个元素子节点（IE不兼容）

lastElementChild->返回的是最后一个元素子节点（IE不兼容）

nextElementSibling/previousElementSibling->返回后一个/前一个兄弟元素

节点的四个属性

nodeName

元素的标签名，已大写形式表示，只读。

nodeValue

Text节点或Comment节点的文本内容，可读写

nodeType

该节点的类型，只读

元素节点--1，属性节点--2，文本节点--3，注释节点--8，document--9
DocumentFragment--11

attributres

Element节点的属性集合

hasChildNodes()

判断有没有子节点