getElementsByTagName from a collection-CodePudding

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?

CodePudding user response：

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) {
  const matches = noLinks.getElementsByTagName('a')[0]; //<-- or noLinks.querySelector('a')
  matches.setAttribute('role', 'link');
  matches.setAttribute('aria-disabled', 'true');
  matches.removeAttribute('href');
  matches.removeAttribute('rel');
};

CodePudding user response：

the OP's code might be switched to something like ...

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