[快速入门前端 61] JavaScript：DOM (3) 取得元素的属性值

取得元素属性值

在前篇文章中我们提到了如何抓取 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取得的阵列阵列资料取得每一个 inputdocument.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">

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

上一篇：[快速入门前端 60] JavaScript：DOM (2) 如何获取元素节点
下一篇：[快速入门前端 62] JavaScript：DOM (4) 修改元素的属性值
系列文章列表：[快速入门前端] 系列文章索引列表