Table of Contents

• HTML的Attributes跟DOM的properties
  • Element.attributes
  • hasAttributes()跟hasAttribute()
  • setAttribute()
  • getAttribute()
  • removeAttribute()
• dataset
• References

HTML的Attributes跟DOM的properties

當HTML的標籤中有多個預設的attribute，而DOM也會有相對應的properties可以使用，但是要注意的是，有時attribute跟properties的值有時候不一定是對應的，例如input中預設value``attribute，但在使用者輸入或者重新覆值之後，就會把原本設定的value內容覆蓋過去。

當想實際在DOM中修改最原始的元素attribute時，需要方法來更改。

Element.attributes

使用這個方法時，會回傳一組NamedNodeMap物件，是屬性節點的動態集合。

<div about="attribute"></div>

const div = document.querySelector('div');
console.log(div.attributes)

hasAttributes()跟hasAttribute()

這兩個方法看起來很像，但實際上意思不太一樣。
hasAttributes()是問指定的元素有沒有任何自行寫上去的attribute，並回傳一個Boolean，即使是自己寫的自創attribute也會是true。

<!-- 使用自創的標籤 -->
<div about="attribute"></div>

const div = document.querySelector('div');
console.log(div.hasAttributes());//true

hasAttribute()則需要在括號中加上attribute，判斷指定的元素中是否有該attribute。

<div about="attribute"></div>

const div = document.querySelector('div');
console.log(div.hasAttribute('about'));//true

setAttribute()

setAttribute()是設定指定元素attribute的方法，假如attribute在元素中不存在，就會新增attribute跟值，如果attribute已經在元素中，就會更新值。

const div = document.querySelector('div');

//新增`attribute`跟值
div.setAttribute('id',1);
console.log(div.hasAttribute('id'))//true

//更改`attribute`跟值
div.setAttribute('id',2);
console.log(div.id)//2

getAttribute()

這個方法可以回傳指定元素attribute的值，如果attribute不存在，就會回傳null。

<div></div>

const div = document.querySelector('div');
console.log(div.getAttribute('about'))//null

div.setAttribute('id',2);
console.log(div.getAttribute('id'));//2

removeAttribute()

移除指定的元素attribute，如果指定的attribute不存在，會回傳一個undefined。

const div = document.querySelector('div');
console.log(div.removeAttribute('about'));//undefined
div.setAttribute('id',2);
console.log(div.removeAttribute('id'));//undefined
console.log(div.getAttribute('id'));//null

dataset

當想要使用自定義的attribute，可以使用dataset來新增，當我們需要使用這個attribute時，名稱前面需要在前綴加上data-。

比方說我在<div>內加上自己設定的attribute：

<div data-id='1'></div>

當我想存取這個attribute時，需要使用到dataset，後面再加上自訂的名字：

const div = document.querySelector('div');
console.log(div.dataset.id);//1

References

HTML data-* Attributes
Attributes and properties

• MDN

1. Element: attributes property
2. Element: hasAttributes() method
3. Element: hasAttribute() method
4. Element: getAttribute() method
5. Element: setAttribute() method
6. Element: removeAttribute() method