JavaScript 概述

2023-03-20 15:48 更新

DOM

DOM 是 JavaScript 操作網(wǎng)頁(yè)的接口，全稱為“文檔對(duì)象模型”（Document Object Model）。它的作用是將網(wǎng)頁(yè)轉(zhuǎn)為一個(gè) JavaScript 對(duì)象，從而可以用腳本進(jìn)行各種操作（比如增刪內(nèi)容）。

瀏覽器會(huì)根據(jù) DOM 模型，將結(jié)構(gòu)化文檔（比如 HTML 和 XML）解析成一系列的節(jié)點(diǎn)，再由這些節(jié)點(diǎn)組成一個(gè)樹狀結(jié)構(gòu)（DOM Tree）。所有的節(jié)點(diǎn)和最終的樹狀結(jié)構(gòu)，都有規(guī)范的對(duì)外接口。

DOM 只是一個(gè)接口規(guī)范，可以用各種語(yǔ)言實(shí)現(xiàn)。所以嚴(yán)格地說(shuō)，DOM 不是 JavaScript 語(yǔ)法的一部分，但是 DOM 操作是 JavaScript 最常見的任務(wù)，離開了 DOM，JavaScript 就無(wú)法控制網(wǎng)頁(yè)。另一方面，JavaScript 也是最常用于 DOM 操作的語(yǔ)言。后面介紹的就是 JavaScript 對(duì) DOM 標(biāo)準(zhǔn)的實(shí)現(xiàn)和用法。

節(jié)點(diǎn)

DOM 的最小組成單位叫做節(jié)點(diǎn)（node）。文檔的樹形結(jié)構(gòu)（DOM 樹），就是由各種不同類型的節(jié)點(diǎn)組成。每個(gè)節(jié)點(diǎn)可以看作是文檔樹的一片葉子。

節(jié)點(diǎn)的類型有七種。

  • Document：整個(gè)文檔樹的頂層節(jié)點(diǎn)
  • DocumentType：doctype標(biāo)簽（比如<!DOCTYPE html>）
  • Element：網(wǎng)頁(yè)的各種HTML標(biāo)簽（比如<body>、<a>等）
  • Attr：網(wǎng)頁(yè)元素的屬性（比如class="right"）
  • Text：標(biāo)簽之間或標(biāo)簽包含的文本
  • Comment：注釋
  • DocumentFragment：文檔的片段

瀏覽器提供一個(gè)原生的節(jié)點(diǎn)對(duì)象Node，上面這七種節(jié)點(diǎn)都繼承了Node，因此具有一些共同的屬性和方法。

節(jié)點(diǎn)樹

一個(gè)文檔的所有節(jié)點(diǎn)，按照所在的層級(jí)，可以抽象成一種樹狀結(jié)構(gòu)。這種樹狀結(jié)構(gòu)就是 DOM 樹。它有一個(gè)頂層節(jié)點(diǎn)，下一層都是頂層節(jié)點(diǎn)的子節(jié)點(diǎn)，然后子節(jié)點(diǎn)又有自己的子節(jié)點(diǎn)，就這樣層層衍生出一個(gè)金字塔結(jié)構(gòu)，又像一棵樹。

瀏覽器原生提供document節(jié)點(diǎn)，代表整個(gè)文檔。

document
// 整個(gè)文檔樹

文檔的第一層有兩個(gè)節(jié)點(diǎn)，第一個(gè)是文檔類型節(jié)點(diǎn)（<!doctype html>），第二個(gè)是 HTML 網(wǎng)頁(yè)的頂層容器標(biāo)簽<html>。后者構(gòu)成了樹結(jié)構(gòu)的根節(jié)點(diǎn)（root node），其他 HTML 標(biāo)簽節(jié)點(diǎn)都是它的下級(jí)節(jié)點(diǎn)。

除了根節(jié)點(diǎn)，其他節(jié)點(diǎn)都有三種層級(jí)關(guān)系。

  • 父節(jié)點(diǎn)關(guān)系（parentNode）：直接的那個(gè)上級(jí)節(jié)點(diǎn)
  • 子節(jié)點(diǎn)關(guān)系（childNodes）：直接的下級(jí)節(jié)點(diǎn)
  • 同級(jí)節(jié)點(diǎn)關(guān)系（sibling）：擁有同一個(gè)父節(jié)點(diǎn)的節(jié)點(diǎn)

DOM 提供操作接口，用來(lái)獲取這三種關(guān)系的節(jié)點(diǎn)。比如，子節(jié)點(diǎn)接口包括firstChild（第一個(gè)子節(jié)點(diǎn)）和lastChild（最后一個(gè)子節(jié)點(diǎn)）等屬性，同級(jí)節(jié)點(diǎn)接口包括nextSibling（緊鄰在后的那個(gè)同級(jí)節(jié)點(diǎn)）和previousSibling（緊鄰在前的那個(gè)同級(jí)節(jié)點(diǎn)）屬性。


以上內(nèi)容是否對(duì)您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)