集合中的 getElementsByTagName

Question

编辑：document.querySelectorAll 解决方案有效，并且更易于阅读和理解。我自己的解决方案（在下面的答案中）也有效，并且速度稍快。 getElementsByClassName + getElementsByClassName 解决方案是最快的，因此我将其标记为已接受的解决方案。

原始帖子：我需要找到具有特定类的任何元素的子元素，例如，

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

这样我就可以设置和删除锚点的一些属性。

我可以使用 getElementsByClassName 轻松找到所有列表项，但 getElementsByTagName 失败，因为它仅适用于单个声明的元素（不适用于集合）。因此，这不起作用：

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

如何遍历返回的元素并获取其中的标签？

Answer 1

可以将 OP 的代码切换为更具表现力的代码（例如基于 querySelectorAll），例如 ...

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

Answer 2

问题出在getElementsByTagName 中，它返回元素的实时 HTMLCollection，您的 matches 变量包含一个数组，而必须是一个元素才能应用到他的一些属性 href, rel...，所以他需要是一个元素而不是元素s，为了解决这个问题，只需访问第一个元素而不是全部，或者使用querySelector，如果存在则返回第一个匹配的元素。

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

Answer 3

以下解决方案有效。我可能会测试其他 2 个提供的解决方案，如果它们有效，我会对其进行投票，但我发布了这个答案，以便其他人可以看到解决这个问题的不同方法。

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