DOM的理解和操作

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

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

什么是DOM？

Document Object Model的縮寫，就是以層次化的模式來描述網頁的方式。

Document就是指文檔（網頁文件）

Object是指把網頁文檔看做一個整體

Model模型模式

關于DOM

DOM是針對HTML和XML文檔的一個API（應用程序程序接口）。

DOM描繪了一個層次化的節(jié)點樹（節(jié)點關系）。

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

DOM節(jié)點樹

DOM的屬性

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

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

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

childNodes —— 返回一個數組，數組由元素節(jié)點的子節(jié)點構成；

firstChild —— 返回第一個子節(jié)點；

lastChild —— 返回最后一個子節(jié)點；

nextSibling —— 返回目標節(jié)點的下一個兄弟節(jié)點，如果目標節(jié)點后面沒有同屬于一個父節(jié)點的節(jié)點，返回null；

previousSibling —— 返回目標節(jié)點的前一個兄弟節(jié)點，如果目標節(jié)點前面沒有同屬于一個父節(jié)點的節(jié)點，返回null；

parentNode —— 返回的節(jié)點永遠是一個元素節(jié)點，因為只有元素節(jié)點才有可能有子節(jié)點，document節(jié)點將返回null；

DOM節(jié)點的類型nodeType

nodeType屬性返回節(jié)點類型的常數值。不同的類型對應不同的常數值，12種類型分別對應1到12的常數值

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

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

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

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

實體引用名稱節(jié)點 —— Node.ENTRY_REFERENCE_NODE(5)

實體名稱節(jié)點 —— Node.ENTITY_NODE(6)

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

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

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

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

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

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

DOM節(jié)點操作方法

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

GPU云服務器云服務器云計算和大數據的理解 Dom操作 dom對象操作 DOM交互操作

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://m.hztianpu.com/yun/84399.html

React Virtual DOM 理解

摘要：二原理每個都有兩個，一個是新的，一個是原來的。三實現(xiàn)過程四算法的理解與實現(xiàn)本質上就是在和之間做了一個緩存。將差異的應用到真正的樹上對真實上的樹進行深度優(yōu)先遍歷，在所有的差異列表中找出當前遍歷的節(jié)點差異，然后根據不同進行操作。 React Virtual DOM 一、概念在react中，對于每個DOM對象都有一個相應的虛擬DOM對象，相當于DOM對象的輕量級副本由于是Virtual...

smallStone 2019-08-23 11:40 評論0 收藏0
我理解的關于Vue.nextTick()的正確使用

摘要：在數據變化后要執(zhí)行的某個操作，而這個操作需要使用隨數據改變而改變的結構的時候，這個操作都應該放進的回調函數中。這樣回調函數在更新完成后就會調用。關于作者程序開發(fā)人員，不拘泥于語言與技術，目前主要從事PHP和前端開發(fā)，使用Laravel和VueJs，App端使用Apicloud混合式開發(fā)。合適和夠用是最完美的追求。個人網站：http://www.linganmin.cn 最近剛寫...

YorkChen 2019-08-20 14:46 評論0 收藏0
我理解的關于Vue.nextTick()的正確使用

摘要：在數據變化后要執(zhí)行的某個操作，而這個操作需要使用隨數據改變而改變的結構的時候，這個操作都應該放進的回調函數中。這樣回調函數在更新完成后就會調用。關于作者程序開發(fā)人員，不拘泥于語言與技術，目前主要從事PHP和前端開發(fā)，使用Laravel和VueJs，App端使用Apicloud混合式開發(fā)。合適和夠用是最完美的追求。個人網站：http://www.linganmin.cn 最近剛寫...

CHENGKANG 2019-08-01 16:26 評論0 收藏0
關于DOM操作是異步的還是同步的相關理解

摘要：關于異步應該很多地方都說過，是單線程的，嚴格的說，是指引擎中負責解釋和執(zhí)行代碼的線程只有一個，除此之外，其實還有事件觸發(fā)線程請求線程等，因此，應該說同步是單線程可能更準確些。作者：心葉時間：2019-03-08 09:45 我的理解先列出我的理解，然后再從具體的例子中說明： DOM操作本身應該是同步的（當然，我說的是單純的DOM操作，不考慮ajax請求后渲染等） DOM操作之后導...

jayzou 2019-08-26 13:32 評論0 收藏0
一起理解 Virtual DOM

摘要：具體而言，就是每次數據發(fā)生變化，就重新執(zhí)行一次整體渲染。而給出了解決方案，就是。由于只關注，通過閱讀兩個庫的源碼，對于的定位有了更深一步的理解。第二個而且，技術本身不是目的，能夠更好地解決問題才是王道嘛。前言 React 好像已經火了很久很久，以致于我們對于 Virtual DOM 這個詞都已經很熟悉了，網上也有非常多的介紹 React、Virtual DOM 的文章。但是直到前不久...

Tangpj 2019-08-22 10:46 評論0 收藏0
細說 jQuery 元素篇（一） - 理解 DOM

摘要：最強大的特性之一就是簡化了對元素的操作。從圖中，我們可以看出元素中父元素子元素之間的關系。被封裝到對象中的元素會被自動地，隱式地循環(huán)遍歷。訪問從上可知，返回的是對象，但是我們有時也希望直接對元素進行操作。 DOM - Document Object Model，即文檔對象模型，它通過對象樹來展示 HTML 代碼。jQuery 最強大的特性之一就是簡化了對 DOM 元素的操作。 DOM...

everfight 2019-08-19 14:52 評論0 收藏0