解析 property 与 attribute 的差异

2024-02-12 04:24:42

引言

作為網頁開發者，操縱文件物件模型 (Document Object Model，簡稱「物件模型 」) 元素是日常工作中至關重要的部分。物件模型是由 HTML 元素和 CSS 樣式的巢狀結構樹，用於表示網頁的內容和結構。在與物件模型進行互動時，開發者會經常遇到屬性 (Attribute) 與屬性 (Property) 這些術語。

儘管名稱相似，屬性與屬性卻有本質上微妙的差異。本文將探討這兩種概念之間的差異，並提供具體的實例以進一步闡明它們在網頁開發中的應用。

屬性

屬性可以被視為物件模型的一個特定特徵或屬性，例如 HTML 元素的 id、class、title，或 CSS 樣式的 color、font-size 等。屬性被用於元件的元數據和外觀，通常在 HTML 標籤內宣告。

舉例而言，下列 HTML 標籤定義了一個具有特定背景色的段落。

<p id="my-paragraph" style="background-color: red">Hello, World！</p>

在上面的實例中，id、style 即被視為屬性。

屬性通常是宣告性的，這表示它們只會提供有關元件的資訊，而不會實際影響其行。例如，title 屬性用於指定元件的工具提示，但不會改變元件在網頁上顯示的方式。

屬性

與屬性形成互補，屬性代表物件模型中的實際動態值。它們不僅僅是性的，還能用於操縱和改變元件的行。

屬性可以透過物件模型的屬性介面來存取。舉例而言，若要存取元件的 HTML 內容，可以使用屬性介面如下：

const elementContent = document.getElementById("my-paragraph").textContent;

同樣，可以使用屬性介面來改變屬性的值，如下：

document.getElementById("my-paragraph").style.color = "blue";

在上面的實例中，textContent 與 style 即被視為屬性。

屬性允許開發者與物件模型進行動態互動，讓他們能夠在網頁載入後變更其結構和外觀。

屬性與屬性的關鍵差異

下表總結了屬性與屬性的關鍵差異：

	屬性	屬性
定義	描述物件模型的特徵或屬性	物件模型的動態值
宣告	通常在 HTML 標籤內宣告	可以透過物件模型的屬性介面存取
功能	僅提供描述性資訊	可以用於操縱和改變物件模型的行