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

資訊專欄INFORMATION COLUMN

DOM 操作

zhoutk / 3257人閱讀

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

下面用的代碼


    
    
    
        
  • 
        
  • 
        
  • 
    






    
    
        
  • 
        
  • 
        
  •
Node

childNodes獲取到的是父元素下所有的一級(jí)子元素，是一個(gè)類似數(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類似，區(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，沒有返回false，要注意：文本節(jié)點(diǎn)也是節(jié)點(diǎn)。

ownerDocument 查詢一個(gè)元素的根元素。

appendChild(newNode,oldNode)在父元素上最后一個(gè)元素后面添加新的子元素，無法指定添加到某個(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)簽

Element

nodeTyp===1為標(biāo)簽，nodeType===3為文本。

nodeName和tagName都是返回元素的標(biāo)簽名，返回的都是大寫，用的時(shí)候需要進(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é)點(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就刪除，沒有就添加。

刪除或添加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.specialneedsforspecialkids.com/yun/96037.html

相關(guān)文章

  • react虛擬dom機(jī)制與diff算法

    摘要：的一個(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算法。下面簡單解釋一下react虛擬dom機(jī)制和diff算法的實(shí)現(xiàn)...

    jzman 評(píng)論0 收藏0

  • 前端頁面卡頓、也許是DOM操作惹的禍？

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

    AnthonyHan 評(píng)論0 收藏0

  • 虛擬DOM

    摘要：什么是虛擬舉例說明如果網(wǎng)頁中有一個(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ì)比，記錄著兩棵樹的差異。 虛擬DOM 可以看看這個(gè)文章如何理解虛擬DOM？ - 戴嘉華的回答 - 知乎 https://www.zhihu.com/questio... 深度剖...

    yanwei 評(píng)論0 收藏0

  • 虛擬DOM

    摘要：什么是虛擬舉例說明如果網(wǎng)頁中有一個(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ì)比，記錄著兩棵樹的差異。 虛擬DOM 可以看看這個(gè)文章如何理解虛擬DOM？ - 戴嘉華的回答 - 知乎 https://www.zhihu.com/questio... 深度剖...

    alin 評(píng)論0 收藏0

  • 虛擬DOM與DIFF算法學(xué)習(xí)

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

    codergarden 評(píng)論0 收藏0

  • JS基礎(chǔ)篇--JS的DOM操作 - 你真的了解嗎?

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

    DirtyMind 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<