javascript - 通过嵌套的dom元素中的GetElementbyID内的GetElementsbyClass内的标签获取元素

我有这样的html输出：

<div id="parent">
  <ul id="list">
    <li class="item">
      <a href="picture1.jpg">
        <img src="picture1.jpg">
      </a>
    </li>
    <li class="item active">
      <a href="picture1.jpg" class="OUR-TARGET">
        <img src="picture1.jpg">
      </a>
    </li>
    <li class="item">
      <a href="picture1.jpg">
        <img src="picture1.jpg">
      </a>
    </li>
  </ul>
</div>

我想获得所有带有标签'a'的元素，这些元素都在具有类名'active'的元素内以及id'parent'的元素内。

我目前正在使用
document.getElementById('parent').getElementsByTagName('a')，但我不希望所有不活动的a标签，仅希望那些通过具有class = active的嵌套元素而活动的标签。谢谢！

最佳答案

很长的路要走

首先，仅使用active类获取元素，然后遍历此元素并获取子元素a。这是一个示例（我为目标提供了OUR-TARGET类，因此您最终可以在控制台中看到它，并确保它确实是我们的目标）：

var activeLis = document.getElementById('parent').getElementsByClassName('active');
for (var i = 0; i < activeLis.length; i++) {
  console.log(activeLis[i].getElementsByTagName('a')[0]);
}

<div id="parent">
  <ul id="list">
    <li class="item">
      <a href="picture1.jpg">
        <img src="picture1.jpg">
      </a>
    </li>
    <li class="item active">
      <a href="picture1.jpg" class="OUR-TARGET">
        <img src="picture1.jpg">
      </a>
    </li>
    <li class="item">
      <a href="picture1.jpg">
        <img src="picture1.jpg">
      </a>
    </li>
  </ul>
</div>

短路

您可以简单地将"#parent .active a"选择器用于querySelectorAll方法：

console.log(document.querySelectorAll("#parent .active a")[0]);

<div id="parent">
  <ul id="list">
    <li class="item">
      <a href="picture1.jpg">
        <img src="picture1.jpg">
      </a>
    </li>
    <li class="item active">
      <a href="picture1.jpg" class="OUR-TARGET">
        <img src="picture1.jpg">
      </a>
    </li>
    <li class="item">
      <a href="picture1.jpg">
        <img src="picture1.jpg">
      </a>
    </li>
  </ul>
</div>