CODEWITHSUNDEEP
javascriptdomgetelementsbyclassnamegetelementsbytagnameselectors-api
Chris J. Zähller
Chris J. Zähller

Reputation: 133

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?

Upvotes: 2

Views: 563

Answers (3)

XMehdi01
XMehdi01

Reputation: 1

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

Upvotes: 2

Chris J. Z&#228;hller
Chris J. Z&#228;hller

Reputation: 133

The following solution works. I'll probably test the other 2 offered solutions & upvote them if they work, but I'm posting this answer so others can see different ways of solving this.

// Modify the attributes on the <a> inside the <li> with class "nolink".
const noLinks  = document.getElementsByClassName('nolink');
Array.prototype.forEach.call(noLinks, function(noLink) {
  const matches = noLink.getElementsByTagName('a')[0];
  matches.setAttribute('role', 'link');
  matches.setAttribute('aria-disabled', 'true');
  matches.removeAttribute('href');
  matches.removeAttribute('rel');
});

Upvotes: 0

Peter Seliger
Peter Seliger

Reputation: 13377

The OP's code could be switched to something more expressive (based on e.g. querySelectorAll) like ...

document
  .querySelectorAll('.myclass a')
  .forEach(elmNode => {
    elmNode.setAttribute('role', 'link');
    elmNode.setAttribute('aria-disabled', 'true');
    elmNode.removeAttribute('href');
    elmNode.removeAttribute('rel');
  });

Upvotes: 1

Related Questions