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