<button id="u22sm"></button>

DOM

fanux 發布于2019-08-21 16:51 / 789人閱讀

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

DOM

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

常見的dom節點類型 nodeType

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

                                          nodeValue  為屬性的值    nodeName為屬性名

獲取到某個節點的所有子節點

ele.childsNodes屬性會返回一個數組代表的是所有的子節點

children   屬性   會返回一個數組  代表的是這個元素里邊所有的元素節點

獲取元素的父節點

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

獲取兄弟節點

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

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

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

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

得到最后一個子節點和第一個子節點

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

得到節點的寬度和高度

offsetParent 得到最近的有定位屬性的祖先節點如果沒有找到的話就會找到body
offsetLeft ele的外邊框到有定位父級的內邊框的距離
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)
      }

GPU云服務器云服務器 DOM dom0和dom2 python dom XML DOM

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

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/88826.html

前端抽象世界之DOM與Virtual DOM

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

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

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

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

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

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

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

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

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

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