DOM

qiangdada 發(fā)布于2019-08-22 18:47 / 2506人閱讀

摘要：就是大家一起出來的頁面的一種結構。由個部分組成，。就是寫代碼的那些標簽組成的，如下圖就是把轉換成對象得到的，關系如下圖。對節(jié)點進行操作意思就是在這顆樹上爬來爬去，尋找需要的元素文本文檔等，進行刪增改查。

DOM

DOM就是大家一起YY出來的頁面的一種結構。由3個部分組成，Document,Object,Model。
Document就是寫代碼的那些標簽組成的，如下圖：

Object就是把Document轉換成對象得到的，關系如下圖。Javascript類型中，它們都屬于Node，Node又屬于Object，關系如下下圖：

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

Node

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

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

parentElement

parentNode

childNodes

獲得目標元素的所有子節(jié)點，這是對代碼來講的，所以也包括了寫代碼時的回車換行（text節(jié)點）

children

獲得目標元素的所有子標簽

firstChild

獲得目標元素第一個子節(jié)點

firstElementChild

獲得目標元素第一個子標簽

lastChild

獲得目標元素最后一個子節(jié)點

lastElementChild

獲得目標元素最后一個子標簽

獲取文本

innerText

修改節(jié)點的innerText，會刪除節(jié)點里面的所有內容，改為修改的值

要在后面添加文本內容，請這樣寫：
var textnode=document.createTextNode("helloMyLove");    //創(chuàng)建文本節(jié)點
xxx.appendChild(textnode);      //添加文本節(jié)點

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

textContext

請參考：
https://developer.mozilla.org/zh-CN/docs/Web/API/Node/textContent

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

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

前端抽象世界之DOM與Virtual DOM

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

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

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

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

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

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

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

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

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

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