資訊專欄INFORMATION COLUMN
摘要：相同之處標準的與是同步的。公認的非自定義的特性會被以屬性的形式添加到對象中。不過傳遞給的特性名與實際的特性名相同。如，，，，等事件處理程序。最好控制在最合理的范圍內。返回了元素大小，默認單位是。
前端學習：教程&開發模塊化/規范化/工程化/優化&工具/調試&值得關注的博客/Git&面試-前端資源匯總
歡迎提issues斧正：DOM
JavaScript-DOM DOM簡介DOM（Document Object Model）即文檔對象模型，針對HTML 和XML 文檔的API（應用程序接口）。DOM 描繪了一個層次化的節點樹，運行開發人員添加、移除和修改頁面的某一部分。通過 DOM，可以訪問所有的 HTML 元素，連同它們所包含的文本和屬性。可以對其中的內容進行修改和刪除，同時也可以創建新的元素。document對象是文檔的根節點，window.document屬性就指向這個對象。
DOM節點分為元素節點、屬性節點和文本節點。
而這些節點又有三個非常有用的屬性，分別為：nodeName、nodeType 和nodeValue
節點類型 nodeName nodeType nodeValue 元素 元素名稱 1 null 屬性 屬性名稱 2 屬性值 文本 #text 3 文本內容(不包含html)
F12打開console，即可操作當前網頁節點：
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" 對于所有文本節點nodeName都是"#text"
document.getElementById("mainLike").firstChild.nodeType //3
document.getElementById("mainLike").firstChild.nodeValue //"0 推薦"
DOM元素選擇
方法 說明 備注 getElementById() 獲取特定ID元素的節點 獲取單個節點對象 getElementsByClassName() 獲取指定class類的節點列表 返回值為節點數組 getElementsByTagName() 獲取相同元素的節點列表 返回值為節點數組 getElementsByName() 獲取相同名稱的節點列表 返回值為節點數組 querySelector 獲取class第一個或id的節點 返回值為一個節點對象 querySelectorAll 獲取class或id的節點列表 返回值為節點數組
jQuery在選擇器上做的非常好，使用的選擇器引擎Sizzle占了jQuery很大一部分。延伸：jQuery選擇器淺析
querySelectorAll 和getElementsBy獲取節點數組系列方法有一個很重要的區別：
querySelectorAll 返回的是一個 Static Node List
getElementsBy系列的返回的是一個 Live Node List
具體可參見知乎提問，答案很詳細
獲取HTML元素屬性屬性 說明
id 元素節點的id 名稱
title 元素節點的title 屬性值
style CSS 內聯樣式屬性值
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() 獲取特定元素節點屬性的值 setAttribute() 設置特定元素節點屬性的值 removeAttribute() 移除特定元素節點屬性getAttribute()方法
getAttribute()方法將獲取元素中某個屬性的值。它和直接使用.屬性獲取屬性值的方法有
一定區別。
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的區別，基本可以總結為attribute節點都是在HTML代碼中可見的，而property只是一個普通的名值對屬性。
Property：屬性，所有的HTML元素都由HTMLElement類型表示，HTMLElement類型直接繼承自Element并添加了一些屬性，添加的這些屬性分別對應于每個HTML元素都有下面的這5個標準特性: id,title,lang,dir,className。DOM節點是一個對象，因此，他可以和其他JavaScript對象一樣添加自定義的屬性以及方法。property的值可以是任何的數據類型，對大小寫敏感，自定義的property不會出現在html代碼中，只存在js中。
Attribute：特性，區別于property，attribute只能是字符串，大小寫不敏感，出現在innerHTML中，通過類數組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()方法將設置元素中某個屬性和值。它需要接受兩個參數：屬性名和值。如
果屬性本身已存在，那么就會被覆蓋。
document.getElementById("xzavier").setAttribute("align","center");//設置屬性和值
document.getElementById("xzavier").setAttribute("xzavier","123456");//設置自定義的屬性和值
removeAttribute()方法
removeAttribute()可以移除HTML 屬性。
document.getElementById("xzavier").removeAttribute("style");//移除屬性
PS：IE6 及更低版本不支持removeAttribute()方法。
層次節點屬性節點的層次結構可以劃分為：父節點與子節點、兄弟節點這兩種。當我們獲取其中一個元素節點的時候，就可以使用層次節點屬性來獲取它相關層次的節點。
屬性 說明 childNodes 獲取當前元素節點的所有子節點 firstChild 獲取當前元素節點的第一個子節點 lastChild 獲取當前元素節點的最后一個子節點 ownerDocument 獲取該節點的文檔根節點，相當與document parentNode 獲取當前節點的父節點 previousSibling 獲取當前節點的前一個同級節點 nextSibling 獲取當前節點的后一個同級節點 attributes 獲取當前元素節點的所有屬性節點集合節點操作
方法 說明
write() 把任意字符串插入到文檔中
createElement() 創建一個元素節點
appendChild() 將新節點追加到子節點列表的末尾
createTextNode() 創建一個文件節點
insertBefore() 將新節點插入在前面
repalceChild() 將新節點替換舊節點
cloneNode() 復制節點
removeChild() 移除節點
document.write("這是一個段落！
")"; //把任意字符串插入到文檔中去
var xzavier = document.getElementById("xzavier"); //獲取某一個元素節點
var p = document.createElement("p"); //創建一個新元素節點
xzavier.appendChild(p); //把新元素節點
添加子節點末尾
var text = document.createTextNode("段落"); //創建一個文本節點
p.appendChild(text); //將文本節點添加到子節點末尾
xzavier.parentNode.insertBefore(p, xzavier); //把
之前創建一個節點
xzavier.parentNode.replaceChild(p,xzavier); //把換成了
var clone = xzavier.firstChild.cloneNode(true); //獲取第一個子節點，true 表示復制內容
xzavier.appendChild(clone); //添加到子節點列表末尾
xzavier.parentNode.removeChild(xzavier); //刪除指定節點
DOM操作內容
innerText
document.getElementById("xzavier").innerText; //獲取文本內容(如有html 直接過濾掉)
document.getElementById("xzavier").innerText = "xzavier"; //設置文本(如有html 轉義)
除了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 = ""; //