理解文档对象模型(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 -> 如果当前元素有子元素就返回true
lastChild -> 返回倒数第一个元素
nextSibling -> 返回定义在当前元素之后的兄弟元素
parentNode -> 返回父元素
previousSibling -> 返回定义在当前元素之前的兄弟元素

小结 

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

原文地址:https://www.cnblogs.com/caichunbao/p/7446301.html