getAttributeSetAttribute

Hi,我是POPEYE，今天要來談談 getAttribute 與 setAttribute 。

getAttribute 與 setAttribute 是兩個我比較容易混淆的 JS 方法，所以我花了一點工夫來研究一下這兩個方法如何使用。

首先要了解這兩種方法是存取與操作 HTML 標籤屬性的方法，都必須要透過選取到某個 HTML DOM 節點來操作，所以寫法上一定是這樣子：

element.getAttribute('屬性名稱');
element.setAttribute('屬性名稱','屬性值');
//屬性名稱為 id 、 class 、 href、 data-** ……等等

getAttribute

getAttribute 用來取得 HTML 標籤的屬性值，如果指定的屬性不存在，則會回傳 null 或 “”。

<h2 class="title" id="quiet" data-band="Mayday" name="好好">
    最安靜的時刻，回憶總是最喧囂
</h2>

//JavaScript
const quiet = document.querySelector('.title');

console.log(quiet.getAttribute('class'));
// "title"
console.log(quiet.getAttribute('id'));
//"quiet"
console.log(quiet.getAttribute('data-band'));
//"Mayday"
console.log(quiet.getAttribute('name'));
//"好好"

所以我們可以把 HTML 節點的屬性值取出，拿來組字串之後，再塞回本來的節點去。

<h2 class="title" id="quiet" data-band="Mayday" name="好好">
    最安靜的時刻，回憶總是最喧囂
</h2>

//JavaScript
const quiet = document.querySelector('.title');

let str =`我最喜歡的歌詞是《${quiet.getAttribute('data-band')}》唱的
《${quiet.getAttribute('data-song')}》，
裡面這一句「${quiet.textContent}」`;
quiet.textContent = str;

console.log(quiet.textContent);
//"我最喜歡的歌詞是《Mayday》唱的《null》，裡面這一句「最安靜的時刻，回憶總是最喧囂」"

本來 <h2> 標籤中 「最安靜的時刻，回憶總是最喧囂」 ，被改成 「我最喜歡的歌詞是《Mayday》唱的《null》，裡面這一句「最安靜的時刻，回憶總是最喧囂」」囉！！！

setAttribute

setAttribute 的功用在於修改 HTML 節的的屬性。

element.setAttribute('屬性名稱','屬性值');
//屬性名稱為 id 、 class 、 href、 data-** ……等等

不囉嗦！來看一下範例：

<h2 class="title2" data-song="好好" data-band="Mayday">
    最喧囂的時刻，寂寞包圍著孤島
</h2>

.blue {
  color: blue;
}

//JavaScript
const noise = document.querySelector('.title2');

noise.setAttribute("data-song","瘋狂世界");
noise.setAttribute('class','blue');
//字的顏色也變成藍色了

console.log(noise.getAttribute('data-song'));
//瘋狂世界"
console.log(noise.getAttribute('class'));
//"blue"

• CODEPEN範例

getAttribute 與 setAttribute 的進階使用

除了用來操作屬性之外，在做事件監聽的時候，也可以利用 getAttribute 來做一些判斷：

<ul class="item">
  <li class ="item1">item1</li>
  <li class ="item2">item2</li>
  <li class ="item3">item3</li>
  <li class ="item4">item4</li>
  <li class ="item5">item5</li>
</ul>

.item{
  font-size: 20px; 
}

.item1, .item2, .item3, .item4, .item5{
  margin-bottom: 20px;
}
.blue{
  color : blue;
  margin-bottom: 50px;
}

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

item.addEventListener('click',function(e){
  if(e.target.getAttribute('class') === 'item3'){
    e.target.setAttribute('class','blue')
  }
})

在這裡利用 e.target.getAttribute('class') 來判斷如果點擊到的 class 屬性如果是 item3 ， 則把 e.target 的 class 屬性變成藍色的。

MDN 有把 getAttribute 與 setAttribute 這兩個節點方法可以操作的 HTML 屬性列出來，有需要時可以參考一下：

• MDN HTML attribute reference