DOM

fanux 發(fā)布于2019-08-21 16:51 / 867人閱讀

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

DOM

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

常見的dom節(jié)點類型 nodeType

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

                                          nodeValue  為屬性的值    nodeName為屬性名

獲取到某個節(jié)點的所有子節(jié)點

ele.childsNodes屬性會返回一個數(shù)組代表的是所有的子節(jié)點

children   屬性   會返回一個數(shù)組  代表的是這個元素里邊所有的元素節(jié)點

獲取元素的父節(jié)點

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

獲取兄弟節(jié)點

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

                     依次使用這個屬性就會得到后面的所有的兄弟節(jié)點

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

                     依次使用這個屬性就會得到前面的所有的兄弟節(jié)點

得到最后一個子節(jié)點和第一個子節(jié)點

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

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

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

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

只有offsetLeft offsetTop但是沒有offsetRight、offsetBottom
用offsetLeft來模擬元素到窗口左邊的距離

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

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

轉載請注明本文地址：http://www.ezyhdfw.cn/yun/88826.html

前端抽象世界之DOM與Virtual DOM

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

plokmju88 2019-08-02 12:00 評論0 收藏0
前端抽象世界之DOM與Virtual DOM

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

joy968 2019-08-26 12:23 評論0 收藏0
虛擬DOM

摘要：什么是虛擬舉例說明如果網(wǎng)頁中有一個表格，表頭是姓名，年級，分數(shù)。即我們用虛擬的結構替換需要處理的結構，對虛擬的進行操作之后再進行渲染，就成為了真實的數(shù)據(jù)。當狀態(tài)變更的時候用修改后的新渲染的的對象和舊的虛擬對象作對比，記錄著兩棵樹的差異。虛擬DOM 可以看看這個文章如何理解虛擬DOM？ - 戴嘉華的回答 - 知乎 https://www.zhihu.com/questio... 深度剖...

yanwei 2019-08-23 12:11 評論0 收藏0
虛擬DOM

摘要：什么是虛擬舉例說明如果網(wǎng)頁中有一個表格，表頭是姓名，年級，分數(shù)。即我們用虛擬的結構替換需要處理的結構，對虛擬的進行操作之后再進行渲染，就成為了真實的數(shù)據(jù)。當狀態(tài)變更的時候用修改后的新渲染的的對象和舊的虛擬對象作對比，記錄著兩棵樹的差異。虛擬DOM 可以看看這個文章如何理解虛擬DOM？ - 戴嘉華的回答 - 知乎 https://www.zhihu.com/questio... 深度剖...

alin 2019-08-02 11:37 評論0 收藏0
虛擬Dom詳解 - (一)

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

ashe 2019-08-26 10:36 評論0 收藏0