JavaScript 中的文檔對象模型 DOM

更新時間：2021年10月08日 16:56:07 作者：devpoint

DOM，即文檔對象模型，前端開發(fā)工程師必學(xué)的基礎(chǔ)知識，在本文將介紹如何在 HTML 文檔中選擇元素、如何創(chuàng)建元素、如何更改內(nèi)聯(lián) CSS 樣式以及如何監(jiān)聽事件,需要的朋友可以參考一下

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)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

軟件下載

源碼下載

軟件編程

網(wǎng)絡(luò)編程

在線工具

數(shù)據(jù)庫

CMS

常用工具

JavaScript 中的文檔對象模型 DOM

目錄

1、什么是DOM

2、選擇元素

3、getElementById()

4、querySelector()

5、querySelectorAll()

6、添加新元素

7、更改CSS樣式

8、如何監(jiān)聽事件

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

JavaScript 中的文檔對象模型 DOM

目錄

1、什么是DOM

2、選擇元素

3、getElementById()

4、querySelector()

5、querySelectorAll()

6、添加新元素

7、更改CSS樣式

8、如何監(jiān)聽事件

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

2、選擇元素

3、getElementById()

4、querySelector()

6、添加新元素

7、更改CSS樣式

8、如何監(jiān)聽事件