在GetElementbyID嵌套dom元素内的GetElementsbyClass中获取Element标签

Question

我有这样的html输出：

sbt-editsource

我想通过标记＆＃39; a＆＃39;来获取所有元素。属于具有类名＆＃39;活跃＆＃39;的元素。以及id＆＃39; parent＆＃39;。

我目前正在使用 <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> 但我不想要所有不活动的标签，只是通过class = active的嵌套元素激活的标签。谢谢！

Answer 1

很长的路

首先，仅使用active类获取元素，然后迭代这些元素并获取子a元素。这是一个例子（我给了我们的目标OUR-TARGET类，所以你最终可以在控制台中看到它，并确保它真的是我们的目标）：

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

简短方法

您只需使用"#parent .active a"方法querySelectorAll方法：

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;