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

10年積累的成都網(wǎng)站建設、做網(wǎng)站經(jīng)驗，可以快速應對客戶對網(wǎng)站的新想法和需求。提供各種問題對應的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡服務。我雖然不認識你，你也不認識我。但先建設網(wǎng)站后付款的網(wǎng)站建設流程，更有綏中免費網(wǎng)站建設讓你可以放心的選擇與我們合作。

什么是 DOM ？

Document Object Model，縮寫DOM，中文：文檔對象模型，是W3C組織推薦的處理可擴展標記語言的標準編程接口

什么是 DOM Tree ？

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

    
    
我是一個dom節(jié)點
    

        
p p
    

抽象為 dom樹如下所示：

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

獲取 DOM

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

1. 通過 id 獲取

語法：

document.getElementById("id name");

實例：

    我是p節(jié)點

    

打開控制臺，可以看到成功拿到

2. 通過標簽名 tag name 獲取

語法：

document.getElementsByTagName("tag name");

實例：

    
我是p節(jié)點
    
我也是p節(jié)點
    

注意：使用 getElementsByTagName() 方法可以返回帶有指定標簽名的對象的集合，因為得到的是一個對象的集合，所以我們想要操作里面的元素就需要遍歷，注意：使用該方法得到元素對象是動態(tài)的

3. 通過類名 class name 獲取

語法：

document.getElementsByClassName("class name");

實例：

    我是p節(jié)點

    我是p節(jié)點

    

這個也很簡單，記住就好了

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

語法：

document.querySelector("詳見實例");

document.querySelectorAll("詳見實例");

實例：

    我是p節(jié)點

    梨花

    信息

    

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

5. 特殊元素獲取

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

獲取 body 元素

語法：

document.body;

實例：

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

獲取 html 元素

語法：

document.documentElement;

實例：

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

創(chuàng)建添加 DOM

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

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

很簡單，不要怕哦，哈哈

語法：

document.createElement("元素名");

實例：
假如要動態(tài)的創(chuàng)建一個元素 p ，可以這樣寫，其他也是一樣，舉一反三

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

動態(tài)添加 DOM

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

末尾追加

語法：

node.appendChild(child);

實例：

    

        百度一下
    

    

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

指定元素后追加

語法：

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

實例：

    

        百度一下
        我是span弟弟
    

    

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

修改 DOM

總結(jié)如下：

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

例子2：點擊按鈕生成百度的超鏈接

    

        點擊生成百度超鏈接
    

    

例子3：點擊按鈕，p標簽內(nèi)文字顏色變綠，手動狗頭

    

        點擊變綠
        
我一會就變綠
    


    

刪除 DOM

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

語法：

node.removeChild(child);

案例：

    

        點擊移除p
        
我是p，一會就時間到了
    


    

到此，相信大家對“JavaScript DOM如何獲取”有了更深的了解，不妨來實際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關內(nèi)容可以進入相關頻道進行查詢，關注我們，繼續(xù)學習！