本文和大家分享的主要是javascript中DOM相關內容，一起來看看吧，希望對大家學習javascript有所幫助。

　　DOM

　　文檔對象模型 (DOM) 是HTML和XML文檔的編程接口。它給文檔（結構樹）提供了一個結構化的表述并且定義了一種方式—程序可以對結構樹進行訪問，以改變文檔的結構，樣式和內容。

　　DOM 提供了一種表述形式將文檔作為一個結構化的節(jié)點組以及包含屬性和方法的對象。從本質上說，它將web 頁面和腳本或編程語言連接起來了。

　　要改變頁面的某個東西，JavaScript就需要獲得對HTML文檔中所有元素進行訪問的入口。這個入口，連同對 HTML 元素進行添加、移動、改變或移除的方法和屬性，都是通過DOM來獲得的

　　Document對象常用方法

　　1.open(),close()

　　document.open方法用于新建一個文檔，供write方法寫入內容。它實際上等于清除當前文檔，重新寫入內容

　　document.close方法用于關閉open方法所新建的文檔。一旦關閉，write方法就無法寫入內容了。

　　2.write()

　　document.write方法用于向當前文檔寫入內容。只要當前文檔還沒有用close方法關閉，它所寫入的內容就會追加在已有內容的后面。

　　如果頁面已經渲染完成再調用write方法，它會先調用open方法，擦除當前文檔所有內容，然后再寫入。

　　如果在頁面渲染過程中調用write方法，并不會調用open方法。

　　需要注意的是，雖然調用close方法之后，無法再用write方法寫入內容，但這時當前頁面的其他DOM節(jié)點還是會繼續(xù)加載。

　　除了某些特殊情況，應該盡量避免使用document.write這個方法。

　　Element對象

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

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

　　Element有幾個重要屬性

　　nodeName：元素標簽名，還有個類似的tagName

　　nodeType：元素類型

　　className：類名

　　id：元素id

　　children：子元素列表（HTMLCollection）

　　childNodes：子元素列表（NodeList）

　　firstChild：第一個子元素

　　lastChild：最后一個子元素

　　nextSibling：下一個兄弟元素

　　previousSibling：上一個兄弟元素

　　parentNode、parentElement：父元素

　　查詢元素

　　getElementById()

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

　　getElementByClassName()

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

　　getElementByTagName()

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

　　querySelector()

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

　　querySelectorAll()

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

　　創(chuàng)建元素

　　creatElement()

　　方法用來生成HTML元素節(jié)點。

　　方法的參數(shù)為元素的標簽名，即元素節(jié)點的tagName屬性。如果傳入大寫的標簽名，會被轉為小寫。如果參數(shù)帶有尖括號（即<和>）或者是null，會報錯。

　　creatTextNode()

　　createTextNode方法用來生成文本節(jié)點，參數(shù)為所要生成的文本節(jié)點的內容。

　　createDocumentFragment()

　　createDocumentFragment方法生成一個DocumentFragment對象。

　　DocumentFragment對象是一個存在于內存的DOM片段，但是不屬于當前文檔，常常用來生成較復雜的DOM結構，然后插入當前文檔。這樣做的好處在于，因為DocumentFragment不屬于當前文檔，對它的任何改動，都不會引發(fā)網頁的重新渲染，比直接修改當前文檔的DOM有更好的性能表現(xiàn)。

　　修改元素

　　appendChild()

　　在元素末尾添加元素

　　insertBefore()

　　在某個元素之前插入元素

　　replaceChild()

　　replaceChild()接受兩個參數(shù)：要插入的元素和要替換的元素

　　屬性操作

　　getAttribute()

　　getAttribute()用于獲取元素的attribute值

　　node.getAttribute('id');

　　creatAttribute()

　　createAttribute()方法生成一個新的屬性對象節(jié)點，并返回它。

　　attribute = document.createAttribute(name);

　　setAttribute()

　　setAttribute()方法用于設置元素屬性

　　var node = document.getElementById("div1");

　　node.setAttribute("my_attrib", "newVal");

　　var node = document.getElementById("div1");

　　var a = document.createAttribute("my_attrib");

　　a.value = "newVal";

　　node.setAttributeNode(a);

　　removeAttribute()

　　removeAttribute()用于刪除元素屬性

　　node.removeAttribute('id');

 

 

來源：簡書