DOM的理解和操作

lavnFan 發(fā)布于2019-08-20 18:21 / 3349人閱讀

摘要：描繪了一個(gè)層次化的節(jié)點(diǎn)樹節(jié)點(diǎn)關(guān)系。它允許開發(fā)人員查找添加修改刪除頁(yè)面的某一部分。獲取的是所有的標(biāo)簽返回包含帶有指定類名的所有元素的節(jié)點(diǎn)列表。返回匹配的元素集合同上如果沒有匹配項(xiàng)，返回空的節(jié)點(diǎn)數(shù)組。

什么是DOM？

Document Object Model的縮寫，就是以層次化的模式來(lái)描述網(wǎng)頁(yè)的方式。

Document就是指文檔（網(wǎng)頁(yè)文件）

Object是指把網(wǎng)頁(yè)文檔看做一個(gè)整體

Model模型模式

關(guān)于DOM

DOM是針對(duì)HTML和XML文檔的一個(gè)API（應(yīng)用程序程序接口）。

DOM描繪了一個(gè)層次化的節(jié)點(diǎn)樹（節(jié)點(diǎn)關(guān)系）。

它允許開發(fā)人員查找、添加、修改、刪除頁(yè)面的某一部分。

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

DOM的屬性

nodeName ——節(jié)點(diǎn)的名字；

nodeType —— 返回一個(gè)整數(shù)，代表這個(gè)節(jié)點(diǎn)的類型，1-元素節(jié)點(diǎn)，2-屬性節(jié)點(diǎn)，3-文本節(jié)點(diǎn)；

nodeValue —— 返回一個(gè)字符串，這個(gè)節(jié)點(diǎn)的值；

childNodes —— 返回一個(gè)數(shù)組，數(shù)組由元素節(jié)點(diǎn)的子節(jié)點(diǎn)構(gòu)成；

firstChild —— 返回第一個(gè)子節(jié)點(diǎn)；

lastChild —— 返回最后一個(gè)子節(jié)點(diǎn)；

nextSibling —— 返回目標(biāo)節(jié)點(diǎn)的下一個(gè)兄弟節(jié)點(diǎn)，如果目標(biāo)節(jié)點(diǎn)后面沒有同屬于一個(gè)父節(jié)點(diǎn)的節(jié)點(diǎn)，返回null；

previousSibling —— 返回目標(biāo)節(jié)點(diǎn)的前一個(gè)兄弟節(jié)點(diǎn)，如果目標(biāo)節(jié)點(diǎn)前面沒有同屬于一個(gè)父節(jié)點(diǎn)的節(jié)點(diǎn)，返回null；

parentNode —— 返回的節(jié)點(diǎn)永遠(yuǎn)是一個(gè)元素節(jié)點(diǎn)，因?yàn)橹挥性毓?jié)點(diǎn)才有可能有子節(jié)點(diǎn)，document節(jié)點(diǎn)將返回null；

DOM節(jié)點(diǎn)的類型nodeType

nodeType屬性返回節(jié)點(diǎn)類型的常數(shù)值。不同的類型對(duì)應(yīng)不同的常數(shù)值，12種類型分別對(duì)應(yīng)1到12的常數(shù)值

元素節(jié)點(diǎn) —— Node.ELEMENT_NODE(1)

屬性節(jié)點(diǎn) —— Node.ATTRIBUTE_NODE(2)

文本節(jié)點(diǎn) —— Node.TEXT_NODE(3)

CDATA節(jié)點(diǎn) —— Node.CDATA_SECTION_NODE(4)

實(shí)體引用名稱節(jié)點(diǎn) —— Node.ENTRY_REFERENCE_NODE(5)

實(shí)體名稱節(jié)點(diǎn) —— Node.ENTITY_NODE(6)

處理指令節(jié)點(diǎn) —— Node.PROCESSING_INSTRUCTION_NODE(7)

注釋節(jié)點(diǎn) —— Node.COMMENT_NODE(8)

文檔節(jié)點(diǎn) —— Node.DOCUMENT_NODE(9)

