标签：获取 name 方式 ext html 使用 文档 元素 forms
接上一篇文章，继续理解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 -> 如果当前元素有子元素就返回true
lastChild -> 返回倒数第一个元素
nextSibling -> 返回定义在当前元素之后的兄弟元素
parentNode -> 返回父元素
previousSibling -> 返回定义在当前元素之前的兄弟元素
小结
第一篇和第二篇介绍了Document对象，它是由浏览器替你创建的，可以获取文档的信息和代表文档的元素的对象
标签：获取 name 方式 ext html 使用 文档 元素 forms
原文地址：http://www.cnblogs.com/caichunbao/p/7446301.html
