javascriptdomgetelementsbyclassnamegetelementsbytagnameselectors-api

getElementsByTagName from a collection

EDIT: the document.querySelectorAll solution works, and is easier to read and understand. My own solution (in the answers, below) also works, and is slightly faster. The getElementsByClassName + getElementsByClassName solution is the fastest, so I've marked it as the accepted solution.

ORIGINAL POST: I need to find child elements of any element with a particular class, e.g.,

<li class="myclass"><a>This is the link I need to find</a></li>

so that I can set and remove some attributes from the anchor.

I can easily find all of the list items with getElementsByClassName, but getElementsByTagName fails because it only works on a single declared element (not on a collection). Therefore, this does not work:

const noLinks  = document.getElementsByClassName('myclass');
for (let noLink of noLinks) {
  const matches = noLinks.getElementsByTagName('a');
  matches.setAttribute('role', 'link');
  matches.setAttribute('aria-disabled', 'true');
  matches.removeAttribute('href');
  matches.removeAttribute('rel');
};

How can I iterate through the returned elements and get the tags inside of them?

Solution

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