前端學習:教程&開發模塊化/規範化/工程化/優化&工具/調試&值得關注的博客/Git&面試-前端資源彙總html
歡迎提issues斧正:DOM前端
DOM(Document Object Model)即文檔對象模型,針對HTML 和XML 文檔的API(應用程序接口)。DOM 描繪了一個層次化的節點樹,運行開發人員添加、移除和修改頁面的某一部分。經過 DOM,能夠訪問全部的 HTML 元素,連同它們所包含的文本和屬性。能夠對其中的內容進行修改和刪除,同時也能夠建立新的元素。document對象是文檔的根節點,window.document屬性就指向這個對象。node
分爲元素節點、屬性節點和文本節點。
而這些節點又有三個很是有用的屬性,分別爲:nodeName、nodeType 和nodeValuegit
節點類型 nodeName nodeType nodeValue 元素 元素名稱 1 null 屬性 屬性名稱 2 屬性值 文本 #text 3 文本內容(不包含html)
F12打開console,便可操做當前網頁節點:github
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 推薦"
方法 說明 備註 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
segmentfault
具體可參見知乎提問,答案很詳細數組
屬性 說明 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()方法將獲取元素中某個屬性的值。它和直接使用.屬性獲取屬性值的方法有
必定區別。瀏覽器
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只是一個普通的名值對屬性。cookie
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()能夠移除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('<p>這是一個段落!</p>')'; //把任意字符串插入到文檔中去 var xzavier = document.getElementById('xzavier'); //獲取某一個元素節點 var p = document.createElement('p'); //建立一個新元素節點<p> xzavier.appendChild(p); //把新元素節點<p>添加子節點末尾 var text = document.createTextNode('段落'); //建立一個文本節點 p.appendChild(text); //將文本節點添加到子節點末尾 xzavier.parentNode.insertBefore(p, xzavier); //把<div>以前建立一個節點 xzavier.parentNode.replaceChild(p,xzavier); //把<div>換成了<p> var clone = xzavier.firstChild.cloneNode(true); //獲取第一個子節點,true 表示複製內容 xzavier.appendChild(clone); //添加到子節點列表末尾 xzavier.parentNode.removeChild(xzavier); //刪除指定節點
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; } }
document.getElementById('xzavier').innerHTML; //獲取文本(不過濾HTML) document.getElementById('xzavier').innerHTML = '<b>xzavier</b>'; //可解析HTML
雖然innerHTML 能夠插入HTML,但自己仍是有必定的限制,也就是所謂的做用域元素,離開這個做用域就無效了。
xzavier.innerHTML = "<script>alert('xzavier);</script>"; //<script>元素不能被執行 xzavier.innerHTML = "<style>background:red;</style>"; //<style>元素不能被執行
還有兩個方法outerText,outerHTML基本不怎麼用。最經常使用的innerHTML 屬性和節點操做方法的比較,在插入大量HTML 標記時使用innerHTML 的效率明顯要高不少。由於在設置innerHTML 時,會建立一個HTML 解析器。這個解析器是瀏覽器級別的(C++編寫),所以執行JavaScript 會快的多。但,建立和銷燬HTML 解析器也會帶來性能損失。最好控制在最合理的範圍內。
這組屬性能夠獲取元素可視區的大小,能夠獲得元素內容及內邊距所佔據的空間大小。
xzavier.clientWidth; //400 xzavier.clientHeight //400
返回了元素大小,但沒有單位,默認單位是px
1.增長邊框,無變化
2.增長外邊距,無變化
3.增長滾動條,最終值等於本來大小減去滾動條的大小
4.增長內邊距,最終值等於本來大小加上內邊距的大小
這組屬性能夠獲取滾動內容的元素大小。
xzavier.scrollWidth; //400 xzavier.scrollWidth; //400
1.增長內邊距,最終值會等於本來大小加上內邊距大小
2.增長滾動條,最終值會等於本來大小減去滾動條大小
這組屬性能夠返回元素實際大小,包含邊框、內邊距和滾動條。
xzavier.offsetWidth; //400 xzavier.offsetHeight; //400
返回了元素大小,默認單位是px。若是沒有設置任何CSS 的寬和高度,他會獲得計算後的寬度和高度。
1.增長邊框,最終值會等於本來大小加上邊框大小
2.增長內邊距,最終值會等於本來大小加上內邊距大小
3.增長外邊據,無變化
4.增長滾動條,無變化,不會減少
這組屬性能夠獲取元素設置了左邊框和上邊框的大小。
xzavier.clientLeft; //獲取左邊框的長度 xzavier.clientTop; //獲取上邊框的長度
這組屬性能夠獲取當前元素相對於父元素的位置。
xzavier.offsetLeft; //20 xzavier.offsetTop; //20
獲取元素當前相對於父元素的位置,最好將它設置爲定位position:absolute;不然不一樣的瀏覽器會有不一樣的解釋。加上邊框和內邊距不會影響它的位置,但加上外邊據會累加。
這組屬性能夠獲取滾動條被隱藏的區域大小,也可設置定位到該區域。
xzavier.scrollTop; //獲取滾動內容上方的位置 xzavier.scrollLeft; //獲取滾動內容左方的位置
滾動條回頂部
function scrollStart(element) { if (element.scrollTop != 0) element.scrollTop = 0; }
屬性 說明 document.title 設置文檔標題 document.linkColor 未點擊過的連接顏色 document.alinkColor 激活連接的顏色 document.vlinkColor 已點擊過的連接顏色 document.URL 設置URL屬性 document.fileSize 文件大小,只讀屬性 document.cookie 設置和讀取cookie document.charset 設置字符集
通常來講用的多的也就title,URL,cookie,charset等,其餘的就不列了。
先寫這麼些,打籃球去了。代碼,籃球,生活...DOM有太多內容了,多多學習,多多總結