javascript核心之DOM操作

S一個(gè)重要功能就是操作DOM, 改變頁(yè)面顯示。

1、基本概念

2、節(jié)點(diǎn)類型

3、節(jié)點(diǎn)關(guān)系

4、節(jié)點(diǎn)操作

基本概念

DOM全稱為Document Object Model ，即文檔對(duì)象模型，是針對(duì)HTML和XML的一個(gè)API, 描繪了一個(gè)層次化的節(jié)點(diǎn)樹，可以添加、移除和修改頁(yè)面的某一部分。

DOM可以將任何HTML或XML文檔描繪成一個(gè)由多層節(jié)點(diǎn)構(gòu)成的結(jié)構(gòu)。

節(jié)點(diǎn)之間的關(guān)系構(gòu)成了層次，而所有頁(yè)面標(biāo)記則表現(xiàn)為一個(gè)以特定節(jié)點(diǎn)為根節(jié)點(diǎn)的樹形結(jié)構(gòu)。以下面的HTML為例：

<html>
<head>
 <title>Sample Page</title>
</head>
<body>
 <p>Hello world!</p>
</body>
</html>

將這個(gè)HTML文檔表示為一個(gè)層次結(jié)構(gòu)，如下圖

方框中黑體字代表節(jié)點(diǎn)類型。

文檔節(jié)點(diǎn)(圖中的 Document)是每個(gè)文檔的根節(jié)點(diǎn)，

這個(gè)例子中，它只有一個(gè)子節(jié)點(diǎn)，即 <html>元素，我們稱之為文檔元素。

文檔元素是文檔的最外層元素，文檔中的其他所有元素都包含在文檔元素中。

每個(gè)文檔只能有一個(gè)文檔元素。

在HTML頁(yè)面中，文檔元素始終都是<html>元素。

在XML中，沒有預(yù)定義的元素，任何元素都可能成為文檔元素。

每一段標(biāo)記都可以通過樹中的一個(gè)節(jié)點(diǎn)來表示，總共有12種節(jié)點(diǎn)類型，這些類型都繼承自一個(gè)基類型。

并不是所有節(jié)點(diǎn)類型都受到Web瀏覽器的支持，最常用的就是元素、文本、文檔節(jié)點(diǎn)（下面數(shù)值常量中的1、3和9），我們只要關(guān)注這三種就可以了。

我們先看下所有的節(jié)點(diǎn)類型。

節(jié)點(diǎn)類型

js 中所有節(jié)點(diǎn)類型都繼承自Node類型，因此都共享著相同的基本屬性和方法。

每個(gè)節(jié)點(diǎn)都有nodeType屬性，用于表明節(jié)點(diǎn)的類型。

nodeType有12個(gè)數(shù)值常量，任何類型必居其一。

各節(jié)點(diǎn)類型可能的子節(jié)點(diǎn)類型

通過比較上面這些常量，可以確定節(jié)點(diǎn)類型：

 if (someNode.nodeType == 1) {
 alert("Node is an element.");
 }

節(jié)點(diǎn)關(guān)系

把文檔樹比喻成家譜。（如下圖，某個(gè)節(jié)點(diǎn)可以通過屬性訪問其他節(jié)點(diǎn)）

每個(gè)節(jié)點(diǎn)有一個(gè)childNodes屬性，其中保存著一個(gè)NodeList對(duì)象（類數(shù)組對(duì)象，但不是Array的實(shí)例），它是基于DOM結(jié)構(gòu)動(dòng)態(tài)查詢的結(jié)果。

可通過方括號(hào)，也可通過item() 方法來訪問NodeList中的節(jié)點(diǎn)。例子：

 // 訪問 NodeList對(duì)象中的節(jié)點(diǎn)
 var firstChild = someNode.childNodes[0];
 var secondChild = someNode.childNodes.item(1);
 var count = someNode.childNodes.length;

在反映這些關(guān)系的所有屬性中，childNodes屬性更方便一些，因?yàn)橹豁毷褂煤?jiǎn)單的關(guān)系指針，就可以通過它訪問文檔樹中的任何節(jié)點(diǎn)。

