javascript 文档.querySelectorAll

Question

我在这里要做的是修改元素并使用 JS 添加属性（类）。脚本  var x = document.querySelectorAll(".clearfix div");  x[0].setAttribute("class", "regDesign");  x[1].setAttribute("class", "regDesign");HTML 默认格式<div class="clearfix"><div>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>    a lot of divs here</div><div>    <div></div>    <div></div>    <div></div>    a lot of divs here</div></div>HTML 结果<div class="clearfix">    <div class="regDesign">        <div class="regDesign"></div>    </div>      <div>        <div></div>    </div></div>期望的 HTML 结果<div class="clearfix">    <div class="regDesign">        <div></div>    </div>      <div class="regDesign">        <div></div>    </div></div>谢谢你的帮忙。

Answer 1

您可以按如下方式修改选择器：

var x = document.querySelectorAll(".clearfix > div");

x[0].setAttribute("class", "regDesign");

x[1].setAttribute("class", "regDesign");

console.log(document.getElementsByClassName("clearfix")[0].innerHTML);

<div class="clearfix">

    <div>

        <div></div>

    </div>  

    <div>

        <div></div>

    </div>

</div>

您可以在此处阅读更多内容。

Answer 2

您可以对任意数量的类执行类似的操作。<div>

要添加类，请使用classList.add()而不是setAttribute()

var x = document.querySelectorAll(".clearfix > div");

for(let i = 0; i < x.length; i++) {

  x[i].classList.add("regDesign");

}

console.log(document.getElementsByClassName("clearfix")[0].innerHTML);

<div class="clearfix">

    <div>

        <div></div>

    </div>  

    <div>

        <div></div>

    </div>

</div>

Answer 3

这将动态执行，即使每个 div 中有多个 div：

var x = document.querySelectorAll(".clearfix>div");

x[0].setAttribute("class", "regDesign");

x[1].setAttribute("class", "regDesign");