理解文档对象模型（2）

接上一篇文章，继续理解DOM模型，这次主要写一些原生js如何获取HTML元素对象，Document对象的一大关键功能就是作为一个入口，让你能访问代表文档里各个元素的对象。可以将DOM视为一棵树并沿着它的结构进行导航。

1. 使用属性获取元素对象

Document对象为你提供一组属性，它们会返回代表文档中特定元素或元素类型的对象

　activeElemrnt -> 返回一个代表当前带有键盘焦点元素的对象（HTMLElement）  body          -> 返回一个代表body元素的对象（HTMLElement）  head          -> 返回一个代表head元素的对象（HTMLHeadElement）  forms         -> 返回所有代表form元素的对象（HTMLCollection）  images        -> 返回所有代表img元素的对象（HTMLCollection）  scripts       -> 返回所有代表script元素的对象（HTMLClooection）

上面大多数属性都返回一个HTMLCollection对象，DOM就是用这种方式来表示一组元素的对象集合。

2. 使用id获取元素

带有id的元素，可以使用window.id或者window[id]获取到元素

3. 搜索元素

Document对象定义了很多方法，可以用它们搜索文档里的元素

getElementById(<id>)         -> 返回带有指定id值的元素getElementsByClassName(<class>)-> 返回带有指定class值的元素getElementsByName(<name>)    -> 返回带有name值的元素getElementsByTagName(<tag>)  -> 返回指定类型的元素querySelector(<selector>)    -> 返回匹配指定CSS选择器的第一个元素querySelectorAll(<selector>) -> 返回匹配指定CSS选择器的所有元素

4. 合并进行链式搜索

DOM的一个实用功能是几乎所有Document对象实现的搜索方法同时也能被HTMLElement对象实现，唯一例外是getElementById方法，只有document对象才能使用它。

var elems = document.getElementById("tblock").getElementsByTagName("span")var elems = document.getElementById("tblock").querySelectorAll("span")

5. 在DOM树里导航

　　另一种搜索元素的方式是将DOM视为一棵树，然后在它的层级结构里导航。

childNodes      -> 返回子元素组firstChild      -> 返回第一个子元素hasChildNodes   -> 如果当前元素有子元素就返回truelastChild       -> 返回倒数第一个元素nextSibling     -> 返回定义在当前元素之后的兄弟元素parentNode      -> 返回父元素previousSibling -> 返回定义在当前元素之前的兄弟元素

小结

第一篇和第二篇介绍了Document对象，它是由浏览器替你创建的，可以获取文档的信息和代表文档的元素的对象