快捷導(dǎo)航

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

更新時間：2023年04月24日 08:35:34 作者：前端小蜜蜂來也

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

DOM 的概念和常用操作

什么是 DOM?

文檔對象模型 (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  rel="external nofollow" >我的鏈接</a>
  <h1>我的標(biāo)題</h1>
</body>
</html>

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

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

如何操作 DOM?

一些常用的 HTML 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.

一些常用的 HTML DOM 屬性

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)建h1元素為例
let el = document.createElement("h1")
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();

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

您可能感興趣的文章: