溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容主要講解“JavaScript DOM如何獲取”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“JavaScript DOM如何獲取”吧!
Document Object Model，縮寫DOM，中文：文檔對象模型，是W3C組織推薦的處理可擴展標記語言的標準編程接口
DOM Tree 是指通過 DOM 將 HTML 頁面進行解析，并生成的 HTML tree 樹狀結構和對應訪問方法，借助 DOM Tree，我們能直接而且簡易的操作 HTML 頁面上的每個標記內容，比如下面 HTML 代碼
<html><head> <title>玩轉dom</title></head><body> <p>我是一個dom節點</p> <p> <p>p p</p> </p></body></html>
抽象為 dom樹如下所示：
了解了以上知識后，下面就是對API的學習了，我將從如何獲取 DOM，如何創建添加 DOM，如何修改 DOM 以及如何刪除 DOM 四個方面進行講解，跟緊了
獲取DOM的api有很多，但都十分簡單，加油
語法：
document.getElementById("id name");實例：
<body>
<p id="p">我是p節點</p>
<script>
var p = document.getElementById("p");
console.log(p);
</script></body>
打開控制臺，可以看到成功拿到
語法：
document.getElementsByTagName("tag name");實例：
<body>
<p>我是p節點</p>
<p>我也是p節點</p>
<script>
var p = document.getElementsByTagName("p");
console.log(p);
for (let i = 0; i < p.length; i++) {
console.log(p[i]);
}
</script></body>
注意：使用 getElementsByTagName() 方法可以返回帶有指定標簽名的對象的集合，因為得到的是一個對象的集合，所以我們想要操作里面的元素就需要遍歷，注意：使用該方法得到元素對象是動態的
語法：
document.getElementsByClassName("class name");實例：
<body>
<p class="p">我是p節點</p>
<p class="p">我是p節點</p>
<script>
var p = document.getElementsByClassName("p");
console.log(p);
for (let i = 0; i < p.length; i++) {
console.log(p[i]);
}
</script></body>
這個也很簡單，記住就好了
語法：
document.querySelector("詳見實例");document.querySelectorAll("詳見實例");實例：
<body>
<p class="p">我是p節點</p>
<p class="name">梨花</p>
<p id="info">信息</p>
<script>
// 通過標簽名獲取
var p = document.querySelector("p");
// 通過類名獲取，記得加點
var qname = document.querySelector(".name");
// 通過id獲取，記得加#
var info = document.querySelector("#info");
// 獲取匹配到的所有元素，返回數組
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>
可以看到，使用html5新增的api，很靈活，所以我很喜歡用這個，也推薦大家使用
除此之外，還有一些特殊元素有自己的獲取方法，比如body，html元素
語法：
document.body;
實例：
<body> <script> var body = document.body; console.log(body); </script></body>
可以看到，成功獲取到了body元素的所有內容
語法：
document.documentElement;
實例：
<body> <script> var html = document.documentElement; console.log(html); </script></body>
可以看到，整個網頁 html 都被獲取到了，OK，到此為止，獲取DOM就告一段落了，下面開始動態創建添加dom的學習
說白了，操作dom，和玩數據一樣，增刪改查，而創建添加就相當于增，我們在添加數據時，首先得有數據，然后再添加，DOM操作也是一樣，首先要創建DOM，然后告訴它要添加在哪里呀，最終完成操作，下面就學習如何創建dom，and ，如何添加 dom
很簡單，不要怕哦，哈哈
語法：
document.createElement("元素名");實例：
假如要動態的創建一個元素 p ，可以這樣寫，其他也是一樣，舉一反三
var p = document.createElement("p");添加dom這里將兩種，根據情況使用，一種是在父元素的子元素末尾追加，一種是指定子元素之后追加
語法：
node.appendChild(child);
實例：
<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>
動態創建元素p段落標簽，并寫入文字“我就是p”，最后獲取p元素，并將p追加為p的孩子，這種追加方式是在末尾追加，因此效果如上圖所示
語法：
node.insertBefore(child, 指定元素);
實例：
<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下創建p，位置在a元素之前
p.insertBefore(p, a);
</script></body>
這就完了？對啊，你以為呢？是不是很簡單呢，簡單就對了，剩下的就是要多練習了，好，進入下一環節，如何修改 DOM 呢？
總結如下：
例子1：獲取頁面的p標簽，并將內容改為 “周棋洛”
<body>
<p>
<p></p>
</p>
<script>
var p = document.querySelector("p");
p.innerText = "周棋洛";
</script></body>例子2：點擊按鈕生成百度的超鏈接
<body>
<p>
<button onclick="createBaidu()">點擊生成百度超鏈接</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>
例子3：點擊按鈕，p標簽內文字顏色變綠，手動狗頭
<body>
<p>
<button onclick="changeColor()">點擊變綠</button>
<p>我一會就變綠</p>
</p>
<script>
function changeColor() {
var p = document.querySelector("p");
p.style.color = "green";
}
</script></body>
node.removeChild() 方法從 DOM 中刪除一個子節點，返回刪除的節點
語法：
node.removeChild(child);
案例：
<body>
<p>
<button onclick="removeP()">點擊移除p</button>
<p>我是p，一會就時間到了</p>
</p>
<script>
function removeP() {
var p = document.querySelector("p");
var p = document.querySelector("p");
p.removeChild(p);
}
</script></body>
到此，相信大家對“JavaScript DOM如何獲取”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
