DOM介紹~超好理解的哦
下面是對DOM的介紹,希望可以幫助到有需要的小夥伴,跟小編來看看吧~
什麼是DOM
DOM是文件物件模型,DOM把html文件結構化,定義了一個規範用來通過JS來操作html元素。
DOM的組成
DOM是由節點組成的。
DOM解析過程:
- html載入完畢後,瀏覽器會把html文件結構化生成一個DOM樹
- 獲取DOM的元素節點
- 操作該元素(改變該元素的屬性或給該元素新增事件)
DOM樹(一切都是節點)
在HTML中,一切都是節點
- 元素節點:HTML標籤
- 文字節點:標籤中的文字
- 屬性節點:標籤的屬性
文字節點是元素節點的子節點;
屬性節點既不是元素節點的子節點也不是元素節點的父節點;
整個html文件是一個文件節點;
所有的節點都是Object型別
下面是一棵DOM樹
DOM的用處
- 獲取元素節點
- 設定元素的屬性值
- 設定元素的樣式
- 動態建立和刪除元素
- 給元素繫結事件
相關文章
- 原生js的常用dom元素操簡單介紹JS
- JavaScript複製dom元素簡單介紹JavaScript
- js dom元素事件處理簡單介紹JS事件
- 原生javascript獲取dom元素簡單介紹JavaScript
- javascript DOM元素節點操作簡單介紹JavaScript
- 關於 DOM 的理解
- Virtual-DOM的理解
- 超級詳細的tcpdump用法介紹TCP
- jQuery物件轉換為dom物件簡單介紹jQuery物件
- iOS超級超級詳細介紹GCDiOSGC
- rman超詳細命令介紹
- 超詳細的介紹Python語句Python
- dom物件和jQuery物件相互轉換簡單介紹物件jQuery
- MATLAB 超程式設計介紹Matlab程式設計
- React虛擬DOM的好處React
- 深度理解 Virtual DOM
- 理解索引:HBase介紹和架構索引架構
- DOM的TreeWalker物件簡介物件
- jQuery dom元素層級匹配選擇器簡單介紹jQuery
- js dom元素樣式設定相關style屬性介紹JS
- 兩種閱讀理解模型框架的概要介紹模型框架
- 深入理解 React 的 Virtual DOMReact
- 好程式設計師web前端培訓分享HTML DOM簡介程式設計師Web前端HTML
- 超詳細 Java 15 新功能介紹Java
- 設定XMLHttpRequest超時簡單介紹XMLHTTP
- DOM事件簡介事件
- 理解Shadow DOM(一)
- 全面理解虛擬DOM,實現虛擬DOM
- DOM的TreeWalker物件簡介(3)物件
- DOM的TreeWalker物件簡介(4)物件
- Android上一種效果奇好的混音方法介紹Android
- 誰知道關於together的好書,介紹一下
- 超級賬本-頂級專案介紹
- js DSL超程式設計簡單介紹JS程式設計
- 超寬頻UWB定位的優勢和特點介紹
- 回到基礎:理解 JavaScript DOMJavaScript
- 一起理解 Virtual DOM
- 深度理解DOM拷貝clone()