溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

JavaScript DOM如何獲取

發(fā)布時(shí)間：2022-06-17 14:03:32 來源：億速云 閱讀：120 作者：iii 欄目：web開發(fā)

本篇內(nèi)容主要講解“JavaScript DOM如何獲取”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“JavaScript DOM如何獲取”吧!

JavaScript DOM如何獲取

什么是 DOM ？

Document Object Model，縮寫DOM，中文：文檔對象模型，是W3C組織推薦的處理可擴(kuò)展標(biāo)記語言的標(biāo)準(zhǔn)編程接口

什么是 DOM Tree ？

DOM Tree 是指通過 DOM 將 HTML 頁面進(jìn)行解析，并生成的 HTML tree 樹狀結(jié)構(gòu)和對應(yīng)訪問方法，借助 DOM Tree，我們能直接而且簡易的操作 HTML 頁面上的每個(gè)標(biāo)記內(nèi)容，比如下面 HTML 代碼

<html><head>
    <title>玩轉(zhuǎn)dom</title></head><body>
    <p>我是一個(gè)dom節(jié)點(diǎn)</p>
    <p>
        <p>p p</p>
    </p></body></html>

抽象為 dom樹如下所示：
JavaScript DOM如何獲取

了解了以上知識后，下面就是對API的學(xué)習(xí)了，我將從如何獲取 DOM，如何創(chuàng)建添加 DOM，如何修改 DOM 以及如何刪除 DOM 四個(gè)方面進(jìn)行講解，跟緊了

獲取 DOM

獲取DOM的api有很多，但都十分簡單，加油

1. 通過 id 獲取

語法：

document.getElementById("id name");

實(shí)例：

<body>
    <p id="p">我是p節(jié)點(diǎn)</p>
    <script>
        var p = document.getElementById("p");
        console.log(p);
    </script></body>

JavaScript DOM如何獲取

打開控制臺(tái)，可以看到成功拿到

2. 通過標(biāo)簽名 tag name 獲取

語法：

document.getElementsByTagName("tag name");

實(shí)例：

<body>
    <p>我是p節(jié)點(diǎn)</p>
    <p>我也是p節(jié)點(diǎn)</p>
    <script>
        var p = document.getElementsByTagName("p");
        console.log(p);
        for (let i = 0; i < p.length; i++) {
            console.log(p[i]);
        }
    </script></body>

JavaScript DOM如何獲取

注意：使用 getElementsByTagName() 方法可以返回帶有指定標(biāo)簽名的對象的集合，因?yàn)榈玫降氖且粋€(gè)對象的集合，所以我們想要操作里面的元素就需要遍歷，注意：使用該方法得到元素對象是動(dòng)態(tài)的

3. 通過類名 class name 獲取

語法：

document.getElementsByClassName("class name");

實(shí)例：

<body>
    <p class="p">我是p節(jié)點(diǎn)</p>
    <p class="p">我是p節(jié)點(diǎn)</p>
    <script>
        var p = document.getElementsByClassName("p");
        console.log(p);
        for (let i = 0; i < p.length; i++) {
            console.log(p[i]);
        }
    </script></body>

JavaScript DOM如何獲取

這個(gè)也很簡單，記住就好了

4. 通過 HTML5 新增api獲取【推薦】

語法：

document.querySelector("詳見實(shí)例");
document.querySelectorAll("詳見實(shí)例");

實(shí)例：

<body>
    <p class="p">我是p節(jié)點(diǎn)</p>
    <p class="name">梨花</p>
    <p id="info">信息</p>
    <script>
        // 通過標(biāo)簽名獲取
        var p = document.querySelector("p");
        // 通過類名獲取，記得加點(diǎn)
        var qname = document.querySelector(".name");
        // 通過id獲取，記得加#
        var info = document.querySelector("#info");
        // 獲取匹配到的所有元素，返回?cái)?shù)組
        var all = document.querySelectorAll("p");
        console.log(p);
        console.log(qname);
        console.log(info);
        for (let i = 0; i < all.length; i++) {
            console.log(all[i]);
        }
    </script></body>

JavaScript DOM如何獲取

可以看到，使用html5新增的api，很靈活，所以我很喜歡用這個(gè)，也推薦大家使用

5. 特殊元素獲取

除此之外，還有一些特殊元素有自己的獲取方法，比如body，html元素

獲取 body 元素

語法：

document.body;

實(shí)例：

<body>
    <script>
        var body = document.body;
        console.log(body);
    </script></body>

JavaScript DOM如何獲取
可以看到，成功獲取到了body元素的所有內(nèi)容

獲取 html 元素

語法：

