成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

DOM

qiangdada / 2443人閱讀

摘要：就是大家一起出來(lái)的頁(yè)面的一種結(jié)構(gòu)。由個(gè)部分組成，。就是寫(xiě)代碼的那些標(biāo)簽組成的，如下圖就是把轉(zhuǎn)換成對(duì)象得到的，關(guān)系如下圖。對(duì)節(jié)點(diǎn)進(jìn)行操作意思就是在這顆樹(shù)上爬來(lái)爬去，尋找需要的元素文本文檔等，進(jìn)行刪增改查。

DOM

DOM就是大家一起YY出來(lái)的頁(yè)面的一種結(jié)構(gòu)。由3個(gè)部分組成，Document,Object,Model。
Document就是寫(xiě)代碼的那些標(biāo)簽組成的，如下圖：

Object就是把Document轉(zhuǎn)換成對(duì)象得到的，關(guān)系如下圖。Javascript類型中，它們都屬于Node，Node又屬于Object，關(guān)系如下下圖：

Model就是上面這樣模式的名字，文檔對(duì)象模型。

Node

正如像function,Array一樣，Node也有很多自己的方法和屬性。Array的方法和屬性用來(lái)對(duì)數(shù)組進(jìn)行操作，Node的方法和屬性就用來(lái)對(duì)節(jié)點(diǎn)進(jìn)行操作。對(duì)節(jié)點(diǎn)進(jìn)行操作意思就是在DOM這顆樹(shù)上爬來(lái)爬去，尋找需要的元素（element）,文本（text）,文檔（document）等，進(jìn)行【刪增改查】。

Node主要屬性 父節(jié)點(diǎn)和子節(jié)點(diǎn)

parentElement

parentNode

childNodes

獲得目標(biāo)元素的所有子節(jié)點(diǎn)，這是對(duì)代碼來(lái)講的，所以也包括了寫(xiě)代碼時(shí)的回車換行（text節(jié)點(diǎn)）

children

獲得目標(biāo)元素的所有子標(biāo)簽

firstChild

獲得目標(biāo)元素第一個(gè)子節(jié)點(diǎn)

firstElementChild

獲得目標(biāo)元素第一個(gè)子標(biāo)簽

lastChild

獲得目標(biāo)元素最后一個(gè)子節(jié)點(diǎn)

lastElementChild

獲得目標(biāo)元素最后一個(gè)子標(biāo)簽

獲取文本

innerText

修改節(jié)點(diǎn)的innerText，會(huì)刪除節(jié)點(diǎn)里面的所有內(nèi)容，改為修改的值
要在后面添加文本內(nèi)容，請(qǐng)這樣寫(xiě)：
var textnode=document.createTextNode("helloMyLove");    //創(chuàng)建文本節(jié)點(diǎn)
xxx.appendChild(textnode);      //添加文本節(jié)點(diǎn)

或者聯(lián)成一句：
xxx.appendChild(document.createTextNode("helloMyLove");

textContext

請(qǐng)參考：
https://developer.mozilla.org/zh-CN/docs/Web/API/Node/textContent

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/96200.html

相關(guān)文章

  • 前端抽象世界之DOM與Virtual DOM

    摘要：它是輕量級(jí)的，與特定于瀏覽器的實(shí)現(xiàn)細(xì)節(jié)分離。由于本身已經(jīng)是抽象，因此虛擬實(shí)際上是抽象的抽象。它允許在這個(gè)抽象的世界中進(jìn)行計(jì)算，并跳過(guò)真正的那些緩慢的操作。 前言 目前主流的前端框架React和Vue中都用到了Virtual DOM這個(gè)技術(shù)，而Virtual DOM到底是什么，可能很多人和我一樣，概念上還是模糊。本文主要介紹DOM和Virtual DOM的基本概念及個(gè)人理解。 以下的D...

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

  • 前端抽象世界之DOM與Virtual DOM

    摘要：它是輕量級(jí)的，與特定于瀏覽器的實(shí)現(xiàn)細(xì)節(jié)分離。由于本身已經(jīng)是抽象，因此虛擬實(shí)際上是抽象的抽象。它允許在這個(gè)抽象的世界中進(jìn)行計(jì)算，并跳過(guò)真正的那些緩慢的操作。 前言 目前主流的前端框架React和Vue中都用到了Virtual DOM這個(gè)技術(shù)，而Virtual DOM到底是什么，可能很多人和我一樣，概念上還是模糊。本文主要介紹DOM和Virtual DOM的基本概念及個(gè)人理解。 以下的D...

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

  • 虛擬DOM

    摘要：什么是虛擬舉例說(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... 深度剖...

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

  • 虛擬DOM

    摘要：什么是虛擬舉例說(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... 深度剖...

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

  • 虛擬Dom詳解 - (一)

    摘要：為此也做了一些學(xué)習(xí)簡(jiǎn)單的侃一侃虛擬到底是什么虛擬詳解二什么是虛擬虛擬首次產(chǎn)生是框架最先提出和使用的，其卓越的性能很快得到廣大開(kāi)發(fā)者的認(rèn)可，繼之后也在其核心引入了虛擬的概念。所謂的虛擬到底是什么也就是通過(guò)語(yǔ)言來(lái)描述一段代碼。 隨著Vue和React的風(fēng)聲水起，伴隨著諸多框架的成長(zhǎng)，虛擬DOM漸漸成了我們經(jīng)常議論和討論的話題。什么是虛擬DOM，虛擬DOM是如何渲染的，那么Vue的虛擬Dom...

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

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

0條評(píng)論

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