如何使用getElementByClassName定位具有同一類的所有元素，而不僅僅是該類的第一個元素

我對 JS 很陌生，而且真的不太了解它。我邊走邊學。

我正在嘗試向按鈕添加一些新的 div，以使它們看起來像我網站上的其他按鈕，因為我無法編輯插件 HTML。我已經成功地通過一個按鈕做到了這一點。但它不適用于其他按鈕。我試圖閱讀它，它看起來像因為我使用 getElementsByClassName 它只選擇第一個按鈕而不是其他按鈕。

所以我不知道這是否正確，如果不是，請糾正我。但我想我需要設定一個節點回圈？這樣 getElementsByClassName 就不會只選擇頁面上的第一個節點。但是我不知道如何設定節點回圈，閱讀它只會讓我更加困惑。

有人可以幫助并可能向我解釋這一點，以便我理解它以供將來參考。

謝謝

這是我目前擁有的代碼，我只是不知道如何使它針對該類的所有元素，而不僅僅是該類的第一個元素。

var btnSwirls = document.createElement('div');
    btnSwirls.id = 'dbtb-button-swirl-wrap';
    btnSwirls.className = 'dbtb-button-swirl-wrap';
    document.getElementsByClassName("dbtb-add-btn-assets")[0].appendChild(btnSwirls);

uj5u.com熱心網友回復：

const btnSwirls = document.createElement('div');
btnSwirls.id = 'dbtb-button-swirl-wrap';
btnSwirls.className = 'dbtb-button-swirl-wrap';

document.getElementsByClassName("dbtb-add-btn-assets").forEach(element => {
  element.appendChild(btnSwirls);
})

了解更多資訊forEach()：https ://www.youtube.com/watch?v=SXb5LN_opbA

了解有關箭頭功能的更多資訊：https ://www.youtube.com/watch?v=h33Srr5J9nY

了解更多關于var、、let和const：https ://www.youtube.com/watch?v=9WIJQDvt4Us

uj5u.com熱心網友回復：

首先，您正在處理元素的“陣列”。為此，您需要一個回圈來遍歷陣列。

您不應該使用此 document.getElementsByClassName("dbtb-add-btn-assets")[0] <-- 因為這部分 [0] 表示您正在定位陣列中的第一個元素，因此為 0，因為所有陣列從索引 0 開始；即 [0, 1, 2, 3, ...] 索引

因此，對于遍歷陣列，您可以使用 (for 回圈) 或 (for of) 回圈

for loop:
let dbtb_add_btn_assets = document.getElementsByClassName("dbtb-add-btn-assets"); //you are assigning a variable to the array;

for(let i = 0; i < dbtb_add_btn_assets.length; i  ) {
  var btnSwirls = document.createElement('div');
  btnSwirls.id = 'dbtb-button-swirl-wrap';
  btnSwirls.className = 'dbtb-button-swirl-wrap'; //create btnswirls per iteration of the loop
 
  dbtb_add_btn_assets[i].appendChild(btnSwirls); 
}

//i是回圈的當前索引，for回圈的i 部分會在for回圈內執行陳述句時自動加1，當i不小于dbtb_add_btn_assets長度時結束。長度表示陣列中元素的數量。

for of:
let dbtb_add_btn_assets = document.querySelectorAll('.dbtb-add-btn-assets'); //personally I'd use querySelectorAll instead of getElementsByCLassName just add . for classes # for ids

for(let dbtb of dbtb_add_btn_assets) { //name whatever variable you want to use
 var btnSwirls = document.createElement('div');
  btnSwirls.id = 'dbtb-button-swirl-wrap';
  btnSwirls.className = 'dbtb-button-swirl-wrap'; //create btnswirls per dbtb

  dbtb.appendChild(btnSwirls);
}

uj5u.com熱心網友回復：

您需要遍歷所有元素。有多種方法可以做到這一點。以下是使用示例應用程式的兩種方法，該示例應用程式每兩秒切換一個類（添加/洗掉一個類）。

#1 - 使用querySelectorAll()和forEach()

您可以使用querySelectorAll()獲取NodeList與給定CSS 選擇器 .someClass匹配的 HTML 元素。

window.addEventListener("DOMContentLoaded", e => {
  const allElements = document.querySelectorAll(".someClass");
  // add/ remove class every 2 seconds 
  setInterval(() => {
    // loop over all elements and add/ remove a class
    allElements.forEach(element => {
      element.classList.toggle("anotherClass");
    });
  }, 2000)
})

.someClass {
  padding: 20;
  background-color: black;
  color: white;
  margin: 5px;
}

.anotherClass {
  border: 2px solid red;
}

<div class="someClass">div 1</div>
<div class="someClass">div 2</div>
<div class="someClass">div 3</div>
<div class="someClass">div 4</div>

#2 - 使用getElementsByClassName()和for .. of ...回圈

或者，您可以使用getElementsByClassName()which 回傳一個HTMLCollection. 然后，您可以使用for ... of ...回圈遍歷集合中的所有元素。

window.addEventListener("DOMContentLoaded", e => {
  const allElements = document.getElementsByClassName("someClass");
  // loop 
  setInterval(() => {
    // loop over all elements and add/ remove a class
    for (const element of allElements) {
      element.classList.toggle("anotherClass");
    }
  }, 2000)
})

.someClass {
  padding: 20;
  background-color: black;
  color: white;
  margin: 5px;
}

.anotherClass {
  border: 2px solid red;
}

<div class="someClass">div 1</div>
<div class="someClass">div 2</div>
<div class="someClass">div 3</div>
<div class="someClass">div 4</div>

請注意：您應該DOMContentLoaded event等到 HTML 檔案準備好后再嘗試訪問 DOM。

標籤：javascript 节点.js 班级 元素 通过类名获取元素

上一篇：如何計算第二個位置具有相同值的兩個陣列的差異

下一篇：各公司用戶畫像技術案例分享