摘要：相同之處標準的與是同步的。公認的非自定義的特性會被以屬性的形式添加到對象中。不過傳遞給的特性名與實際的特性名相同。如，，，，等事件處理程序。最好控制在最合理的范圍內(nèi)。返回了元素大小，默認單位是。

前端學習：教程&開發(fā)模塊化/規(guī)范化/工程化/優(yōu)化&工具/調(diào)試&值得關注的博客/Git&面試-前端資源匯總

歡迎提issues斧正：DOM

JavaScript-DOM DOM簡介

DOM（Document Object Model）即文檔對象模型，針對HTML 和XML 文檔的API（應用程序接口）。DOM 描繪了一個層次化的節(jié)點樹，運行開發(fā)人員添加、移除和修改頁面的某一部分。通過 DOM，可以訪問所有的 HTML 元素，連同它們所包含的文本和屬性?？梢詫ζ渲械膬?nèi)容進行修改和刪除，同時也可以創(chuàng)建新的元素。document對象是文檔的根節(jié)點，window.document屬性就指向這個對象。

DOM節(jié)點

分為元素節(jié)點、屬性節(jié)點和文本節(jié)點。
而這些節(jié)點又有三個非常有用的屬性，分別為：nodeName、nodeType 和nodeValue

節(jié)點類型       nodeName     nodeType     nodeValue
  元素          元素名稱       1           null
  屬性          屬性名稱       2          屬性值
  文本           #text        3     文本內(nèi)容(不包含html)

F12打開console，即可操作當前網(wǎng)頁節(jié)點：

document.getElementById("mainLike").nodeName  //"BUTTON"
document.getElementById("mainLike").nodeType  //1
document.getElementById("mainLike").nodeValue //null
document.getElementById("mainLike").getAttributeNode("class").nodeName //"class"
document.getElementById("mainLike").getAttributeNode("class").nodeType //2
document.getElementById("mainLike").getAttributeNode("class").nodeValue //"btn btn-success btn-lg mr10"
document.getElementById("mainLike").firstChild.nodeName  //"#text" 對于所有文本節(jié)點nodeName都是"#text"
document.getElementById("mainLike").firstChild.nodeType  //3
document.getElementById("mainLike").firstChild.nodeValue  //"0 推薦"

DOM元素選擇

      方法                      說明                  備注
getElementById()          獲取特定ID元素的節(jié)點       獲取單個節(jié)點對象
getElementsByClassName()  獲取指定class類的節(jié)點列表  返回值為節(jié)點數(shù)組
getElementsByTagName()    獲取相同元素的節(jié)點列表     返回值為節(jié)點數(shù)組
getElementsByName()       獲取相同名稱的節(jié)點列表     返回值為節(jié)點數(shù)組
querySelector             獲取class第一個或id的節(jié)點  返回值為一個節(jié)點對象
querySelectorAll          獲取class或id的節(jié)點列表    返回值為節(jié)點數(shù)組

jQuery在選擇器上做的非常好，使用的選擇器引擎Sizzle占了jQuery很大一部分。延伸：jQuery選擇器淺析

querySelectorAll 和getElementsBy獲取節(jié)點數(shù)組系列方法有一個很重要的區(qū)別：
querySelectorAll 返回的是一個 Static Node List
getElementsBy系列的返回的是一個 Live Node List

具體可參見知乎提問，答案很詳細

獲取HTML元素屬性

屬性         說明
id        元素節(jié)點的id 名稱
title     元素節(jié)點的title 屬性值
style     CSS 內(nèi)聯(lián)樣式屬性值
className CSS 元素的類

document.getElementById("xzavier").id; //獲取id
document.getElementById("xzavier").id = "man"; //設置id
document.getElementById("xzavier").title; //獲取title
document.getElementById("xzavier").title = "標題" //設置title
document.getElementById("xzavier").style; //獲取CSSStyleDeclaration對象
document.getElementById("xzavier").style.color; //獲取style對象中color的值
document.getElementById("xzavier").style.color = "red"; //設置style對象中color的值
document.getElementById("xzavier").className; //獲取class
document.getElementById("xzavier").className = "xzavier"; //設置class

屬性方法

getAttribute()            獲取特定元素節(jié)點屬性的值
setAttribute()            設置特定元素節(jié)點屬性的值
removeAttribute()         移除特定元素節(jié)點屬性

getAttribute()方法

getAttribute()方法將獲取元素中某個屬性的值。它和直接使用.屬性獲取屬性值的方法有
一定區(qū)別。

document.getElementById("xzavier").getAttribute("id");//獲取元素的id 值
document.getElementById("xzavier").id; //獲取元素的id 值
document.getElementById("xzavier").getAttribute("mydiv");//獲取元素的自定義屬性值
document.getElementById("xzavier").mydiv //獲取元素的自定義屬性值，非IE 不支持
document.getElementById("xzavier").getAttribute("class");//獲取元素的class 值，IE 不支持
document.getElementById("xzavier").getAttribute("className");//非IE 不支持

這里說一下attribute和property的區(qū)別，基本可以總結為attribute節(jié)點都是在HTML代碼中可見的，而property只是一個普通的名值對屬性。

