JavaScript 中透過 getAttribute() 與 setAttribute() 去取得與設定 attr 和直接透過 Dom 物件的節點取得與設定的差別

在 JavaScript 中，當想從 DOM 元素取得屬性時，有兩種常見的方法可以進行：使用 getAttribute() 方法和直接存取 DOM 元素的屬性。這兩者在功能上有一些關鍵的差異：

getAttribute() 方法：

• getAttribute() 是一個標準的 DOM 方法，用於從指定的元素中檢索特定屬性的值。
• 它回傳的是 HTML 標籤上設定的確切值，即 HTML 原始碼中該屬性的原始值。
• 如果屬性不存在，它將回傳 null。

例如：

<input type="text" value="Hello">

const inputElement = document.querySelector('input');
console.log(inputElement.getAttribute('value')); // 輸出: "Hello"

直接存取 DOM 元素的屬性：

• 直接存取 DOM 元素的屬性意味著您在 JavaScript 物件上取得屬性。
• 這通常回傳元素當前的狀態，而不一定是 HTML 原始碼中設定的原始值。例如，對於表單元素的 value 屬性，這會回傳使用者輸入的當前值。
• 如果屬性不存在於元素上，通常會回傳 undefined 或一個預設值，而不是 null。

const inputElement = document.querySelector('input');
console.log(inputElement.value); // 輸出可能是 "Hello"，或如果用戶更改了輸入，則是那個新值

主要區別

• getAttribute() 更適合用於取得 HTML 標籤中設定的靜態或初始值。
• 直接存取屬性更適合用於取得和操作元素的動態狀態，如用戶互動產生的當前值。

當想設定或修改 DOM 元素的屬性時，可以使用 setAttribute() 方法或是直接給予屬性值。這兩者在功能上也存在一些重要的差異：

setAttribute() 方法：

• setAttribute() 是一個標準的 DOM 方法，用於將值指定給元素的一個屬性。
• 它會改變 HTML 標籤上的屬性值，並反映在元素的 HTML 表示中。這對於設定自定義屬性或更新那些不直接映射到 DOM 元素屬性的 HTML 屬性（如 class 轉為 className）很有用。
• 使用這個方法設定的屬性可以透過 getAttribute() 正確地被檢索。

範例：

<div id="example"></div>

const divElement = document.getElementById('example');
divElement.setAttribute('data-custom', '123');
console.log(divElement.getAttribute('data-custom')); // 輸出: "123"

直接設定 DOM 元素的屬性：

• 直接設定屬性通常指的是修改元素對象的屬性值。這個方法直接影響元素的行為和狀態，而不一定會改變元素的 HTML 標籤表示。
• 對於那些內建的屬性，如 id、style 或表單元素的 value，這種方式可以直接影響元素的動態行為。
• 這種方法不適用於所有 HTML 屬性，因為有些 HTML 屬性並無對應的 DOM 屬性。

範例：

<input type="text" value="Old Value">

const inputElement = document.querySelector('input');
inputElement.value = 'New Value'; // 直接改變 input 的當前輸入值
console.log(inputElement.value); // 輸出: "New Value"

主要區別

• setAttribute() 更適合於當您需要在 HTML 標籤上反映屬性更改，或當屬性名稱在 DOM 物件屬性中有所不同時使用。
• 直接設定屬性則是快速且直接影響元素狀態的方式，特別是對於那些有直接映射到 DOM 物件的屬性（如 value、innerHTML 等）。

了解之後就可以根據要互動的屬性類型和預期的效果，選擇適合的方法來操作 DOM 元素的屬性。