HTML5获取DOM元素与jquery获取DOM元素的对比

最新推荐文章于 2023-05-28 17:07:28 发布

静静香甜

最新推荐文章于 2023-05-28 17:07:28 发布

阅读量182

点赞数

本文链接：https://blog.csdn.net/qq_23663693/article/details/108078379

版权

javascript 同时被 3 个专栏收录

18 篇文章 0 订阅

订阅专栏

html5

14 篇文章 0 订阅

订阅专栏

jquery

13 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <style type="text/css">
       </style>
   </head>
   <script type="text/javascript">
       window.οnlοad=function(){
           //1.获取元素
           var box1 = document.querySelector("#box1");//等价于jquery var box1 = $("#box1")
           var box2 = document.querySelector("header #box2");//等价于jquery var box1 = $("header #box2")
           var box = document.querySelectorAll(".box"); //等价于jquery var box = $(".box")

           //2.操作属性
           var cls = box1.classList;//2.1获取元素所有
           box1.classList.add("active");//2.2添加类名等价于jquery box1.addClass("active");
           box1.classList.remove("active");//2.3删除类名等价于jquery box1.removeClass("active");
           box1.classList.contains("active");//2.4类名是否存在等价于jquery box1.hasClass("active");

           //3.data 属性
           var name = box1.dataset.name;//价于jquery box1.attr("data-name");
           box1.dataset.age = "28";//价于jquery box1.attr("data-age","28");
       }
   </script>
   <body>
       <header>
           <div id="box1" class="box" data-name="kiki">[box1]</div>
           <div id="box2" class="box" data-name="tom">[box2]</div>
       </header>
   </body>
</html>