節(jié)點(diǎn)操作

因?yàn)殛P(guān)系指針是只讀的，所以DOM提供了一些操作節(jié)點(diǎn)的方法。

主要是添加、插入、替換、移除，我們分別介紹。

1、末尾添加一個(gè)節(jié)點(diǎn)

這是我們最常用的操作，appendChild()，用于向childNodes列表的末尾添加一個(gè)節(jié)點(diǎn)。

添加節(jié)點(diǎn)后，childNodes的新增節(jié)點(diǎn)、父節(jié)點(diǎn)及以前的最后一個(gè)子節(jié)點(diǎn)的關(guān)系指針都會(huì)相應(yīng)的得到更新。更新完成后，appendChild()返回新增的節(jié)點(diǎn)。

 // appendChild()
 var returnedNode = someNode.appendChild(newNode);
 alert(returnedNode == newNode); // true
 alert(someNode.lastChild == newNode); // true

如果傳入到appendChild()中的節(jié)點(diǎn)已經(jīng)是文檔的一部分，那結(jié)果就是將該節(jié)點(diǎn)從原來的位置轉(zhuǎn)移到新位置。

2、插入節(jié)點(diǎn)

如果要把節(jié)點(diǎn)插入到 childNodes 列表中某個(gè)特定的位置上，用insertBefore(要插入的節(jié)點(diǎn)，作為參照的節(jié)點(diǎn))。

插入節(jié)點(diǎn)后，被插入的節(jié)點(diǎn)會(huì)變成參照節(jié)點(diǎn)的前一個(gè)同胞節(jié)點(diǎn)（previousSibling），同時(shí)被方法返回。

如果參照節(jié)點(diǎn)是null, 則 insertBefore()與appendChild()執(zhí)行相同的操作。

 // insertBefore()
 // 插入后成為最后一個(gè)子節(jié)點(diǎn)
 returnedNode = someNode.insertBefore(newNode, null);
 alert(newNode == someNode.lastChild); // true
 // 插入后成為第一個(gè)子節(jié)點(diǎn)
 var returnedNode = someNode.insertBefore(newNode, someNode.firstChild);
 alert(returnedNode == newNode); //true
 alert(newNode == someNode.firstChild); //true
 // 插入到最后一個(gè)子節(jié)點(diǎn)的前面
 returnedNode = someNode.insertBefore(newNode, someNode.lastChild);
 alert(newNode==someNode.childNodes[someNode.childNodes.length-2]); //true

3、替換節(jié)點(diǎn)

如果要替換節(jié)點(diǎn)，用 replaceChild(要插入的節(jié)點(diǎn)，要替換的節(jié)點(diǎn))

要替換的節(jié)點(diǎn)將由這個(gè)方法返回并從文檔樹中被移除，同時(shí)由要插入的節(jié)點(diǎn)占據(jù)其位置。

 // 替換節(jié)點(diǎn) replaceChild()
 // 替換第一個(gè)子節(jié)點(diǎn)
 var returnedNode = someNode.replaceChild(newNode,someNode.firstChild);

4、移除節(jié)點(diǎn)

移除節(jié)點(diǎn)用 removeChild(移除的節(jié)點(diǎn))。

被移除的節(jié)點(diǎn)成為方法的返回值。

 // 移除節(jié)點(diǎn) removeChild()
 // 移除第一個(gè)節(jié)點(diǎn)
 var formerFirstChild = someNode.removeChild(someNode.firstChild);

移除的節(jié)點(diǎn)仍然為文檔所有，不過在文檔中已經(jīng)沒有了自己的位置。

前面介紹的四個(gè)方法操作的都是某個(gè)節(jié)點(diǎn)的子節(jié)點(diǎn)，也就是說，要使用這幾個(gè)方法必須先取得父節(jié)點(diǎn)（使用parentNode屬性）。

5、其他方法

cloneNode()，接受一個(gè)布爾值參數(shù)，表示是否執(zhí)行深復(fù)制。

