DOM

DOM 全稱是Document Object Model，即文檔對象模型。

DOM的目的是為了操作文檔而產(chǎn)生的API

DOM獲取元素的方式

document 對象

每個載入瀏覽器的HTML文檔都會成為document對象。document對象包含了文檔的基本信息，我們可以通過JavaScript對HTML頁面中的所有元素進(jìn)行訪問、修改。

Element

除了document對象，在DOM中最常用的就是Element對象了，Element對象表示HTML元素。

Element 對象可以擁有類型為元素節(jié)點、文本節(jié)點、注釋節(jié)點的子節(jié)點，DOM提供了一系列的方法可以進(jìn)行元素的增、刪、改、查操作

查詢元素

1. getElementById()
getElementById方法返回匹配指定ID屬性的元素節(jié)點。如果沒有發(fā)現(xiàn)匹配的節(jié)點，則返回null。這也是獲取一個元素最快的方法
   

   image

2. getElementsByClassName()
getElementsByClassName方法返回一個類似數(shù)組的對象（HTMLCollection類型的對象），包括了所有class名字符合指定條件的元素（搜索范圍包括本身），元素的變化實時反映在返回結(jié)果中。這個方法不僅可以在document對象上調(diào)用，也可以在任何元素節(jié)點上調(diào)用。
   

   image
   
   getElementsByClassName方法的參數(shù)，可以是多個空格分隔的class名字，返回同時具有這些節(jié)點的元素。
   即:document.getElementsByClassName('red test');

3. getElementsByTagName()
getElementsByTagName方法返回所有指定標(biāo)簽的元素（搜索范圍包括本身）。返回值是一個HTMLCollection對象，也就是說，搜索結(jié)果是一個動態(tài)集合，任何元素的變化都會實時反映在返回的集合中。這個方法不僅可以在document對象上調(diào)用，也可以在任何元素節(jié)點上調(diào)用。
   

   image
   
   多個相同元素也可以設(shè)置下標(biāo)進(jìn)行選擇
   
   image
   
   上面代碼返回當(dāng)前文檔的所有p元素節(jié)點。--注意getElementsByTagName方法會將參數(shù)轉(zhuǎn)為小寫后，再進(jìn)行搜索。

4. getElementsByName()
getElementsByName方法用于選擇擁有name屬性的HTML元素，比如form、img、frame、embed和object，返回一個NodeList格式的對象，不會實時反映元素的變化。

// 假定有一個表單是<form name="x"></form>
var forms = document.getElementsByName("x");
forms[0].tagName // "FORM"

注意，在IE瀏覽器使用這個方法，會將沒有name屬性、但有同名id屬性的元素也返回，所以name和id屬性最好設(shè)為不一樣的值

5. querySelector()
querySelector方法返回匹配指定的CSS選擇器的元素節(jié)點。如果有多個節(jié)點滿足匹配條件，則返回第一個匹配的節(jié)點。如果沒有發(fā)現(xiàn)匹配的節(jié)點，則返回null。

可以完成getElementById和getElementsByTagName的工作

image

6 .querySelectorAll()
querySelectorAll方法返回匹配指定的CSS選擇器的所有節(jié)點，返回的是NodeList類型的對象。NodeList對象不是動態(tài)集合，所以元素節(jié)點的變化無法實時反映在返回結(jié)果中。
str = document.querySelectorAll(selectors);

querySelectorAll方法的參數(shù)，可以是逗號分隔的多個CSS選擇器，返回所有匹配其中一個選擇器的元素。

var matches = document.querySelectorAll("div.note, div.alert");

上面代碼返回class屬性是note或alert的div元素