How do I target all elements with the same class with getElementByClassName instead of just the first element with that class

Question

I'm very new to JS, and really don't understand a lot of it. Trying to learn as I go.

I'm trying to add some new divs to buttons to style them to look like the rest of the buttons on my site as I cant edit the plugins HTML. I've managed to successfully do this for one button. But it won't work for the other buttons. I've tried to read into it and it looks like because I am using getElementsByClassName its only selecting the first button and not the others.

So I dont know if this is right or not and correct me if it ain't. but I think I need to set up a Node loop? so that getElementsByClassName doesn't just select the first node on the page. However I got no Idea how to set up a node loop and reading about it is just confusing me more.

Can someone help and possibly explain this to me so I can make sense of it for future reference.

Thanks

This is the code I currently have, I just don't know how to make it target all elements with that class rather than just the first element with that class.

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);

Answer 1

First of all, you are handling an "array" of elements. For that, you'd need a loop to iterate over the array.

you shouldn't be using this document.getElementsByClassName("dbtb-add-btn-assets")[0] <-- because this part [0] denotes that you are targeting the first element in the array, hence 0, since all arrays start with the index 0; i.e. [0, 1, 2, 3, ...] indices

so for iterating over an array you can either use a (for loop) or a (for of) loop

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); 
}

the i is the current index of the loop, the i++ part of the for loop will automatically add 1 to itself upon executing the statement inside the for loop and ends when i is not less than the dbtb_add_btn_assets length. Length meaning the number of elements inside the array.

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);
}

the for of loop takes the contents from a specified array and put them into a temporary variable, successfully giving access to the individual content/object, and then automatically iterates over each one as you manipulate it however you like inside the loop.