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

資訊專欄INFORMATION COLUMN

DOM

fanux / 777人閱讀

摘要：文檔對(duì)象模型賦予開(kāi)發(fā)者操作頁(yè)面的接口常見(jiàn)的節(jié)點(diǎn)類型元素節(jié)點(diǎn)等元素為的為文本節(jié)點(diǎn)可能為空格或者回車也是文本節(jié)點(diǎn)為注釋節(jié)點(diǎn)為屬性節(jié)點(diǎn)通過(guò)屬性為為屬性的值為屬性名獲取到某個(gè)節(jié)點(diǎn)的所有子節(jié)點(diǎn)屬性會(huì)返回一個(gè)數(shù)組代表的是所有的子節(jié)點(diǎn)屬性會(huì)返回一個(gè)數(shù)組代

DOM

文檔對(duì)象模型 document object model 賦予開(kāi)發(fā)者操作頁(yè)面的接口

常見(jiàn)的dom節(jié)點(diǎn)類型 nodeType

元素節(jié)點(diǎn) div ul li 等元素 nodeType 為 1
document 的 nodeType 為 9
文本節(jié)點(diǎn) （可能為空格或者回車也是文本節(jié)點(diǎn)） nodeType 為 3
注釋節(jié)點(diǎn) nodeType 為 8
屬性節(jié)點(diǎn) 通過(guò)ele.attributes屬性 nodeType 為2

                                          nodeValue  為屬性的值    nodeName為屬性名
獲取到某個(gè)節(jié)點(diǎn)的所有子節(jié)點(diǎn)

ele.childsNodes屬性 會(huì)返回一個(gè)數(shù)組 代表的是所有的子節(jié)點(diǎn)

children   屬性   會(huì)返回一個(gè)數(shù)組  代表的是這個(gè)元素里邊所有的元素節(jié)點(diǎn)
獲取元素的父節(jié)點(diǎn)

ele.parentNode 得到某個(gè)元素的父節(jié)點(diǎn)
document-> html->body->ele

獲取兄弟節(jié)點(diǎn)

ele.nextElementSibling 得到他的最近的下一個(gè)兄弟節(jié)點(diǎn)（一個(gè)兄弟節(jié)點(diǎn)）

                     依次使用這個(gè)屬性就會(huì)得到后面的所有的兄弟節(jié)點(diǎn)

ele.previousElementSibling 得到最近的上一個(gè)兄弟節(jié)點(diǎn)（一個(gè)兄弟節(jié)點(diǎn)）

                     依次使用這個(gè)屬性就會(huì)得到前面的所有的兄弟節(jié)點(diǎn)
得到最后一個(gè)子節(jié)點(diǎn)和第一個(gè)子節(jié)點(diǎn)

parentNode.lastElementChild 得到父元素中最后一個(gè)子節(jié)點(diǎn)
parentNode.firstElementChild 得到父元素中第一個(gè)子節(jié)點(diǎn)

得到節(jié)點(diǎn)的寬度和高度

offsetParent 得到最近的有定位屬性的祖先節(jié)點(diǎn) 如果沒(méi)有找到的話 就會(huì)找到body
offsetLeft ele的外邊框到有定位父級(jí)的內(nèi)邊框的距離
js不能夠通過(guò)ele.style.width 來(lái)得到元素的寬度 而不是針對(duì)窗口
通過(guò)以下的方式可以得到ele的樣式

   var container=document.getElementById("container")
      console.log(getComputedStyle(container))

只有offsetLeft offsetTop但是沒(méi)有offsetRight、offsetBottom
用offsetLeft來(lái)模擬元素到窗口左邊的距離

 while(elm){   //得到元素離窗口的左邊距
          left+=elm.offsetLeft;
          elm=elm.offsetParent
          console.log(left)
      }

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/88826.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元查看
<