資訊專欄INFORMATION COLUMN
摘要：和合并文本節(jié)點在父元素上操作和分割文本節(jié)點在子元素上操作返回找到匹配的第一元素返回找到匹配的所有元素檢測該元素與選擇符是否匹配和返回找到匹配的第一元素和返回找到匹配的所有元素。
下面用的代碼
Node
childNodes獲取到的是父元素下所有的一級子元素，是一個類似數(shù)組的對象，例如：boxChildNodes結(jié)果是：[ 0:text , 1:ul.banner , 2:text , 3:ul.number , 4:text, length:5]，它會獲取到元素和元素之間的空隙（文本），如上面所示的0,2,4。使用Array.prototype.slice(childNode,0)方法，可將偽數(shù)組變成數(shù)組，或者用遍歷的方法也可以將它變成數(shù)組。
children和childNodes類似，區(qū)別是它不會獲取到文本和文本之間的空隙（文本）。
parentNode可以獲取子元素的上一級（父元素）。
previousSibling和nextSibling獲取上一個或下一個兄弟元素。
firstChild和lastChild獲取父元素下第一個或最后一個子元素（包括空隙，也就是文本）。
boxChildNodes的第一個子節(jié)點是boxChildNodes[0] === box.firstChild，boxChildNodes[boxChildNodes.length-1] === box.lastChild。
hasChildNodes()可以查詢父元素下面是否有子元素（1個或多個），有返回true，沒有返回false，要注意：文本節(jié)點也是節(jié)點。
ownerDocument 查詢一個元素的根元素。
appendChild(newNode,oldNode)在父元素上最后一個元素后面添加新的子元素，無法指定添加到某個元素前后。
insertBefore(newNode,oldNode)在父元素下某個子元素前添加新的子元素，如果父元素下的某個子元素找不到，則在父元素下最后一個子元素后添加新的子元素和appendChild()方法一樣。
removeChild(oldNode)移除父元素下的某節(jié)點
Document
xx
document.documentElement 獲得html元素
document.body獲得body元素
document.head獲得head元素
document.doctype獲得doctype的引用
document.title獲得title內(nèi)容
document.anchors獲得所有帶name的a標(biāo)簽
document.forms獲得所有form標(biāo)簽
document.links獲得所有帶href的標(biāo)簽
ElementnodeTyp===1為標(biāo)簽，nodeType===3為文本。
nodeName和tagName都是返回元素的標(biāo)簽名，返回的都是大寫，用的時候需要進(jìn)行大小寫轉(zhuǎn)換。
getAttribute()，setAttribute()，removeAttribute()獲取，設(shè)置和刪除元素的屬性，和直接使用box.id效果一樣，區(qū)別是get...這類方法是能獲取自定義屬性的。
自定義屬性可以通過dataset訪問
createElement()和createTextNode()創(chuàng)建元素標(biāo)簽和創(chuàng)建文本，需要用appendChild()添加到頁面中去。
normalize()和splitText()合并文本節(jié)點（在父元素上操作）和分割文本節(jié)點（在子元素上操作）
DOM Selector
querySelector()和querySelectorAll()返回找到匹配的第一元素和返回找到匹配的所有元素。
matches() 檢測該元素與選擇符是否匹配
div.classList.remove("user")刪除class，div.classList.add("current")添加class，div.classList.toggle("user")如果有這個class就刪除，沒有就添加。
刪除或添加class另一種比較復(fù)雜的方法
var div = document.getElementById("xx")
var className = div.className.split(/s/g)
var pos = -1
for(var i = 0; i
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/96037.html
摘要：的一個突出特點是擁有極速地渲染性能。該功能依靠的就是研發(fā)團隊弄出的虛擬機制以及其獨特的算法。在的算法下，在同一位置對比前后節(jié)點只要發(fā)現(xiàn)不同，就會刪除操作前的節(jié)點包括其子節(jié)點，替換為操作后的節(jié)點。 React的一個突出特點是擁有極速地渲染性能。該功能依靠的就是facebook研發(fā)團隊弄出的虛擬dom機制以及其獨特的diff算法。下面簡單解釋一下react虛擬dom機制和diff算法的實現(xiàn)...
摘要：界面上的更改都是通過操作實現(xiàn)的，并不是通過傳統(tǒng)的刷新頁面實現(xiàn)的。操作優(yōu)化的總原則是盡量減少操作。通過在文檔片段上進(jìn)行操作，可以降低操作對頁面性能的影響，這種方式是創(chuàng)建一個文檔片段，并在此片段上進(jìn)行必要的操作，操作完成后將它附加在頁面中。 界面上UI的更改都是通過DOM操作實現(xiàn)的，并不是通過傳統(tǒng)的刷新頁面實現(xiàn) 的。盡管DOM提供了豐富接口供外部調(diào)用，但DOM操作的代價很高，頁面前端代碼的...
摘要：比較虛擬與的差異，以及對節(jié)點的操作，其實就是樹的差異比較，就是對樹的節(jié)點進(jìn)行替換。忽略掉這種特殊的情況后，大膽的修改了算法按直系兄弟節(jié)點比較比較。這當(dāng)中對比的細(xì)節(jié)才是整個算法最精粹的地方。 一、舊社會的頁面渲染 ???????在jQuery橫行的時代，F(xiàn)Eer們，通過各種的方式去對頁面的DOM進(jìn)行操作，計算大小，變化，來讓頁面生動活潑起來，豐富的DOM操作，讓一個表面簡單的頁面能展示出...
摘要：摘要想稍微系統(tǒng)的說說對于的操作把和常用操作的內(nèi)容歸納成思維導(dǎo)圖方便閱讀同時加入性能上的一些問題前言在前端開發(fā)的過程中極為重要的一個功能就是對對象的操作無論增刪改查在前端頁面操作這一范圍內(nèi)都是比較消耗性能的如何高效率的便捷的操作這就是本文要講 摘要 想稍微系統(tǒng)的說說對于DOM的操作,把Javascript和jQuery常用操作DOM的內(nèi)容歸納成思維導(dǎo)圖方便閱讀,同時加入性能上的一些問題....
閱讀 2790·2021-11-02 14:42
閱讀 3173·2021-10-08 10:04
閱讀 1194·2019-08-30 15:55
閱讀 1036·2019-08-30 15:54
閱讀 2327·2019-08-30 15:43
閱讀 1688·2019-08-29 15:18
閱讀 871·2019-08-29 11:11
閱讀 2370·2019-08-26 13:52