文檔類型節(jié)點(diǎn) —— Node.DOCUMENT_TYPE_NODE(10)

文檔片段節(jié)點(diǎn) —— Node.DOCUMENT_FRAGMENT_NODE(11)

DTD聲明節(jié)點(diǎn) —— Node.NOTATION_NODE(12)

DOM節(jié)點(diǎn)操作方法

方法	描述	栗子	注意
createElement()	創(chuàng)建元素節(jié)點(diǎn)	var node = document.createElement("div");	創(chuàng)建的節(jié)點(diǎn)不會(huì)被自動(dòng)添加到文檔document里
createTextNode()	創(chuàng)建文本節(jié)點(diǎn)	var val = document.createTextNode("text");	創(chuàng)建的節(jié)點(diǎn)不會(huì)被自動(dòng)添加到文檔document里
appendChild()	插入節(jié)點(diǎn)到最后	node.appendChild(val);
insertBefore()	插入節(jié)點(diǎn)到目標(biāo)節(jié)點(diǎn)的前面	node.insertBefore(_span, _p);	節(jié)點(diǎn)在節(jié)點(diǎn)前面插入，其中第二個(gè)參數(shù)是可選，如果第二個(gè)參數(shù)不寫，將默認(rèn)添加到文檔的最后，相當(dāng)于appendChild。
cloneNode(boolean)	復(fù)制節(jié)點(diǎn)	node.cloneNode(true);/node.cloneNode(false)	參數(shù)true，復(fù)制整個(gè)節(jié)點(diǎn)和里面的內(nèi)容；false，只復(fù)制節(jié)點(diǎn)不要里面的內(nèi)容，復(fù)制后的新節(jié)點(diǎn)不會(huì)被自動(dòng)插入到文檔。
removeChild()	刪除節(jié)點(diǎn)	node.removeChild(_p);
getAttribute()	獲取節(jié)點(diǎn)屬性	node.getAttribute("title");
setAttribute()	設(shè)置節(jié)點(diǎn)屬性	node.setAttribute("title","我是個(gè)美少女");	class屬性不能這樣設(shè)置。
hasChildNodes	判斷元素是否有子節(jié)點(diǎn)	node.hasChildNodes;	返回布爾值。
replaceChild()	替換子節(jié)點(diǎn)	var returnNode = ul.replaceChild(li,lis[1]); //用創(chuàng)建的li替換原來(lái)的第二個(gè)li	用于替換節(jié)點(diǎn)，接受兩個(gè)參數(shù)，第一參數(shù)是要插入的節(jié)點(diǎn)，第二個(gè)是要替換的節(jié)點(diǎn)，返回被替換的節(jié)點(diǎn)
document.getElementById()	返回帶有指定ID的元素	var element=document.getElementById("intro");
document.getElementsByTagName()	返回包含帶有指定標(biāo)簽名稱的所有元素的節(jié)點(diǎn)列表（集合/節(jié)點(diǎn)數(shù)組）。	var element=document.getElementsByTagName("p");	獲取的是所有的p標(biāo)簽
document.getElementsByClassName()	返回包含帶有指定類名的所有元素的節(jié)點(diǎn)列表。	var element=document.getElementsByClassName("_p");	獲取的是所有的含有‘_p’類名的元素
document.getElementsByName()	返回帶有指定名稱的對(duì)象的集合	var x=document.getElementsByName("sex"); alert(x.length);	查詢?cè)氐?name 屬性，比如單選框它有一組一樣的name值，所以返回的是一個(gè)元素的數(shù)組，而不是一個(gè)元素。
document.querySelector	返回匹配的第一個(gè)元素	var obj = document.querySelector("#id"); var obj = document.querySelector(".classname"); var obj = document.querySelector("div");	如果沒有匹配項(xiàng)，返回null。
document.querySelectorAll	返回匹配的元素集合	同上	如果沒有匹配項(xiàng)，返回空的nodelist(節(jié)點(diǎn)數(shù)組)。