取得元素屬性值

在前篇文章中我們提到了如何抓取 HTML 的 element node，既然我們都可以抓到元素了，下一步就是取得更詳細的資料，也就是該元素的屬性值。
在開發中我們經常會使用 JavaScript 取得特定元素的屬性，例如在判斷單/多選框是否勾選時，需要取得該元素的 checked / selected 屬性，除此之外也能透過 disabled 判斷元素的狀態。

常用屬性

innerHTML、innerText

在前幾篇文章中我們有大致了解過 innerHTML 及 innerText，兩者的差異主要在於前者會抓取 HTML code，而後者只抓文字內容，不過用法都相同，用 元素.innerHTML 和 元素.innerText 就可取得字串。

<div id="block" name="title" class="red bold"> 
    <a>this is title</a>
    <div>another div</div>
</div>

checked

在單/多選框中，checked 是判斷勾選狀態的重要屬性，我們可以透過 input框.checked 取得 Boolean 值判斷開選項是否打勾，也能夠透過 元素:checked 直接取得該選框組中打勾的元素。

範例 (多選框)：

<!-- HTML 結構 -->
<input class="check" id="check1" type="checkbox" value="11" name="checkbox">
<input class="check" id="check2" type="checkbox" value="22" name="checkbox">

基於上方的程式結構，以下幾種方法都可以判斷勾選狀態：

• 判斷某選項是否打勾

  // 方法一
  // 單獨抓每個 input，例如 id、獨有的 class 等
  // 適合只需判斷某選項的情境
  document.querySelector('#check1').checked; // 判斷 id="check1" 的選項是否被打勾
  
  // 方法二
  // 利用每組多選框 Name 都相等的特性，先抓到所有的 input 選項 List，再以索引值抓到特定選項
  // 適合需要判斷每個或多個選項的勾選狀態時使用
  // 步驟 1. 取得整組多選框 (下面兩種方法皆可行)
  document.getElementsByName('checkbox'); // 會得到所有 input 的 nodeList 集合
  document.getElementsByClassName('check'); // 會得到所有 input 的 HTML collection
  // 步驟 2. 利用步驟1取得的陣列陣列資料取得每一個 input
  document.getElementsByName('checkbox')[0]; // 第一個 input 框
  document.getElementsByName('checkbox')[1]; // 第二個 input 框
  // 步驟 3. 判斷每一個 input 選框的 checked 屬性值
  document.getElementsByName('checkbox')[0].checked; // 取得 Boolean 值
  document.getElementsByName('checkbox')[1]].checked;
  
  // 結論：
  // 方法一適合只需要判斷「某選項」的情境
  // 方法二通常用於迴圈遍歷每一個選項並判斷
  

• 直接取得所有打勾的選項

  // 這個方法是利用 query selector 的特性，將 checked 組合為一個複合選擇器來直接選取「被打勾的所有項目」
  document.querySelectorAll('input[name="checkbox"]:checked');
  

單選 (radio) 與多選框同理，也可以使用同樣的方法取得勾選狀態，不過在利用 query selector 值獲取打勾選項時基於 radio 一次只能選一個選項的特性，我們可以直接使用 querySelector，而不需要使用 querySelectorAll 來獲取 List。

document.querySelector('input[name="checkbox"]:checked'); 
// 獲取第一個符合條件的元素
// 但因單選框只能單選，可以直接以此方法取得打勾的元素

disabled

disabled 屬性是表單元素中非常常用的屬性，可以用來控制元素禁用與否，當我們需要判斷某元素的 disabled 狀態時，也可以直接用 element.disabled 的方式來取得 Boolean 值。

<input type="button" id="btn1" value="按鈕一">
<input type="button" id="btn2" value="按鈕二" disabled>

<script>
    console.log(document.getElementById('btn1').disabled); // false (元素未禁用)
    console.log(document.getElementById('btn2').disabled); // true (元素為禁用狀態)
</script>

src、value...

除了上述幾個屬性外，在 element node 中幾乎所有的屬性都可以透過 element.屬性名 的方式取得，例如較常用到的 src、和 value，尤其在單/多選框的情境中，value 經常搭配 checked 屬性用來取得被選中選項的值。

<!-- input 搭配 checked -->
<input id="radio1" type="radio" value="1" name="radio" checked> <!-- 預設選取 -->
<input id="radio2" type="radio" value="2" name="radio">
<script>
    // 取得 radio 中打勾選項的值
    console.log(document.querySelector('input[name="radio"]:checked').value); // 1
</script>

<!-- 用 .src 取得 img 元素的圖片位置 -->
<img src="./img1.jpg">
<script>
    console.log(document.querySelector('img').src);
</script>

className、classList

元素中大多數的屬性都可以透過 element.屬性名 取得，除了 class 則例外。因為 class 在 JavaScript 中屬於保留關鍵字，所以我們要取得時必須使用 className 代替。
從 element.className 中回傳的值為字串，若該元素有多個 class 時型態為 class名 class名 class名，較不方便使用，所以衍伸出 classList 的用法，可以直接取得由元素的 class 所構成的陣列。

<div id="block" name="title" class="red bold gray title"></div>

// 取得 class 字串
document.querySelector('#block').className; // 'red bold gray title'
// 取得 class 陣列
document.querySelector('#block').classList; // ['red', 'bold', 'gray', 'title']

getAttribute()

除了 .屬性名 外，還有一個取得值的終極用法，那就是 getAttribute()！
getAttribute 基本上可以獲得任何屬性的值，用法為 getAttribute(屬性名)，括號中填入 HTML code 的屬性名稱即可，也就是說若要取得元素的類別，直接用 getAttribute('class') 就可以得到與 element.className 同樣的結果，而不需要再注意是否為保留字。

<div id="block" name="title" class="red bold gray title"></div>
<img src="./img1.jpg">
<input class="check" id="check1" type="checkbox" value="3" name="checkbox" checked>
<input class="check" id="check2" type="checkbox" value="1" name="checkbox">

// 取得 class
document.querySelector('div').getAttribute('class'); // 'red bold gray title'
// 取得 name
document.querySelector('div').getAttribute('name'); // 'title'
// 取得 id
document.querySelector('div').getAttribute('id'); // 'block'
// 取得 src
document.querySelector('img').getAttribute('src'); // './img1.jpg'
// 取得 checked
document.querySelector('#check1').getAttribute('checked');

上一篇：[快速入門前端 60] JavaScript：DOM (2) 如何獲取元素節點
下一篇：[快速入門前端 62] JavaScript：DOM (4) 修改元素的屬性值
系列文章列表：[快速入門前端] 系列文章索引列表