国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

DOM的理解和操作

lavnFan / 3334人閱讀

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

什么是DOM？

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

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

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

Model模型模式

關于DOM

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

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

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

DOM節點樹

DOM的屬性

nodeName ——節點的名字；

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

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

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

firstChild —— 返回第一個子節點；

lastChild —— 返回最后一個子節點；

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

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

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

DOM節點的類型nodeType

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

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

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

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

CDATA節點 —— Node.CDATA_SECTION_NODE(4)

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

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

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

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

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

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

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

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

DOM節點操作方法
方法 描述 栗子 注意
createElement() 創建元素節點 var node = document.createElement("div"); 創建的節點不會被自動添加到文檔document里
createTextNode() 創建文本節點 var val = document.createTextNode("text"); 創建的節點不會被自動添加到文檔document里
appendChild() 插入節點到最后 node.appendChild(val);
insertBefore() 插入節點到目標節點的前面 node.insertBefore(_span, _p); 節點在

節點前面插入，其中第二個參數是可選，如果第二個參數不寫，將默認添加到文檔的最后，相當于appendChild。
cloneNode(boolean) 復制節點 node.cloneNode(true);/node.cloneNode(false) 參數true，復制整個節點和里面的內容；false，只復制節點不要里面的內容，復制后的新節點不會被自動插入到文檔。
removeChild() 刪除節點 node.removeChild(_p);
getAttribute() 獲取節點屬性 node.getAttribute("title");
setAttribute() 設置節點屬性 node.setAttribute("title","我是個美少女"); class屬性不能這樣設置。
hasChildNodes 判斷元素是否有子節點 node.hasChildNodes; 返回布爾值。
replaceChild() 替換子節點 var returnNode = ul.replaceChild(li,lis[1]); //用創建的li替換原來的第二個li 用于替換節點，接受兩個參數，第一參數是要插入的節點，第二個是要替換的節點，返回被替換的節點
document.getElementById() 返回帶有指定ID的元素 var element=document.getElementById("intro");
document.getElementsByTagName() 返回包含帶有指定標簽名稱的所有元素的節點列表（集合/節點數組）。 var element=document.getElementsByTagName("p"); 獲取的是所有的p標簽
document.getElementsByClassName() 返回包含帶有指定類名的所有元素的節點列表。 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(節點數組)。

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

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

相關文章

  • React Virtual DOM 理解

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

    smallStone 評論0 收藏0

  • 我理解的關于Vue.nextTick()的正確使用

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

    YorkChen 評論0 收藏0

  • 我理解的關于Vue.nextTick()的正確使用

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

    CHENGKANG 評論0 收藏0

  • 關于DOM操作是異步的還是同步的相關理解

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

    jayzou 評論0 收藏0

  • 一起理解 Virtual DOM

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

    Tangpj 評論0 收藏0

  • 細說 jQuery 元素篇（一） - 理解 DOM

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

    everfight 評論0 收藏0

發表評論

0條評論

lavnFan

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<