JavaScript 中的文檔對象模型 DOM
1、什么是DOM
DOM 文檔對象模型,是 HTML 和 XML 文檔的編程接口,用一個邏輯樹來表示一個文檔,樹的每個分支的終點都是一個節(jié)點(node
),每個節(jié)點都包含著對象(objects
),允許從文檔中創(chuàng)建、更改或刪除元素,還可以向這些元素添加事件,使頁面更加動態(tài)。
DOM 將 HTML 文檔視為節(jié)點樹,一個節(jié)點代表一個 HTML 元素。如下 HTML 代碼,以更好地理解 DOM 樹結(jié)構(gòu)。
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>DOM樹結(jié)構(gòu)</title> </head> <body> <h1>DOM對象模型</h1> <h2>DOM樹結(jié)構(gòu)</h2> </body> </html>
文檔稱為根節(jié)點,包含一個子節(jié)點,即 <html>
元素。 <html>
元素包含兩個子元素,分別是<head>和<body>元素。
而 <head>
和 <body>
都有自己的子元素,如下圖:
可以通過 JavaScript
訪問文檔中的這些元素并對其進行更改。下面將介紹如何使用 JavaScript
處理 DOM
。
2、選擇元素
如何選擇文檔中的元素呢?在 HTML 文檔中選擇元素有幾個不同的方法,下面介紹其中三種方法:
getElementById():
返回一個匹配特定 ID的元素。querySelector():
返回文檔中與指定選擇器或選擇器組匹配的第一個HTMLElement
對象。querySelectorAll():
返回與指定的選擇器組匹配的文檔中的元素列表 (使用深度優(yōu)先的先序遍歷文檔的節(jié)點)。
3、getElementById()
在 HTML 中,id
是 HTML 元素的唯一標識符,意味著不能為兩個不同的元素使用設(shè)置相同的 id ,必須要確保 id 在整個文檔中的唯一性。
在 JavaScript
中,可以通過使用 id 名稱來獲取 HTML 標簽。
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>DOM樹結(jié)構(gòu)</title> </head> <body> <h1>DOM對象模型</h1> <h2>DOM樹結(jié)構(gòu)</h2> <p id="intro">DOM 即文檔對象模型,它是一個編程接口。</p> <script type="text/javascript"> const elemIntro = document.getElementById("intro"); console.log(elemIntro); </script> </body> </html>
打開開發(fā)者工具:
如果需要獲取對象中的文本內(nèi)容,可以使用 textContent
或者 innerText
:
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>DOM樹結(jié)構(gòu)</title> </head> <body> <h1>DOM對象模型</h1> <h2>DOM樹結(jié)構(gòu)</h2> <p id="intro">DOM 即文檔對象模型,它是一個編程接口。</p> <script type="text/javascript"> const elemIntro = document.getElementById("intro"); console.log(elemIntro); // 獲取元素內(nèi)的文本內(nèi)容 const elemText = elemIntro.textContent; // elemIntro.innerText console.log(elemText); </script> </body> </html>
打開控制器查看:
4、querySelector()
使用此方法查找具有一個或多個 CSS 選擇器的元素,下面以國慶電影檔期信息為示例,通過 querySelector()
獲取相應(yīng)的標題和列表元素。
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>DOM樹結(jié)構(gòu)</title> </head> <body> <h1>2021國慶電影檔期</h1> <ul class="movies"> <li>《長津湖》</li> <li>《我和我的父輩》</li> <li>《鐵道英雄》</li> </ul> <script type="text/javascript"> const elemTitle = document.querySelector("h1"); const elemList = document.querySelector(".movies"); console.log("h1"); console.log(elemTitle); console.log("ul movies"); console.log(elemList); </script> </body> </html>
在瀏覽器打開文檔,并開啟開發(fā)者工具,可以看到如下效果:
5、querySelectorAll()
此方法查找與 CSS 選擇器匹配的所有元素并返回節(jié)點的列表,下面就查找電影檔期的每一個 li 元素:
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>DOM樹結(jié)構(gòu)</title> </head> <body> <h1>2021國慶電影檔期</h1> <ul class="movies"> <li>《長津湖》</li> <li>《我和我的父輩》</li> <li>《鐵道英雄》</li> </ul> <script type="text/javascript"> const elemTitle = document.querySelector("h1"); const movieItems = document.querySelectorAll(".movies > li"); console.log(movieItems); </script> </body> </html>
控制臺打印的效果如下:
對于上述節(jié)點列表可以按照下面的方式進行遍歷:
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>DOM樹結(jié)構(gòu)</title> </head> <body> <h1>2021國慶電影檔期</h1> <ul class="movies"> <li>《長津湖》</li> <li>《我和我的父輩》</li> <li>《鐵道英雄》</li> </ul> <script type="text/javascript"> const elemTitle = document.querySelector("h1"); const movieItems = document.querySelectorAll(".movies > li"); movieItems.forEach((item) => { console.log(item); }); </script> </body> </html>
控制臺打印的效果如下:
6、添加新元素
如何向文檔添加新元素呢?可以使用 document.createElement()
向 DOM 樹添加新元素,通過 textContent
為其新元素添加內(nèi)容,如下的示例,在電影檔期列表中添加新的檔期:
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>DOM樹結(jié)構(gòu)</title> </head> <body> <h1>2021國慶電影檔期</h1> <ul class="movies" id="movies"> <li>《長津湖》</li> <li>《我和我的父輩》</li> <li>《鐵道英雄》</li> </ul> <script type="text/javascript"> const movieItems = document.getElementById("movies"); const newMovie = document.createElement("li"); newMovie.textContent = "《老鷹抓小雞》"; movieItems.appendChild(newMovie); </script> </body> </html>
運行后,頁面效果如下:
7、更改CSS樣式
如何更改內(nèi)聯(lián) CSS 樣式呢?通過使用 style 屬性來能夠更改 HTML 文檔中的 CSS 樣式,還是以國慶電影檔期為示例,更改頁面標題 h1 元素的字體大小和字體顏色:
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>DOM樹結(jié)構(gòu)</title> </head> <body> <h1>2021國慶電影檔期</h1> <ul class="movies"> <li>《長津湖》</li> <li>《我和我的父輩》</li> <li>《鐵道英雄》</li> </ul> <script type="text/javascript"> const pageTitle = document.querySelector("h1"); pageTitle.style.fontSize = "24px"; pageTitle.style.color = "#0000FF"; </script> </body> </html>
運行后,頁面效果如下:
關(guān)于CSS樣式的屬性,在JavaScript中采用駝峰方式,如 font-size
在JavaScript
中對應(yīng)的屬性為 fontSize
,background-color
就是 backgroundColor
。
8、如何監(jiān)聽事件
如何使用監(jiān)聽頁面上元素的事件?使用方法 addEventListener()
,下面示例通過點擊按鈕,在列表中增加新的電影排期,如下:
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>DOM樹結(jié)構(gòu)</title> </head> <body> <h1>2021國慶電影檔期</h1> <ul id="movies"> <li>《長津湖》</li> <li>《我和我的父輩》</li> <li>《鐵道英雄》</li> </ul> <button id="addNew">增加電影《老鷹抓小雞》</button> <script type="text/javascript"> const moviesList = document.getElementById("movies"); const button = document.getElementById("addNew"); const addNewMovie = (movieTitle, elemTarget) => { const newMovie = document.createElement("li"); newMovie.textContent = movieTitle; newMovie.style.color = "#ff0000"; elemTarget.appendChild(newMovie); }; button.addEventListener("click", () => { addNewMovie("《老鷹抓小雞》", moviesList); }); </script> </body> </html>
運行后,頁面效果如下:
在實際項目中,事件監(jiān)聽處理比這要負責(zé),對于現(xiàn)代 WEB 開發(fā),豐富的前端框架,對于事件的處理都已經(jīng)封裝的很好了,甚至讓開發(fā)人員就忘記了事件監(jiān)聽的相關(guān)知識,如事件冒泡、事件捕獲、事件委托等,本文就不展開了。
結(jié)論:
DOM 文檔對象模型,是 HTML 和 XML 文檔的編程接口。當(dāng)瀏覽器首次讀?。ń馕觯┑?HTML
文檔時,它會創(chuàng)建一個大的對象,一個以 HTML 文檔為基礎(chǔ)的非常大的對象,這個就是 DOM。它是從 HTML 建模的樹狀結(jié)構(gòu)。DOM 用于交互和修改 DOM
結(jié)構(gòu) 或者特定的元素或節(jié)點。
到此這篇關(guān)于JavaScript
中的文檔對象模型 DOM的文章就介紹到這了,更多相關(guān)JavaScript
文檔對象模型 DOM內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- JavaScript文檔對象模型DOM
- JavaScript Dom對象的操作
- JavaScript變量Dom對象的所有屬性
- JS實現(xiàn)訪問DOM對象指定節(jié)點的方法示例
- 淺談JS讀取DOM對象(標簽)的自定義屬性
- js基礎(chǔ)之DOM中document對象的常用屬性方法詳解
- js基礎(chǔ)之DOM中元素對象的屬性方法詳解
- JavaScript實現(xiàn)DOM對象選擇器
- JavaScript DOM 對象深入了解
- JavaScript——DOM操作——Window.document對象詳解
- jquery對象和javascript對象即DOM對象相互轉(zhuǎn)換
- js對象關(guān)系圖 方便dom操作
- javascript DOM對象的學(xué)習(xí)實例代碼
- JavaScript操作DOM對象詳解
相關(guān)文章
await-to-js源碼深入理解處理異步任務(wù)用法示例
這篇文章主要為大家介紹了await-to-js源碼更完美處理異步任務(wù)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-08-08