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

Question

我有这样的 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= 的嵌套元素激活的标签积极的。谢谢!

Answer 1

路漫漫其修远兮

首先，只获取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>