Property：屬性，所有的HTML元素都由HTMLElement類型表示，HTMLElement類型直接繼承自Element并添加了一些屬性，添加的這些屬性分別對應于每個HTML元素都有下面的這5個標準特性: id,title,lang,dir,className。DOM節(jié)點是一個對象，因此，他可以和其他JavaScript對象一樣添加自定義的屬性以及方法。property的值可以是任何的數(shù)據(jù)類型，對大小寫敏感，自定義的property不會出現(xiàn)在html代碼中，只存在js中。

Attribute：特性，區(qū)別于property，attribute只能是字符串，大小寫不敏感，出現(xiàn)在innerHTML中，通過類數(shù)組attributes可以羅列所有的attribute。

相同之處
標準的 DOM properties 與 attributes 是同步的。公認的（非自定義的）特性會被以屬性的形式添加到DOM對象中。如，id，align，style等，這時候操作property或者使用操作特性的DOM方法如getAttribute()都可以操作屬性。不過傳遞給getAttribute()的特性名與實際的特性名相同。因此對于class的特性值獲取的時候要傳入“class”。

不同之處
1).對于有些標準的特性的操作，getAttribute與點號(.)獲取的值存在差異性。如href，src，value，style，onclick等事件處理程序。
2).href：getAttribute獲取的是href的實際值，而點號獲取的是完整的url，存在瀏覽器差異。

setAttribute()方法

setAttribute()方法將設置元素中某個屬性和值。它需要接受兩個參數(shù)：屬性名和值。如
果屬性本身已存在，那么就會被覆蓋。

document.getElementById("xzavier").setAttribute("align","center");//設置屬性和值
document.getElementById("xzavier").setAttribute("xzavier","123456");//設置自定義的屬性和值

removeAttribute()方法

removeAttribute()可以移除HTML 屬性。

document.getElementById("xzavier").removeAttribute("style");//移除屬性

PS：IE6 及更低版本不支持removeAttribute()方法。

層次節(jié)點屬性

節(jié)點的層次結構可以劃分為：父節(jié)點與子節(jié)點、兄弟節(jié)點這兩種。當我們獲取其中一個元素節(jié)點的時候，就可以使用層次節(jié)點屬性來獲取它相關層次的節(jié)點。

   屬性                說明
childNodes      獲取當前元素節(jié)點的所有子節(jié)點
firstChild      獲取當前元素節(jié)點的第一個子節(jié)點
lastChild       獲取當前元素節(jié)點的最后一個子節(jié)點
ownerDocument   獲取該節(jié)點的文檔根節(jié)點，相當與document
parentNode      獲取當前節(jié)點的父節(jié)點
previousSibling 獲取當前節(jié)點的前一個同級節(jié)點
nextSibling     獲取當前節(jié)點的后一個同級節(jié)點
attributes      獲取當前元素節(jié)點的所有屬性節(jié)點集合

節(jié)點操作

      方法                說明
write()           把任意字符串插入到文檔中
createElement()   創(chuàng)建一個元素節(jié)點
appendChild()     將新節(jié)點追加到子節(jié)點列表的末尾
createTextNode()  創(chuàng)建一個文件節(jié)點
insertBefore()    將新節(jié)點插入在前面
repalceChild()    將新節(jié)點替換舊節(jié)點
cloneNode()       復制節(jié)點
removeChild()     移除節(jié)點

document.write("
這是一個段落！
")";  //把任意字符串插入到文檔中去
var xzavier = document.getElementById("xzavier"); //獲取某一個元素節(jié)點
var p = document.createElement("p"); //創(chuàng)建一個新元素節(jié)點

xzavier.appendChild(p); //把新元素節(jié)點
添加子節(jié)點末尾
var text = document.createTextNode("段落"); //創(chuàng)建一個文本節(jié)點
p.appendChild(text); //將文本節(jié)點添加到子節(jié)點末尾
xzavier.parentNode.insertBefore(p, xzavier); //把
之前創(chuàng)建一個節(jié)點
xzavier.parentNode.replaceChild(p,xzavier); //把
換成了

var clone = xzavier.firstChild.cloneNode(true); //獲取第一個子節(jié)點，true 表示復制內(nèi)容
xzavier.appendChild(clone); //添加到子節(jié)點列表末尾
xzavier.parentNode.removeChild(xzavier); //刪除指定節(jié)點

DOM操作內(nèi)容 innerText

document.getElementById("xzavier").innerText; //獲取文本內(nèi)容(如有html 直接過濾掉)
document.getElementById("xzavier").innerText = "xzavier"; //設置文本(如有html 轉(zhuǎn)義)

除了Firefox 之外，其他瀏覽器均支持這個方法。但Firefox 的DOM3級提供了另外一個類似的屬性：textContent，做上兼容即可通用。

document.getElementById("xzavier").textContent; //Firefox 支持

兼容一下：

function getInnerText(element) {
    return (typeof element.textContent == "string") ? element.textContent : element.innerText;
}
function setInnerText(element, text) {
    if (typeof element.textContent == "string") {
        element.textContent = text;
    } else {
        element.innerText = text;
    }
}

innerHTML

document.getElementById("xzavier").innerHTML; //獲取文本(不過濾HTML)
document.getElementById("xzavier").innerHTML = "xzavier"; //可解析HTML

雖然innerHTML 可以插入HTML，但本身還是有一定的限制，也就是所謂的作用域元素，離開這個作用域就無效了。

xzavier.innerHTML = ""; //