document.documentElement;

實(shí)例：

<body>
    <script>
        var html = document.documentElement;
        console.log(html);
    </script></body>

JavaScript DOM如何獲取
可以看到，整個(gè)網(wǎng)頁 html 都被獲取到了，OK，到此為止，獲取DOM就告一段落了，下面開始動(dòng)態(tài)創(chuàng)建添加dom的學(xué)習(xí)

創(chuàng)建添加 DOM

說白了，操作dom，和玩數(shù)據(jù)一樣，增刪改查，而創(chuàng)建添加就相當(dāng)于增，我們在添加數(shù)據(jù)時(shí)，首先得有數(shù)據(jù)，然后再添加，DOM操作也是一樣，首先要?jiǎng)?chuàng)建DOM，然后告訴它要添加在哪里呀，最終完成操作，下面就學(xué)習(xí)如何創(chuàng)建dom，and ，如何添加 dom

動(dòng)態(tài)創(chuàng)建 DOM

很簡單，不要怕哦，哈哈

語法：

document.createElement("元素名");

實(shí)例：
假如要?jiǎng)討B(tài)的創(chuàng)建一個(gè)元素 p ，可以這樣寫，其他也是一樣，舉一反三

var p = document.createElement("p");

動(dòng)態(tài)添加 DOM

添加dom這里將兩種，根據(jù)情況使用，一種是在父元素的子元素末尾追加，一種是指定子元素之后追加

末尾追加

語法：

node.appendChild(child);

實(shí)例：

<body>
    <p>
        <a href="">百度一下</a>
    </p>

    <script>
        var p = document.createElement("p");
        p.innerText = "我就是p"
        var p = document.querySelector("p");
        p.appendChild(p);
    </script></body>

JavaScript DOM如何獲取

動(dòng)態(tài)創(chuàng)建元素p段落標(biāo)簽，并寫入文字“我就是p”，最后獲取p元素，并將p追加為p的孩子，這種追加方式是在末尾追加，因此效果如上圖所示

指定元素后追加

語法：

node.insertBefore(child, 指定元素);

實(shí)例：

<body>
    <p>
        <a href="">百度一下</a>
        <span>我是span弟弟</span>
    </p>

    <script>
        var p = document.createElement("p");
        p.innerText = "我就是p"
        var p = document.querySelector("p");
        var a = document.querySelector("a");
        // 在p下創(chuàng)建p，位置在a元素之前
        p.insertBefore(p, a);
    </script></body>

JavaScript DOM如何獲取

這就完了？對啊，你以為呢？是不是很簡單呢，簡單就對了，剩下的就是要多練習(xí)了，好，進(jìn)入下一環(huán)節(jié)，如何修改 DOM 呢？

修改 DOM

總結(jié)如下：

JavaScript DOM如何獲取

例子1：獲取頁面的p標(biāo)簽，并將內(nèi)容改為 “周棋洛”

<body>
    <p>
        <p></p>
    </p>

    <script>
        var p = document.querySelector("p");
        p.innerText = "周棋洛";
    </script></body>

例子2：點(diǎn)擊按鈕生成百度的超鏈接

<body>
    <p>
        <button onclick="createBaidu()">點(diǎn)擊生成百度超鏈接</button>
    </p>

    <script>
        function createBaidu() {
            var p = document.querySelector("p");
            var a = document.createElement("a");
            a.href = "https://www.baidu.com";
            a.innerText = "百度一下，你就知道";
            p.append(a);
        }
    </script></body>

JavaScript DOM如何獲取

例子3：點(diǎn)擊按鈕，p標(biāo)簽內(nèi)文字顏色變綠，手動(dòng)狗頭

<body>
    <p>
        <button onclick="changeColor()">點(diǎn)擊變綠</button>
        <p>我一會(huì)就變綠</p>
    </p>

    <script>
        function changeColor() {
            var p = document.querySelector("p");
            p.style.color = "green";
        }
    </script></body>

JavaScript DOM如何獲取

刪除 DOM

node.removeChild() 方法從 DOM 中刪除一個(gè)子節(jié)點(diǎn)，返回刪除的節(jié)點(diǎn)

語法：

node.removeChild(child);

案例：

<body>
    <p>
        <button onclick="removeP()">點(diǎn)擊移除p</button>
        <p>我是p，一會(huì)就時(shí)間到了</p>
    </p>

    <script>
        function removeP() {
            var p = document.querySelector("p");
            var p = document.querySelector("p");
            p.removeChild(p); 
        }
    </script></body>

JavaScript DOM如何獲取

到此，相信大家對“JavaScript DOM如何獲取”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手