一文詳解DOM的概念和常用操作

更新時(shí)間：2023年04月24日 08:35:34 作者：前端小蜜蜂來(lái)也

本文詳細(xì)介紹了DOM的概念和常用操作，文檔對(duì)象模型 (DOM) 是 HTML 和 XML 文檔的編程接口。它提供了對(duì)文檔的結(jié)構(gòu)化的表述，并定義了一種方式可以使從程序中對(duì)該結(jié)構(gòu)進(jìn)行訪(fǎng)問(wèn)，從而改變文檔的結(jié)構(gòu)，樣式和內(nèi)容，感興趣的朋友可以參考閱讀本文

DOM 的概念和常用操作

什么是 DOM?

文檔對(duì)象模型 (DOM) 是 HTML 和 XML 文檔的編程接口。它提供了對(duì)文檔的結(jié)構(gòu)化的表述，并定義了一種方式可以使從程序中對(duì)該結(jié)構(gòu)進(jìn)行訪(fǎng)問(wèn)，從而改變文檔的結(jié)構(gòu)，樣式和內(nèi)容。DOM 將文檔解析為一個(gè)由節(jié)點(diǎn)和對(duì)象（包含屬性和方法的對(duì)象）組成的結(jié)構(gòu)集合。簡(jiǎn)言之，它會(huì)將 web 頁(yè)面和腳本或程序語(yǔ)言連接起來(lái)。

官方定義晦澀難懂，我們可以簡(jiǎn)單理解為： DOM 采用的是“樹(shù)形結(jié)構(gòu)”，用“樹(shù)節(jié)點(diǎn)”的形式來(lái)表示頁(yè)面中的每一個(gè)元素。我們先看下面的一個(gè)例子。

<!DOCTYPE HTML>
<html>
<head>
  <title>文檔標(biāo)題</title>
</head>
<body>
  <a  rel="external nofollow" >我的鏈接</a>
  <h1>我的標(biāo)題</h1>
</body>
</html>

對(duì)于上面這個(gè) HTML 文檔，DOM 將其解析為修圖所示的樹(shù)形結(jié)構(gòu)。

HTML文檔被瀏覽器解析后就是一棵DOM樹(shù)，要改變HTML的結(jié)構(gòu)，就需要通過(guò)JavaScript來(lái)操作DOM。

如何操作 DOM?

一些常用的 HTML DOM 方法：核心就是增刪改查操作，

添加元素

createElement - 創(chuàng)建元素
createTextNode - 創(chuàng)建文本節(jié)點(diǎn)（元素）
cloneNode(true/false) - 克隆一個(gè)節(jié)點(diǎn)，接收一個(gè)bool參數(shù)，用來(lái)表示是否復(fù)制子元素。
createDocumentFragment - 創(chuàng)建一個(gè)文檔碎片 DocumentFragment，它表示一種輕量級(jí)的文檔，主要是用來(lái)存儲(chǔ)臨時(shí)節(jié)點(diǎn)，大量操作 DOM 時(shí)用它可以大大提升性能。

例如：新創(chuàng)建一個(gè)新元素 div，并添加到 HTML 文檔中。代碼如下：

let el = document.createElement("div");
el.id = 'shiYu';
el.style = 'width: 500px;height:500px;backGroundColor:red;';
el.innerHTML = '創(chuàng)建一個(gè)新元素div';
document.body.appendChild(el);

例如：克隆一個(gè)新元素 clone，并添加到 HTML 文檔中。代碼如下：

let el = document.getElementById("test");
let clone = el.cloneNode(true);
clone.id = "test2";
document.body.appendChild(clone);

刪除元素

removeChild(node) - 刪除子節(jié)點(diǎn)（元素）
replaceChild - 用于將一個(gè)節(jié)點(diǎn)替換另一個(gè)節(jié)點(diǎn)

代碼如下：

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é)點(diǎn)（元素）
insertBefore - 在參考節(jié)點(diǎn)之前插入一個(gè)擁有指定父節(jié)點(diǎn)的子節(jié)點(diǎn)
insertAdjacentHTML - 將指定的文本解析為 Element 元素，并將結(jié)果節(jié)點(diǎn)插入到 DOM 樹(shù)中的指定位置

代碼如下：

// 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>');
// 此時(shí)，新結(jié)構(gòu)變成：
// <div id="one">one</div><div id="two">two</div>

查找元素

getElementById(id) - 獲取帶有指定 id 的節(jié)點(diǎn)（元素）
getElementsByClassName - 獲取帶有指定類(lèi)名的節(jié)點(diǎn)（元素），多個(gè)類(lèi)名用空格分隔，返回一個(gè) HTMLCollection 。注意兼容
getElementsByTagName - 根據(jù)標(biāo)簽名稱(chēng)獲取元素， * 表示查詢(xún)所有標(biāo)簽，返回一個(gè) HTMLCollection.
getElementsByName - 獲取帶有 name 屬性的節(jié)點(diǎn)（元素），返回一個(gè) NodeList.
querySelector - 返回單個(gè) Node，IE8+(含），如果匹配到多個(gè)結(jié)果，只返回第一個(gè)。
querySelectorAll - 返回一個(gè) NodeList ，IE8+(含）。
forms - 獲取當(dāng)前頁(yè)面所有form，返回一個(gè) HTMLCollection.

一些常用的 HTML DOM 屬性

innerHTML - 節(jié)點(diǎn)（元素）的文本值
parentNode - 節(jié)點(diǎn)（元素）的父節(jié)點(diǎn)
childNodes - 節(jié)點(diǎn)（元素）的子節(jié)點(diǎn)
attributes - 節(jié)點(diǎn)（元素）的屬性節(jié)點(diǎn)
setAttribute - 給元素設(shè)置屬性
getAttribute - 返回指定的特性名相應(yīng)的特性值，如果不存在，則返回null
hasAttribute - 判斷元素是否有指定屬性
dataset - 獲取html data-開(kāi)頭的屬性
classList - 獲取樣式 class
window.getComputedStyle - 獲取應(yīng)用到元素上的所有樣式，IE8或更低版本不支持此方法。
getBoundingClientRect - 返回一個(gè) DOMRect 對(duì)象，其提供了元素的大小及其相對(duì)于視口的位置。

例子：

// 創(chuàng)建一個(gè)html元素，這里以創(chuàng)建h1元素為例
let el = document.createElement("h1")
el.innerHTML = '這是一段文字描述...'

let p = document.getElementById('p')
p.innerHTML = '這是一段文字描述...'

// myEl 是一個(gè) DOMRect 對(duì)象，包含整個(gè)元素的最小矩形（包括 padding 和 border-width）。width、height、left、top、right、bottom，它是相對(duì)于窗口頂部而不是文檔頂部，滾動(dòng)頁(yè)面時(shí)它們的值是會(huì)發(fā)生變化的。
var myEl = element.getBoundingClientRect();

到此這篇關(guān)于一文詳解DOM的概念和常用操作的文章就介紹到這了,更多相關(guān)DOM 概念和常用操作內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: