JavaScript 中的 DOM

文件物件模型 (DOM)

DOM API 是一個用於網頁文件的程式設計介面。它表示頁面，以便程式可以更改文件的結構、樣式和內容。

DOM 將文件表示為物件的樹；每個物件代表頁面的一部分。

JavaScript 中的 DOM 操作

在 JavaScript 實作 DOM 時，我們可以考慮以下一些基本知識；

1. 查詢選擇器 (querySelector)：這是一個貪婪選擇器。它選擇第一個指定的元素。

例如：

querySelector("h1")

這將定位整個 HTML 文件中的第一個 h1 元素

2. 查詢選擇器全選 (querySelectorAll)：這將定位 HTML 文件中的所有 h3 元素。

例如：

querySelectorAll("h3")

這些將在控制台中以節點列表的形式輸出。

注意：節點列表看起來像數組，但兩者有很大區別

節點清單是瀏覽器 API，而陣列是 JavaScript API。 簡而言之，節點列表不屬於 JavaScript，因此不能在其上實現循環。

此外，getElementbyTagName() 和 querySelectorAll 不是 JavaScript 方法，而是瀏覽器 API。

innerHTML 和 innerText

建議使用 innerHTML 而非 innerText，因為這樣可以限制別人修改你的劇本。

定位元素的方法

• 我們有很多方法可以定位或選擇要在文件中操作的元素。

這些方法包括：

透過 ID 透過名稱 透過類別 透過標籤 透過標籤名稱

注意：我們絕不使用 ID 和 類別 從瀏覽器中選擇任何內容。

因此，我們使用 querySelector。

JavaScript 中的關鍵概念。

a) 提升 (Hoisting)：下面用一個例子來說明這一點，

例如：

1. console.log(a);
2. var a;
3. a = 5;
4. console.log(a);

在控制台中執行時，第 1 行的 a 將輸出為 undefined。

這意味著即使我們沒有在開始時明確聲明 a，它也在瀏覽器中被「神奇地」聲明了，這就是所謂的提升。

通常，對於第 4 行，輸出將為 5，因為 a 已被明確初始化。

b) 閉包 (Closure)：每次建立函數時都會建立一個閉包。

c) 全域執行上下文 (Global Execution Context)：全域執行上下文是 JavaScript 程式碼在不在任何函數內部時運行的環境。

d) 呼叫堆疊 (Call Stack)：當腳本呼叫函數時，解釋器會將其加入堆疊中，然後開始執行函數。

我的 GitHub 鏈接 LinkedIn

以上是JavaScript 中的 DOM的詳細內容。更多資訊請關注PHP中文網其他相關文章！