DOM 操作

zhoutk 發布于2019-08-22 18:36 / 3253人閱讀

摘要：和合并文本節點在父元素上操作和分割文本節點在子元素上操作返回找到匹配的第一元素返回找到匹配的所有元素檢測該元素與選擇符是否匹配和返回找到匹配的第一元素和返回找到匹配的所有元素。

下面用的代碼

Node

childNodes獲取到的是父元素下所有的一級子元素，是一個類似數組的對象，例如：boxChildNodes結果是：[ 0:text , 1:ul.banner , 2:text , 3:ul.number , 4:text, length:5]，它會獲取到元素和元素之間的空隙（文本），如上面所示的0,2,4。使用Array.prototype.slice(childNode,0)方法，可將偽數組變成數組，或者用遍歷的方法也可以將它變成數組。

children和childNodes類似，區別是它不會獲取到文本和文本之間的空隙（文本）。

parentNode可以獲取子元素的上一級（父元素）。

previousSibling和nextSibling獲取上一個或下一個兄弟元素。

firstChild和lastChild獲取父元素下第一個或最后一個子元素（包括空隙，也就是文本）。

boxChildNodes的第一個子節點是boxChildNodes[0] === box.firstChild，boxChildNodes[boxChildNodes.length-1] === box.lastChild。

hasChildNodes()可以查詢父元素下面是否有子元素（1個或多個），有返回true，沒有返回false，要注意：文本節點也是節點。

ownerDocument 查詢一個元素的根元素。

appendChild(newNode,oldNode)在父元素上最后一個元素后面添加新的子元素，無法指定添加到某個元素前后。

insertBefore(newNode,oldNode)在父元素下某個子元素前添加新的子元素，如果父元素下的某個子元素找不到，則在父元素下最后一個子元素后添加新的子元素和appendChild()方法一樣。

removeChild(oldNode)移除父元素下的某節點

Document

xx

document.documentElement 獲得html元素

document.body獲得body元素

document.head獲得head元素

document.doctype獲得doctype的引用

document.title獲得title內容

document.anchors獲得所有帶name的a標簽

document.forms獲得所有form標簽

document.links獲得所有帶href的標簽

Element

nodeTyp===1為標簽，nodeType===3為文本。

nodeName和tagName都是返回元素的標簽名，返回的都是大寫，用的時候需要進行大小寫轉換。

getAttribute()，setAttribute()，removeAttribute()獲取，設置和刪除元素的屬性，和直接使用box.id效果一樣，區別是get...這類方法是能獲取自定義屬性的。

自定義屬性可以通過dataset訪問

createElement()和createTextNode()創建元素標簽和創建文本，需要用appendChild()添加到頁面中去。

normalize()和splitText()合并文本節點（在父元素上操作）和分割文本節點（在子元素上操作）

DOM Selector

querySelector()和querySelectorAll()返回找到匹配的第一元素和返回找到匹配的所有元素。

matches() 檢測該元素與選擇符是否匹配

div.classList.remove("user")刪除class，div.classList.add("current")添加class，div.classList.toggle("user")如果有這個class就刪除，沒有就添加。

刪除或添加class另一種比較復雜的方法



var div = document.getElementById("xx")
var className = div.className.split(/s/g)
var pos = -1
for(var i = 0; i

GPU云服務器云服務器 Dom操作 dom對象操作 DOM交互操作 PHP操作DOM

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

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

react虛擬dom機制與diff算法

摘要：的一個突出特點是擁有極速地渲染性能。該功能依靠的就是研發團隊弄出的虛擬機制以及其獨特的算法。在的算法下，在同一位置對比前后節點只要發現不同，就會刪除操作前的節點包括其子節點，替換為操作后的節點。 React的一個突出特點是擁有極速地渲染性能。該功能依靠的就是facebook研發團隊弄出的虛擬dom機制以及其獨特的diff算法。下面簡單解釋一下react虛擬dom機制和diff算法的實現...

jzman 2019-08-21 11:53 評論0 收藏0
前端頁面卡頓、也許是DOM操作惹的禍？

摘要：界面上的更改都是通過操作實現的，并不是通過傳統的刷新頁面實現的。操作優化的總原則是盡量減少操作。通過在文檔片段上進行操作，可以降低操作對頁面性能的影響，這種方式是創建一個文檔片段，并在此片段上進行必要的操作，操作完成后將它附加在頁面中。界面上UI的更改都是通過DOM操作實現的，并不是通過傳統的刷新頁面實現的。盡管DOM提供了豐富接口供外部調用，但DOM操作的代價很高，頁面前端代碼的...

AnthonyHan 2019-08-20 16:57 評論0 收藏0
虛擬DOM

摘要：什么是虛擬舉例說明如果網頁中有一個表格，表頭是姓名，年級，分數。即我們用虛擬的結構替換需要處理的結構，對虛擬的進行操作之后再進行渲染，就成為了真實的數據。當狀態變更的時候用修改后的新渲染的的對象和舊的虛擬對象作對比，記錄著兩棵樹的差異。虛擬DOM 可以看看這個文章如何理解虛擬DOM？ - 戴嘉華的回答 - 知乎 https://www.zhihu.com/questio... 深度剖...

yanwei 2019-08-23 12:11 評論0 收藏0
虛擬DOM

摘要：什么是虛擬舉例說明如果網頁中有一個表格，表頭是姓名，年級，分數。即我們用虛擬的結構替換需要處理的結構，對虛擬的進行操作之后再進行渲染，就成為了真實的數據。當狀態變更的時候用修改后的新渲染的的對象和舊的虛擬對象作對比，記錄著兩棵樹的差異。虛擬DOM 可以看看這個文章如何理解虛擬DOM？ - 戴嘉華的回答 - 知乎 https://www.zhihu.com/questio... 深度剖...

alin 2019-08-02 11:37 評論0 收藏0
虛擬DOM與DIFF算法學習

摘要：比較虛擬與的差異，以及對節點的操作，其實就是樹的差異比較，就是對樹的節點進行替換。忽略掉這種特殊的情況后，大膽的修改了算法按直系兄弟節點比較比較。這當中對比的細節才是整個算法最精粹的地方。一、舊社會的頁面渲染 ???????在jQuery橫行的時代，FEer們，通過各種的方式去對頁面的DOM進行操作，計算大小，變化，來讓頁面生動活潑起來，豐富的DOM操作，讓一個表面簡單的頁面能展示出...

codergarden 2019-08-23 10:32 評論0 收藏0
JS基礎篇--JS的DOM操作 - 你真的了解嗎?

摘要：摘要想稍微系統的說說對于的操作把和常用操作的內容歸納成思維導圖方便閱讀同時加入性能上的一些問題前言在前端開發的過程中極為重要的一個功能就是對對象的操作無論增刪改查在前端頁面操作這一范圍內都是比較消耗性能的如何高效率的便捷的操作這就是本文要講摘要想稍微系統的說說對于DOM的操作,把Javascript和jQuery常用操作DOM的內容歸納成思維導圖方便閱讀,同時加入性能上的一些問題....

DirtyMind 2019-08-22 10:59 評論0 收藏0