二、document对象、获取元素、节点、遍历树

一、document对象

控制台打印document——>整个html结构

console.log(document);

其实document是一个对象，内部有方法和属性。

console.dir(document);

…

二、获取元素

2.1 document.getElementById()

功能：通过标签id属性获取 一个 元素。

兼容性：

• IE8以下获取标签id属性不区分大小写。
• IE8以下若标签没有id属性，匹配name属性。

开发规范：id一般不作为样式去定义，常用于对接后端。即不会用id选择器去书写css。

2.2 document.getElementsByTagName()

功能：通过标签名获取 一组 元素。

兼容性：好，不必考虑。

2.3 document.getElementsByClassName()

功能：通过标签的class属性获取 一组 元素。

兼容性：IE8及以下没有这个方法。

2.4 document.getElementsByName()

功能：通过标签的name属性获取 一组 元素。无论标签是否有name属性。

兼容性：IE9及以下只能用于有name属性的标签元素。例如<a>，name 属性用于指定锚（anchor）的名称。

2.5 document.querySelector()

来源：HTML5新引入的API。早就有，只是HTML5把它放到HTML标准之中。

功能：通过css选择器获取 一个 元素，如果有重复选择第一个。

兼容性：IE8以下不支持。

缺点：性能问题，不能实时更新。

注：选择div标签直系子元素p：

var p = document.querySelector('div > p');

2.5 document.querySelectorAll()

来源：HTML5新引入的API。早就有，只是HTML5把它放到HTML标准之中。

功能：通过css选择器获取 一组 元素。

兼容性：IE8以下不支持。

缺点：性能问题，不能实时更新。

三、节点 ※：parentNode 、childNode

节点包含元素，元素节点又叫做DOM元素。

document对象中的属性：

• parentNode 父节点，节点的顶级父节点为document，再往上为null。
• childNode 子节点。
• firstChild / lastChild 第一个孩子节点/最后一个孩子节点。
• previousSibling / nextSibling 上一个兄弟节点/下一个兄弟节点。

打印一下节点：

<ul>
    <li>
    	<!-- 这里是一个注释 -->
    	<a href="">点击</a>
		<p>我是段落标签</p>
		<h1>我是标题标签</h1>
	</li>
</ul>
<script>
var li = document.getElementsByTagName('li')[0];
console.log(li.childNodes);
console.log(li.childNodes.length);
</script>

节点：

注：IE5都支持（兼容性好！）。

四、遍历树

4.1 遍历节点树

parentNode，父节点。顶层父节点为document，再往上为null。

4.2 遍历元素节点数

IE9以下不支持：

• parentElement，父元素节点。遍历到顶层是HTML元素，再往上为null。
• childElementCount = children.lenth，子元素的个数。
• firstElementChild / lastElementChild，第一个孩子元素节点/最后一个孩子元素节点。
• previousElementSibling / nextElementSibling，上一个兄弟元素节点/下一个兄弟元素节点。

IE7及以下不支持：

children，子元素节点。