Select 父标签 class javascript

Question

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

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

专门用于将 "href" 功能替换为 "onclick"（用于扩展没有 javascript 的功能、添加缩略图等）

除了我怎样才能将它 select 仅放在父元素的某个 class 中的锚元素（例如 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>

^{我知道一个解决方法就是 select 将 class 应用于需要修改的元素}

Answer 1

使用querySelectorAll('.pics a')到select.pic下<a>的集合class

function go() {
    var anchorElements = document.querySelectorAll('.pics 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>

Select 父标签 class javascript

Select tags in parent class javascript

javascript

anchor

dom