为了账号安全,请及时绑定邮箱和手机立即绑定

javascript 文档.querySelectorAll

javascript 文档.querySelectorAll

catspeake 2023-01-06 10:55:54

我在这里要做的是修改元素并使用 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>

谢谢你的帮忙。


查看完整描述

3 回答

?
阿波罗的战车

TA贡献1607条经验 获得超6个赞

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


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>

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



查看完整回答
反对 回复 2023-01-06
?
达令说

TA贡献1566条经验 获得超6个赞

您可以对任意数量的类执行类似的操作。<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>


查看完整回答
反对 回复 2023-01-06
?
慕容708150

TA贡献1589条经验 获得超3个赞

这将动态执行,即使每个 div 中有多个 div:


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

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

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


查看完整回答
反对 回复 2023-01-06
  • 3 回答
  • 0 关注
  • 16 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信