gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-30 21:05:59 26 4
gpt4 key购买 nike

我有这样的 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类的元素,然后遍历这个元素,获取子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>

关于javascript - 通过 GetElementsbyClass 内的标签在 GetElementbyID 嵌套的 dom 元素内获取元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46595738/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com