溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文小編為大家詳細介紹“javascript DOM的概念和常用操作是什么”，內容詳細，步驟清晰，細節處理妥當，希望這篇“javascript DOM的概念和常用操作是什么”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。
文檔對象模型 (DOM) 是 HTML 和 XML 文檔的編程接口。它提供了對文檔的結構化的表述，并定義了一種方式可以使從程序中對該結構進行訪問，從而改變文檔的結構，樣式和內容。DOM 將文檔解析為一個由節點和對象（包含屬性和方法的對象）組成的結構集合。簡言之，它會將 web 頁面和腳本或程序語言連接起來。
官方定義晦澀難懂，我們可以簡單理解為： DOM 采用的是“樹形結構”，用“樹節點”的形式來表示頁面中的每一個元素。我們先看下面的一個例子。
<!DOCTYPE HTML> <html> <head> <title>文檔標題</title> </head> <body> <a href="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3923a92ec9c74b7a9e6f7ec2f7b99c49~tplv-k3u1fbpfcp-zoom-1.image" rel="external nofollow" >我的鏈接</a> <h2>我的標題</h2> </body> </html>
對于上面這個 HTML 文檔，DOM 將其解析為修圖所示的樹形結構。
HTML文檔被瀏覽器解析后就是一棵DOM樹，要改變HTML的結構，就需要通過JavaScript來操作DOM。
添加元素
createElement - 創建元素
createTextNode - 創建文本節點（元素）
cloneNode(true/false) - 克隆一個節點，接收一個bool參數，用來表示是否復制子元素。
createDocumentFragment - 創建一個文檔碎片 DocumentFragment，它表示一種輕量級的文檔，主要是用來存儲臨時節點，大量操作 DOM 時用它可以大大提升性能。
例如：新創建一個新元素 div，并添加到 HTML 文檔中。代碼如下：
let el = document.createElement("div");
el.id = 'shiYu';
el.style = 'width: 500px;height:500px;backGroundColor:red;';
el.innerHTML = '創建一個新元素div';
document.body.appendChild(el);例如：克隆一個新元素 clone，并添加到 HTML 文檔中。代碼如下：
let el = document.getElementById("test");
let clone = el.cloneNode(true);
clone.id = "test2";
document.body.appendChild(clone);刪除元素
removeChild(node) - 刪除子節點（元素）
replaceChild - 用于將一個節點替換另一個節點
代碼如下：
var deletedChild = parent.removeChild(node);
const sp1 = document.createElement("span");
sp1.id = "newSpan";
const sp1_content = document.createTextNode("new replacement span element.");
sp1.appendChild(sp1_content);
const sp2 = document.getElementById("childSpan");
const parentDiv = sp2.parentNode;
parentDiv.replaceChild(sp1, sp2);修改元素
appendChild(node) - 插入新的子節點（元素）
insertBefore - 在參考節點之前插入一個擁有指定父節點的子節點
insertAdjacentHTML - 將指定的文本解析為 Element 元素，并將結果節點插入到 DOM 樹中的指定位置
代碼如下：
// parent.appendChild(child);
const p = document.createElement("p");
document.body.appendChild(p);
let insertedNode = parentNode.insertBefore(newNode, referenceNode);
// 原為 <div id="one">one</div>
var d1 = document.getElementById('one');
d1.insertAdjacentHTML('afterend', '<div id="two">two</div>');
// 此時，新結構變成：
// <div id="one">one</div><div id="two">two</div>getElementById(id) - 獲取帶有指定 id 的節點（元素）
getElementsByClassName - 獲取帶有指定類名的節點（元素），多個類名用空格分隔，返回一個 HTMLCollection 。注意兼容
getElementsByTagName - 根據標簽名稱獲取元素， * 表示查詢所有標簽，返回一個 HTMLCollection.
getElementsByName - 獲取帶有 name 屬性的節點（元素），返回一個 NodeList.
querySelector - 返回單個 Node，IE8+(含），如果匹配到多個結果，只返回第一個。
querySelectorAll - 返回一個 NodeList ，IE8+(含）。
forms - 獲取當前頁面所有form，返回一個 HTMLCollection.
innerHTML - 節點（元素）的文本值
parentNode - 節點（元素）的父節點
childNodes - 節點（元素）的子節點
attributes - 節點（元素）的屬性節點
setAttribute - 給元素設置屬性
getAttribute - 返回指定的特性名相應的特性值，如果不存在，則返回null
hasAttribute - 判斷元素是否有指定屬性
dataset - 獲取html data-開頭的屬性
classList - 獲取樣式 class
window.getComputedStyle - 獲取應用到元素上的所有樣式，IE8或更低版本不支持此方法。
getBoundingClientRect - 返回一個 DOMRect 對象，其提供了元素的大小及其相對于視口的位置。
例子：
// 創建一個html元素，這里以創建h2元素為例
let el = document.createElement("h2")
el.innerHTML = '這是一段文字描述...'
let p = document.getElementById('p')
p.innerHTML = '這是一段文字描述...'
// myEl 是一個 DOMRect 對象，包含整個元素的最小矩形（包括 padding 和 border-width）。width、height、left、top、right、bottom，它是相對于窗口頂部而不是文檔頂部，滾動頁面時它們的值是會發生變化的。
var myEl = element.getBoundingClientRect();讀到這里，這篇“javascript DOM的概念和常用操作是什么”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
