How to Correctly Iterate Through Getelementsbyclassname

How to correctly iterate through getElementsByClassName

According to MDN, the way to retrieve an item from a NodeList is:

nodeItem = nodeList.item(index)

Thus:

var slides = document.getElementsByClassName("slide");
for (var i = 0; i < slides.length; i++) {
   Distribute(slides.item(i));
}

I haven't tried this myself (the normal for loop has always worked for me), but give it a shot.

Iterating over result of getElementsByClassName using Array.forEach

No, it's not an array. As specified in DOM4, it's an HTMLCollection (in modern browsers, at least. Older browsers returned a NodeList).

In all modern browsers (pretty much anything other IE <= 8), you can call Array's forEach method, passing it the list of elements (be it HTMLCollection or NodeList) as the this value:

var els = document.getElementsByClassName("myclass");

Array.prototype.forEach.call(els, function(el) {
    // Do stuff here
    console.log(el.tagName);
});

// Or
[].forEach.call(els, function (el) {...});

If you're in the happy position of being able to use ES6 (i.e. you can safely ignore Internet Explorer or you're using an ES5 transpiler), you can use Array.from:

Array.from(els).forEach((el) => {
    // Do stuff here
    console.log(el.tagName);
});

Looping through child elements of getElementsByClassName nodelist. Can't get it to work properly

You can accomplish this with a for loop. Use querySelector to get the child element.

window.onload = function() {
  var siteAvatars = document.getElementsByClassName("siteavatar");
  var numSiteAvatars = siteAvatars.length;
  for (var i = 0; i < numSiteAvatars; i++) {
    var sa = siteAvatars[i];
    var a = sa.querySelector(".avatar");
    console.log(a);
  }
}

<div class="siteavatar">
  <img src="" class="avatar" />
</div>
<div class="siteavatar">
  <img src="" class="avatar" />
</div>

How should I iterate through the results of multiple getElementsByClassName() calls in the same loop?

The getElementsByClassName method returns an HTMLCollection rather than an array. It's an array-like object, but you can't use all array methods on it.

Turn the collections into arrays using the slice method, then you can concatenate them:

var a3 = Array.prototype.slice.call(a1).concat(Array.prototype.slice.call(a2));

Note: This requires IE9 or later.

JavaScript get elements by class on submit iteration

You need to get the form data of one form, not the collection of forms. To make it work I would suggest using a for..of loop, with let to get block scope:

for (let lform of like_form) {
    lform.onsubmit = function(e) {
        e.preventDefault();
        console.log("clicked form");
        var form = new FormData(lform); // <---

A second issue is document.getElementById("stars"). That element does not exist in your HTML. Moreover, if this is supposed to be an element that relates to the form (one for each form), then note that id attributes should be unique in HTML, so you should select such elements differently.

getElementsByTagName from a collection

The problem is in getElementsByTagName which returns a live HTMLCollection of elements, Your matches variable contains an array whereas must be an element to apply to him some properties href, rel..., So he needs to be an element not elments, To solve the problem just access to the first element not all of them, or use querySelector which return the first matched element if exist.

const noLinks  = document.getElementsByClassName('myclass');
for (let noLink of noLinks) {
                     //v-- access to noLink not noLinks
  const matches = noLink.getElementsByTagName('a')[0]; //<-- or noLinks.querySelector('a')
  matches.setAttribute('role', 'link');
  matches.setAttribute('aria-disabled', 'true');
  matches.removeAttribute('href');
  matches.removeAttribute('rel');
};

How to Correctly Iterate Through Getelementsbyclassname