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

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

歡迎提issues斧正：DOM

JavaScript-DOM DOM簡(jiǎn)介

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

DOM節(jié)點(diǎn)

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

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

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

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" 對(duì)于所有文本節(jié)點(diǎn)nodeName都是"#text"
document.getElementById("mainLike").firstChild.nodeType  //3
document.getElementById("mainLike").firstChild.nodeValue  //"0 推薦"

DOM元素選擇

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

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

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

具體可參見知乎提問，答案很詳細(xì)

獲取HTML元素屬性

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

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

屬性方法

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

getAttribute()方法

getAttribute()方法將獲取元素中某個(gè)屬性的值。它和直接使用.屬性獲取屬性值的方法有
一定區(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ū)別，基本可以總結(jié)為attribute節(jié)點(diǎn)都是在HTML代碼中可見的，而property只是一個(gè)普通的名值對(duì)屬性。

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

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

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

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

setAttribute()方法

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

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

removeAttribute()方法

removeAttribute()可以移除HTML 屬性。

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

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

層次節(jié)點(diǎn)屬性

節(jié)點(diǎn)的層次結(jié)構(gòu)可以劃分為：父節(jié)點(diǎn)與子節(jié)點(diǎn)、兄弟節(jié)點(diǎn)這兩種。當(dāng)我們獲取其中一個(gè)元素節(jié)點(diǎn)的時(shí)候，就可以使用層次節(jié)點(diǎn)屬性來獲取它相關(guān)層次的節(jié)點(diǎn)。

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

節(jié)點(diǎn)操作

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

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

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

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

DOM操作內(nèi)容 innerText

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

除了Firefox 之外，其他瀏覽器均支持這個(gè)方法。但Firefox 的DOM3級(jí)提供了另外一個(gè)類似的屬性：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，但本身還是有一定的限制，也就是所謂的作用域元素，離開這個(gè)作用域就無效了。

xzavier.innerHTML = ""; //