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">&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; <div></div>&nbsp; &nbsp; </div>&nbsp;&nbsp;&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; <div></div>&nbsp; &nbsp; </div></div>您可以在此处阅读更多内容。

Answer 2

您可以对任意数量的类执行类似的操作。<div>要添加类，请使用classList.add()而不是setAttribute()var x = document.querySelectorAll(".clearfix > div");for(let i = 0; i < x.length; i++) {&nbsp; x[i].classList.add("regDesign");}console.log(document.getElementsByClassName("clearfix")[0].innerHTML);<div class="clearfix">&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; <div></div>&nbsp; &nbsp; </div>&nbsp;&nbsp;&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; <div></div>&nbsp; &nbsp; </div></div>

Answer 3

这将动态执行，即使每个 div 中有多个 div：var x = document.querySelectorAll(".clearfix>div");x[0].setAttribute("class", "regDesign");x[1].setAttribute("class", "regDesign");