在父类javascript中选择标签

Question

我可以使用它来选择文档中的所有锚标记，效果很好...

var anchors = document.getElementsByTagName('a');

专门用于将“ href”功能替换为“ onclick”（用于从无javascript扩展功能，添加缩略图等）

除了如何在特定类别的父元素（例如pics）中仅选择锚元素之外，而又不留大量锚元素？

<a href="img/TEST/pretty.jpg">ignore me</a>
<div class="pics">
 <a href="img/TEST/testPic1.jpg">1 stuff....</a>
 <a href="img/TEST/testPic2.jpg">2 stuff...</a>
 <a href="img/TEST/TestPic3.jpg">3 stuff..</a>
 ...
 <a href="img/TEST/TestPicN.jpg">n stuff..</a>
</div>

... 没有额外的库，例如jQuery！

这是一个快速演示...

function go() {
    var anchorElements = document.getElementsByTagName('a');
    for (var i in anchorElements)
        anchorElements[i].style.backgroundColor = "red";
}

a{background-color:#0F0;}

<a href="img/TEST/pretty.jpg">ignore me</a>
<div class="pics">
 <a href="img/TEST/testPic1.jpg">1 stuff....</a>
 <a href="img/TEST/testPic2.jpg">2 stuff...</a>
 <a href="img/TEST/TestPic3.jpg">3 stuff..</a>
 ...
 <a href="img/TEST/TestPicN.jpg">n stuff..</a>
</div>
<button onclick="go()">Go!</button>

^{我知道一种解决方法是通过应用到需要修改的元素的类来选择}

Answer 1

使用nodetool flush在querySelectorAll('.pics a')类下选择<a>的集合

.pic

function go() {
    var anchorElements = document.querySelectorAll('.pics a');
    for (var i in anchorElements)
        anchorElements[i].style.backgroundColor = "red";
}

a{background-color:#0F0;}