資訊專(zhuān)欄INFORMATION COLUMN
摘要：和合并文本節(jié)點(diǎn)在父元素上操作和分割文本節(jié)點(diǎn)在子元素上操作返回找到匹配的第一元素返回找到匹配的所有元素檢測(cè)該元素與選擇符是否匹配和返回找到匹配的第一元素和返回找到匹配的所有元素。
下面用的代碼
Node
childNodes獲取到的是父元素下所有的一級(jí)子元素，是一個(gè)類(lèi)似數(shù)組的對(duì)象，例如：boxChildNodes結(jié)果是：[ 0:text , 1:ul.banner , 2:text , 3:ul.number , 4:text, length:5]，它會(huì)獲取到元素和元素之間的空隙（文本），如上面所示的0,2,4。使用Array.prototype.slice(childNode,0)方法，可將偽數(shù)組變成數(shù)組，或者用遍歷的方法也可以將它變成數(shù)組。
children和childNodes類(lèi)似，區(qū)別是它不會(huì)獲取到文本和文本之間的空隙（文本）。
parentNode可以獲取子元素的上一級(jí)（父元素）。
previousSibling和nextSibling獲取上一個(gè)或下一個(gè)兄弟元素。
firstChild和lastChild獲取父元素下第一個(gè)或最后一個(gè)子元素（包括空隙，也就是文本）。
boxChildNodes的第一個(gè)子節(jié)點(diǎn)是boxChildNodes[0] === box.firstChild，boxChildNodes[boxChildNodes.length-1] === box.lastChild。
hasChildNodes()可以查詢父元素下面是否有子元素（1個(gè)或多個(gè)），有返回true，沒(méi)有返回false，要注意：文本節(jié)點(diǎn)也是節(jié)點(diǎn)。
ownerDocument 查詢一個(gè)元素的根元素。
appendChild(newNode,oldNode)在父元素上最后一個(gè)元素后面添加新的子元素，無(wú)法指定添加到某個(gè)元素前后。
insertBefore(newNode,oldNode)在父元素下某個(gè)子元素前添加新的子元素，如果父元素下的某個(gè)子元素找不到，則在父元素下最后一個(gè)子元素后添加新的子元素和appendChild()方法一樣。
removeChild(oldNode)移除父元素下的某節(jié)點(diǎn)
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)簽名，返回的都是大寫(xiě)，用的時(shí)候需要進(jìn)行大小寫(xiě)轉(zhuǎn)換。
getAttribute()，setAttribute()，removeAttribute()獲取，設(shè)置和刪除元素的屬性，和直接使用box.id效果一樣，區(qū)別是get...這類(lèi)方法是能獲取自定義屬性的。
自定義屬性可以通過(guò)dataset訪問(wèn)
createElement()和createTextNode()創(chuàng)建元素標(biāo)簽和創(chuàng)建文本，需要用appendChild()添加到頁(yè)面中去。
normalize()和splitText()合并文本節(jié)點(diǎn)（在父元素上操作）和分割文本節(jié)點(diǎn)（在子元素上操作）
DOM Selector
querySelector()和querySelectorAll()返回找到匹配的第一元素和返回找到匹配的所有元素。
matches() 檢測(cè)該元素與選擇符是否匹配
div.classList.remove("user")刪除class，div.classList.add("current")添加class，div.classList.toggle("user")如果有這個(gè)class就刪除，沒(méi)有就添加。
刪除或添加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)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/96037.html
摘要：的一個(gè)突出特點(diǎn)是擁有極速地渲染性能。該功能依靠的就是研發(fā)團(tuán)隊(duì)弄出的虛擬機(jī)制以及其獨(dú)特的算法。在的算法下，在同一位置對(duì)比前后節(jié)點(diǎn)只要發(fā)現(xiàn)不同，就會(huì)刪除操作前的節(jié)點(diǎn)包括其子節(jié)點(diǎn)，替換為操作后的節(jié)點(diǎn)。 React的一個(gè)突出特點(diǎn)是擁有極速地渲染性能。該功能依靠的就是facebook研發(fā)團(tuán)隊(duì)弄出的虛擬dom機(jī)制以及其獨(dú)特的diff算法。下面簡(jiǎn)單解釋一下react虛擬dom機(jī)制和diff算法的實(shí)現(xiàn)...
摘要：界面上的更改都是通過(guò)操作實(shí)現(xiàn)的，并不是通過(guò)傳統(tǒng)的刷新頁(yè)面實(shí)現(xiàn)的。操作優(yōu)化的總原則是盡量減少操作。通過(guò)在文檔片段上進(jìn)行操作，可以降低操作對(duì)頁(yè)面性能的影響，這種方式是創(chuàng)建一個(gè)文檔片段，并在此片段上進(jìn)行必要的操作，操作完成后將它附加在頁(yè)面中。 界面上UI的更改都是通過(guò)DOM操作實(shí)現(xiàn)的，并不是通過(guò)傳統(tǒng)的刷新頁(yè)面實(shí)現(xiàn) 的。盡管DOM提供了豐富接口供外部調(diào)用，但DOM操作的代價(jià)很高，頁(yè)面前端代碼的...
摘要：什么是虛擬舉例說(shuō)明如果網(wǎng)頁(yè)中有一個(gè)表格，表頭是姓名，年級(jí)，分?jǐn)?shù)。即我們用虛擬的結(jié)構(gòu)替換需要處理的結(jié)構(gòu)，對(duì)虛擬的進(jìn)行操作之后再進(jìn)行渲染，就成為了真實(shí)的數(shù)據(jù)。當(dāng)狀態(tài)變更的時(shí)候用修改后的新渲染的的對(duì)象和舊的虛擬對(duì)象作對(duì)比，記錄著兩棵樹(shù)的差異。 虛擬DOM 可以看看這個(gè)文章如何理解虛擬DOM？ - 戴嘉華的回答 - 知乎 https://www.zhihu.com/questio... 深度剖...
摘要：什么是虛擬舉例說(shuō)明如果網(wǎng)頁(yè)中有一個(gè)表格，表頭是姓名，年級(jí)，分?jǐn)?shù)。即我們用虛擬的結(jié)構(gòu)替換需要處理的結(jié)構(gòu)，對(duì)虛擬的進(jìn)行操作之后再進(jìn)行渲染，就成為了真實(shí)的數(shù)據(jù)。當(dāng)狀態(tài)變更的時(shí)候用修改后的新渲染的的對(duì)象和舊的虛擬對(duì)象作對(duì)比，記錄著兩棵樹(shù)的差異。 虛擬DOM 可以看看這個(gè)文章如何理解虛擬DOM？ - 戴嘉華的回答 - 知乎 https://www.zhihu.com/questio... 深度剖...
摘要：比較虛擬與的差異，以及對(duì)節(jié)點(diǎn)的操作，其實(shí)就是樹(shù)的差異比較，就是對(duì)樹(shù)的節(jié)點(diǎn)進(jìn)行替換。忽略掉這種特殊的情況后，大膽的修改了算法按直系兄弟節(jié)點(diǎn)比較比較。這當(dāng)中對(duì)比的細(xì)節(jié)才是整個(gè)算法最精粹的地方。 一、舊社會(huì)的頁(yè)面渲染 ???????在jQuery橫行的時(shí)代，F(xiàn)Eer們，通過(guò)各種的方式去對(duì)頁(yè)面的DOM進(jìn)行操作，計(jì)算大小，變化，來(lái)讓頁(yè)面生動(dòng)活潑起來(lái)，豐富的DOM操作，讓一個(gè)表面簡(jiǎn)單的頁(yè)面能展示出...
摘要：摘要想稍微系統(tǒng)的說(shuō)說(shuō)對(duì)于的操作把和常用操作的內(nèi)容歸納成思維導(dǎo)圖方便閱讀同時(shí)加入性能上的一些問(wèn)題前言在前端開(kāi)發(fā)的過(guò)程中極為重要的一個(gè)功能就是對(duì)對(duì)象的操作無(wú)論增刪改查在前端頁(yè)面操作這一范圍內(nèi)都是比較消耗性能的如何高效率的便捷的操作這就是本文要講 摘要 想稍微系統(tǒng)的說(shuō)說(shuō)對(duì)于DOM的操作,把Javascript和jQuery常用操作DOM的內(nèi)容歸納成思維導(dǎo)圖方便閱讀,同時(shí)加入性能上的一些問(wèn)題....
閱讀 2858·2021-11-02 14:42
閱讀 3227·2021-10-08 10:04
閱讀 1254·2019-08-30 15:55
閱讀 1088·2019-08-30 15:54
閱讀 2383·2019-08-30 15:43
閱讀 1741·2019-08-29 15:18
閱讀 929·2019-08-29 11:11
閱讀 2432·2019-08-26 13:52
