从集合中获取 ElementsByTagName

Question

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

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

<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

问题出在 getElementsByTagName，其中 return 是一个实时 HTMLCollection 元素，您的 matches 变量包含一个数组，而必须是一个元素才能将某些属性应用于他 href, rel..., 所以他需要是一个元素不是elments, 要解决问题只需要访问第一个元素而不是所有元素，或者使用querySelector which [=19] =] 第一个匹配的元素（如果存在）。

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 2

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

document
  .querySelectorAll('.myclass a')
  .forEach(elmNode => {
    elmNode.setAttribute('role', 'link');
    elmNode.setAttribute('aria-disabled', 'true');
    elmNode.removeAttribute('href');
    elmNode.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');
});

从集合中获取 ElementsByTagName

getElementsByTagName from a collection

javascript

dom

selectors-api

getelementsbytagname

getelementsbyclassname