true, 執(zhí)行深復(fù)制，也就是復(fù)制節(jié)點(diǎn)及其整個(gè)子節(jié)點(diǎn)數(shù)。

false, 執(zhí)行淺復(fù)制，即只復(fù)制節(jié)點(diǎn)本身。

返回的節(jié)點(diǎn)副本屬于文檔所有，但沒有指定父節(jié)點(diǎn)。

因此，這個(gè)節(jié)點(diǎn)副本就成為“孤兒”，除非通過 appendChild(), insertBefore()或replaceChild()將它添加到文檔中。

下一篇中，我們?cè)斀?常用到的 document, element, text 三種節(jié)點(diǎn)類型，并結(jié)合節(jié)點(diǎn)操作，介紹幾個(gè)常用的示例。

所有內(nèi)置的JavaScript對(duì)象

所有瀏覽器對(duì)象

所有HTML DOM對(duì)象

JavaScript 對(duì)象參考手冊(cè)

參考手冊(cè)描述了每個(gè)對(duì)象的屬性和方法，并提供了在線實(shí)例。

Array 對(duì)象
Boolean 對(duì)象
Date 對(duì)象
Math 對(duì)象
Number 對(duì)象
String 對(duì)象
RegExp 對(duì)象
全局屬性和函數(shù)

Browser 對(duì)象參考手冊(cè)

參考手冊(cè)描述了每個(gè)對(duì)象的屬性和方法，并提供了在線實(shí)例。

Window 對(duì)象
Navigator 對(duì)象
Screen 對(duì)象
History 對(duì)象
Location 對(duì)象

HTML DOM 參考手冊(cè)

參考手冊(cè)描述了 HTML DOM 的屬性和方法，并提供在線實(shí)例。

HTML Document
HTML Element
HTML Attributes
HTML Events

HTML DOM 元素對(duì)象參考手冊(cè)

參考手冊(cè)描述了每個(gè)對(duì)象的屬性和方法，并提供了在線實(shí)例。

Anchor 對(duì)象
Area 對(duì)象
Base 對(duì)象
Body 對(duì)象
Button 對(duì)象
Form 對(duì)象
Frame/IFrame 對(duì)象
Frameset 對(duì)象
Image 對(duì)象
Input Button 對(duì)象
Input Checkbox 對(duì)象
Input File 對(duì)象
Input Hidden 對(duì)象
Input Password 對(duì)象
Input Radio 對(duì)象
Input Reset 對(duì)象
Input Submit 對(duì)象
Input Text 對(duì)象
Link 對(duì)象
Meta 對(duì)象
Object 對(duì)象
Option 對(duì)象
Select 對(duì)象
Style 對(duì)象
Table 對(duì)象
td / th 對(duì)象
tr 對(duì)象
Textarea 對(duì)象

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

言

在前端開發(fā)的世界里，JavaScript如同魔法師手中的魔杖，而DOM（Document Object Model）則是施展魔法的舞臺(tái)。掌握DOM，意味著能夠動(dòng)態(tài)地改變網(wǎng)頁(yè)的結(jié)構(gòu)、樣式和行為，為用戶帶來豐富的交互體驗(yàn)。本文旨在帶你深入了解DOM，從其基本概念出發(fā)，直至實(shí)戰(zhàn)應(yīng)用，幫助你成為前端領(lǐng)域的“魔法師”。

技術(shù)概述

定義DOM

DOM是一種樹狀結(jié)構(gòu)模型，用于表示HTML或XML文檔的結(jié)構(gòu)。它將文檔視為一個(gè)由節(jié)點(diǎn)組成的樹，每個(gè)節(jié)點(diǎn)都是一個(gè)對(duì)象，可以是元素節(jié)點(diǎn)、屬性節(jié)點(diǎn)、文本節(jié)點(diǎn)等。DOM允許JavaScript讀取和修改頁(yè)面的內(nèi)容和布局。

核心特性與優(yōu)勢(shì)

可編程性：DOM提供了API，讓開發(fā)者能夠通過腳本動(dòng)態(tài)地訪問和修改文檔。
兼容性：所有現(xiàn)代瀏覽器均支持DOM標(biāo)準(zhǔn)。
靈活性：能夠創(chuàng)建、讀取、更新或刪除節(jié)點(diǎn)，以及處理事件和樣式。

代碼示例

// 獲取元素節(jié)點(diǎn)
const element = document.getElementById('myElement');
// 修改內(nèi)容
element.textContent = 'Hello, DOM!';

技術(shù)細(xì)節(jié)

DOM結(jié)構(gòu)解析

DOM樹的根節(jié)點(diǎn)通常是<html>元素，下面掛載著<head>和<body>等子節(jié)點(diǎn)。每個(gè)節(jié)點(diǎn)都有自己的屬性和方法，如appendChild()、removeChild()等，用于操作DOM結(jié)構(gòu)。

難點(diǎn)剖析

性能考量：頻繁的DOM操作可能導(dǎo)致頁(yè)面重繪和回流，影響性能。
異步處理：DOM操作往往與事件監(jiān)聽器或AJAX請(qǐng)求結(jié)合，需要理解異步編程。

實(shí)戰(zhàn)應(yīng)用

場(chǎng)景：動(dòng)態(tài)加載內(nèi)容

假設(shè)我們要在用戶滾動(dòng)頁(yè)面時(shí)動(dòng)態(tài)加載更多數(shù)據(jù)。

window.addEventListener('scroll', function() {
  if (window.scrollY + window.innerHeight >= document.body.scrollHeight) {
    loadMoreData();
  }
});

function loadMoreData() {
  fetch('/api/data')
    .then(response => response.json())
    .then(data => {
      data.forEach(item => {
        const newNode = document.createElement('div');
        newNode.textContent = item.title;
        document.getElementById('content').appendChild(newNode);
      });
    });
}

優(yōu)化與改進(jìn)

性能瓶頸分析

減少重繪和回流：批量操作DOM，利用文檔片段DocumentFragment。
緩存查詢結(jié)果：避免重復(fù)使用getElementById或querySelector。

代碼示例

const fragment = document.createDocumentFragment();
data.forEach(item => {
  const newNode = document.createElement('div');
  newNode.textContent = item.title;
  fragment.appendChild(newNode);
});
document.getElementById('content').appendChild(fragment);

常見問題

如何高效選擇元素？

使用ID選擇器最快，其次是類選擇器，避免使用過于復(fù)雜的選擇器鏈。

如何避免DOM操作引起的性能下降？

使用requestAnimationFrame進(jìn)行動(dòng)畫和DOM更新。
在隱藏元素中進(jìn)行DOM操作，完成后顯示元素。

總結(jié)與展望

DOM作為JavaScript與HTML文檔交互的橋梁，其重要性不言而喻。掌握DOM，意味著能夠靈活地控制網(wǎng)頁(yè)的表現(xiàn)，提升用戶體驗(yàn)。隨著Web組件、Shadow DOM等新技術(shù)的出現(xiàn)，DOM的未來充滿無限可能，期待你在前端領(lǐng)域施展更多的魔法，創(chuàng)造更多精彩的應(yīng)用。

在線咨詢

上一篇：神一樣的操作,真的牛逼了!Android Jetpack Compose 最全上手指南
下一篇：默認(rèn)的checkbox太丑？教你如何寫出一個(gè)漂亮的樣式

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

javascript核心之DOM操作

基本概念

節(jié)點(diǎn)類型

節(jié)點(diǎn)關(guān)系

節(jié)點(diǎn)操作

言

技術(shù)概述

定義DOM

核心特性與優(yōu)勢(shì)

代碼示例

技術(shù)細(xì)節(jié)

DOM結(jié)構(gòu)解析

難點(diǎn)剖析

實(shí)戰(zhàn)應(yīng)用

場(chǎng)景：動(dòng)態(tài)加載內(nèi)容

優(yōu)化與改進(jìn)

性能瓶頸分析

代碼示例

常見問題

如何高效選擇元素？

如何避免DOM操作引起的性能下降？

總結(jié)與展望

您的項(xiàng)目需求