H5新增元素方式

 

<body>
    <div class="box">盒子1</div>
    <div class="box">盒子2</div>
    <div id="nav">
      <ul>
        <li>首页</li>
        <li>产品</li>
      </ul>
    </div>
  </body>
  <script>
    // 1.getElementsByClassName  根据类名获得某些元素集合
    var boxs = document.getElementsByClassName("box"); //根据类名返回元素对象集合
    console.log(boxs);
    var box1 = document.querySelector(".box"); //根据指定选择器返回第一个元素对象
    console.log(box1);
    var nav = document.querySelector("#nav");
    console.log(nav);
    //
    var li = document.querySelector("li");
    console.log(li);
    // querySelectorAll( );返回指定选择器的所有元素对象集合
    var allBox = document.querySelectorAll(".box");
    console.log(allBox);
    // 选择标签的时候直接写标签就行
    var lis = document.querySelectorAll("li");
    console.log(lis);
  </script>

 

posted @ 2022-04-18 10:59  罗砂  阅读(57)  评论(0)    收藏  举报