JavaScript DOM HTML 屬性 (HTML Attributes)

DOM 中的 Properties 和 Attributes 中文都稱作屬性，但差別在哪？

Properties 是 JavaScript DOM 物件上的屬性，不會影響到 HTML 元素；而 Attributes 是 HTML 元素上的屬性，像是 HTML 標籤上的 id 或 class 屬性。

我們將會來介紹怎麼透過 DOM API 操作 HTML 上的元素屬性。

Element.hasAttribute(attrName)

hasAttribute 方法用來檢查 HTML 元素是否有某個屬性。

例子：

<a id="foo" href="http://www.fooish.com/">www.fooish.com</a>

<script>
  // 取得目前頁面上的 foo 元素
  const foo = document.getElementById('foo');

  // 顯示 false
  alert(foo.hasAttribute('xyz'));

  // 顯示 true
  alert(foo.hasAttribute('href'));
</script>

Element.getAttribute(attrName)

getAttribute 方法用來取得 HTML 元素的屬性值 - 一個字串，或返回 null 如果沒有這個屬性。

用法：

<a id="foo" href="http://www.fooish.com/" target="_blank" data-foo>www.fooish.com</a>

<script>
  // 取得目前頁面上的 foo 元素
  const foo = document.getElementById('foo');

  // 顯示 null
  alert(foo.getAttribute('xyz'));

  // 顯示 http://www.fooish.com/
  alert(foo.getAttribute('href'));

  // 顯示 _blank
  alert(foo.getAttribute('target'));

  // 顯示 "" 空字串
  alert(foo.getAttribute('data-foo'));
</script>

Element.setAttribute(attrName, value)

setAttribute 方法用來新增 HTML 元素的屬性，如果屬性已經存在則更新其值。

範例：

<a id="foo" href="http://www.fooish.com/">www.fooish.com</a>

<script>
  // 取得目前頁面上的 foo 元素
  const foo = document.getElementById('foo');

  // 顯示 null
  alert(foo.getAttribute('target'));

  // 將 target 屬性設定為  _blank
  foo.setAttribute('target', '_blank');

  // 顯示 _blank
  alert(foo.getAttribute('target'));
</script>

Element.removeAttribute(attrName)

removeAttribute 方法用來移除 HTML 元素的某個屬性。

例子：

<a id="foo" href="http://www.fooish.com/" data-foo="101">www.fooish.com</a>

<script>
  // 取得目前頁面上的 foo 元素
  const foo = document.getElementById('foo');

  // 顯示 101
  alert(foo.getAttribute('data-foo'));

  // 將 target 屬性設定為  _blank
  foo.removeAttribute('data-foo');

  // 顯示 null
  alert(foo.getAttribute('data-foo'));
</script>

Element.attributes

DOM 元素的 attributes 屬性 (property) 可以取得 HTML 元素上所有的屬性 (attributes)，attributes 會返回一個 key/value pair 的 NamedNodeMap 型態物件。

NamedNodeMap 物件的 key 是一個字串表示屬性名稱，value 則是一個 Attr 物件，Attr 物件上的 name 屬性可以取得屬性名稱，Attr 物件上的 value 屬性可以取得屬性值。

<a id="foo" href="http://www.fooish.com/">www.fooish.com</a>

<script>
  // 取得目前頁面上的 foo 元素
  const foo = document.getElementById('foo');

  // 顯示 href
  alert(foo.attributes['href'].name);

  // 顯示 http://www.fooish.com/
  alert(foo.attributes['href'].value);
</script>

你可以用 for 迴圈遍歷所有的屬性：

<a id="foo" href="http://www.fooish.com/">www.fooish.com</a>

<script>
  const foo = document.getElementById('foo');

  let attr;
  for (let i = 0; i < foo.attributes.length; ++i) {
    attr = foo.attributes[i];
    console.log(attr.name + ': ' + attr.value);
  }
</script>

上面依序會輸出：

id: foo
href: http://www.fooish.com/

HTML Attributes 對應的 DOM Properties

DOM 元素物件上有不同類型的 Properties 直接對應到相關的 HTML Attributes，讓你方便讀寫 HTML 屬性，通常 DOM Properties 和 HTML Attributes 是同樣的名稱。

這邊舉幾個例子：

id

DOM 元素的 id 屬性對應 HTML 上的 id 屬性。

範例：

<div id="container"><span id="foo">101</span></div>

<script>
  const foo = document.getElementById('foo');

  // 顯示 foo
  alert(foo.id);

  // 將 id 改成 bar
  foo.id = 'bar';

  // 顯示 <span id="bar">101</span>
  alert(document.getElementById('container').innerHTML);
</script>

className

className property 對應到 HTML class 屬性，名稱不同是一個特例，因為 class 是 JavaScript 中的保留字 (reserved word)。

範例：

<span id="foo" class="foo bar">101</span>

<script>
  const foo = document.getElementById('foo');

  // 顯示 foo bar
  alert(foo.className);
</script>

href

href 可以用來讀寫 <a> 連結元素的 href 屬性：

<a id="foo">fooish</a>

<script>
  const foo = document.getElementById('foo');

  // 顯示 "" 空字串
  alert(foo.href);

  foo.href = 'http://www.fooish.com/';

  // 顯示 <a id="foo" href="http://www.fooish.com/">fooish</a>
  alert(foo.outerHTML);
</script>