2

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?

Peter Seliger
  • 11,747
  • 3
  • 28
  • 37
Chris J. Zähller
  • 123
  • 11
  • 5
    Don't use `getElementsBy*` methods, `document.querySelectorAll('.myClass a')` does the trick. – Teemu Nov 17 '21 at 18:28

3 Answers3

2

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');
};
XMehdi01
  • 5,538
  • 2
  • 10
  • 34
  • I tested both versions of this code. They return the error `Uncaught TypeError: noLinks.querySelector is not a function`, probably because `getElementsByClassName` also returns a collection. This is similar to the errors I was already encountering. – Chris J. Zähller Nov 17 '21 at 20:20
  • 1
    I copied the code snippet And didn't notice about that your accessing noLinks which needs to be noLink without (s)! – XMehdi01 Nov 17 '21 at 20:32
  • The corrected code works. You still have typo in your second comment. – Chris J. Zähller Nov 17 '21 at 21:10
1

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');
  });
Peter Seliger
  • 11,747
  • 3
  • 28
  • 37
0

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');
});
Chris J. Zähller
  • 123
  • 11