原生JS禁用jQuery时getElementsByClassName如何仅选中指定class的a标签

现有如下HTML结构：

<ul class="elephant">
    <li>
        <a class="elephant">Trunk</a>
    </li>
</ul>

使用原生JS的document.getElementsByClassName方法匹配class为elephant的元素时，仅返回了上述结构中的<ul>标签，需求是仅选中其中的<a>标签，不获取其他多余元素，不能使用jQuery。

以下是几种无需jQuery的原生实现方案，按需选用即可：

• 方案1：使用querySelectorAll直接精准匹配（推荐）
  直接组合标签名和类名选择器，从根源上限定只匹配a标签，不会返回ul等其他带相同class的元素：

  // 获取所有class为elephant的a标签，返回静态NodeList
  const targetA = document.querySelectorAll('a.elephant');
  

  如果确定页面中只有一个目标a标签，也可以用document.querySelector('a.elephant')，直接返回第一个匹配的DOM元素。
• 方案2：对getElementsByClassName的返回结果做过滤
  如果项目需要兼容极老浏览器、必须使用getElementsByClassName方法，可以拿到所有匹配class的元素后，过滤出标签为a的节点：

  // 拿到所有带elephant类的元素，返回动态HTMLCollection
  const allElephantEls = document.getElementsByClassName('elephant');
  // 类数组转数组后过滤出a标签
  const targetA = Array.from(allElephantEls).filter(function(el) {
    return el.tagName.toLowerCase() === 'a'
  });
  

• 方案3：缩小查找范围
  如果目标a标签固定在当前ul内部，可以先定位到ul容器，再在容器内部查找目标元素，自然不会匹配到外层ul：

  const ulContainer = document.querySelector('ul.elephant');
  // 仅在ul范围内查找目标a标签
  const targetA = ulContainer.querySelector('a.elephant');
  

补充说明：如果你之前调用getElementsByClassName只返回了ul、没拿到a标签，大概率是JS执行时机过早——代码运行时a标签还没被渲染到DOM树中，把脚本挪到</body>标签前，或者监听DOMContentLoaded事件后再执行查找逻辑即可解决。

内容的提问来源于stack exchange，提问作者Zach