search

博客列表 >Dom元素、classList对象、dataset对象、点击事件添加

Dom元素、classList对象、dataset对象、点击事件添加

，多思曩惜，
，多思曩惜，原创
2020年06月04日 17:18:311268浏览

获取dom元素

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7. </head>
  8. <body>
  9.     <ul id="list">
  10.         <li class="item" name ="first">item1</li>
  11.         <li class="item">item2</li>
  12.         <li class="item">item3</li>
  13.         <li class="item active">item4</li>
  14.         <li class="item">item5</li>
  15.     </ul>
  16. </body>
  17. <script>
  18.     var cl =console.log.bind(console);
  19.     // 按标签来
  20.     var lis = document.getElementsByTagName('li');
  21.     cl(lis);  //返回一个类数组HTMLCollection(5)
  22.     // 通过键来访问
  23.     cl(lis[2]);
  24.     cl(lis.item(2));
  25.     cl(lis.length);
  27.     // 按id
  28.     var ul = document.getElementById("list");
  29.     cl(ul);
  31.     // class
  32.     var lis = document.getElementsByClassName("item");
  33.     cl(lis);
  34.     var lis = document.getElementsByClassName("item active");
  35.     cl(lis);
  37.     // name 
  38.     var first = document.getElementsByName("first");
  39.     cl(first[0]);
  41.     // CSS选择器
  42.     // querySelector条件里的第一个
  43.     var ul = document.querySelector("#list");
  44.     cl(ul);
  45.     var li = document.querySelector(".item");
  46.     cl(li);
  47.     var lis = document.querySelectorAll(".item");
  48.     cl(lis);
  49.     // 使用选择器
  50.     var lis = document.querySelectorAll("#list > li:nth-of-type(-n+3");
  51.     lis.forEach(function(item){
  52.         item.style.color="red";
  53.     })
  54. </script>
  55. </html>

遍历元素节点

  • js 节点有11种类型,但是与html相关的只有6个
    • 1: 元素
    • 2: 属性
    • 3: 文本
    • 6: 注释
    • 9: 文档, document
    • 11: 文档片断
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7. </head>
  8. <body>
  9.     <ul>
  10.         <li>item1</li>
  11.         <li>item2</li>
  12.         <li>item3</li>
  13.         <li>item4</li>
  14.         <li>item5</li>
  15.     </ul>
  16. </body>
  17. </html>
  18. <script>
  19.     var cl=console.log.bind(console);
  20.     var ul = document.querySelector("ul");
  21.     cl(ul);
  22.     // childNodes子节点
  23.     cl(ul.childNodes);
  24.     cl(ul.childNodes[2]);
  25.     // JS节点有11种类型，但是与html相关的只有6个
  26.     cl(ul.childNodes[0].nodeType);
  27.     cl(ul.childNodes[1].nodeValue);
  28.     cl(ul.childNodes[1].nodeName);
  29.     var eles=[];
  30.     ul.childNodes.forEach(function(item){
  31.         // 只返回类型为1的元素节点
  32.         if(item.nodeType ===1)
  33.         this.push(item);
  34.     },eles);
  35.     cl(eles);
  36.     // 获取第一个子节点
  37.     cl(ul.firstChild);
  38.     // 最后一个字节点
  39.     cl(ul.lastChild);
  40.     // 前一个兄弟节点
  41.     cl(ul.lastChild.previousSibling);
  42.     // 后一个兄弟节点
  43.     cl(ul.firstChild.nextSibling);
  44. </script>

遍历元素节点

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7. </head>
  8. <body>
  9.     <ul>
  10.         <li>item1</li>
  11.         <li>item2</li>
  12.         <li>item3</li>
  13.         <li>item4</li>
  14.         <li>item5</li>
  15.     </ul>
  16. </body>
  17. </html>
  18. <script>
  19.      var cl=console.log.bind(console);
  20.      var ul =document.querySelector('ul');
  21.     //  children
  22.     // childNode返回所有节点，包括元素、文本...
  23.     cl(ul.childNodes);
  24.     // children:只返回元素
  25.     cl(ul.children);
  26.     cl(ul.children.length); // 等于cl(ul.childElementCount);
  27.     // 第一个元素
  28.     cl(ul.firstElementChild);
  29.     // 任何一个
  30.     cl(ul.children[2]);
  31.     // 前一个兄弟节点
  32.    cl(ul.children[2].previousElementSibling);
  33.     for(var i = 0; i<ul.childElementCount;i++){
  34.         cl(ul.children.item(i));
  35.     }
  36. </script>

classList对象

  • classList.add()添加属性
  • classList.remove()移除属性
  • classList.toggle()切换属性
  • classList.replace()替换属性

dataset对象

  • 用于处理用户自定义的数据属性
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7. </head>
  8. <body>
  9.     <div id="user" data-id="101" data-user-name="admin" data-email="admin@qq.com">
  10.         用户信息
  11.     </div>
  12. </body>
  13. </html>
  14. <script>
  15.     var cl=console.log.bind(console);
  16.     var user = document.querySelector("#user");
  17.      // dataset后面的属性就是自定义的数据属性,去掉data-前缀
  18.     cl(user.dataset.id);
  19.     cl(user.dataset.userName);
  20.     cl(user.dataset.email);
  21.     user.dataset.userName="888";
  22.     user.dataset.email="888@qq.com";
  23.     cl(user.dataset.userName);
  24.     cl(user.dataset.email);
  25. </script>

事件添加方式

  • 1.给HTML元素绑定事件属性
  • 2.给Html元素添加属性
  • 3.监听器
  • 4.事件派发
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7. </head>
  8. <body>
  9.     <button onclick="var text=this.innerText;alert(text);">按钮1</button>
  10.     <button onclick="show(this)">按钮2</button>
  11.     <button>按钮3</button>
  12.     <button>按钮4</button>
  13.     <button>按钮5</button>
  14. </body>
  15. </html>
  16. <script>
  17.     var cl=console.log.bind(console);
  18.     // 1.给HTML元素绑定事件属性
  19.     function show(ele){
  20.         var text =ele.innerText;
  21.         alert(text);
  22.     };
  23.     // 2.给Html元素添加属性
  24.     var btn3 = document.querySelector('button:nth-of-type(3)');
  25.     btn3.onclick=function(){
  26.         alert(this.innerText);
  27.     };
  28.     // 3.监听器
  29.     var btn4 = document.querySelector("button:nth-of-type(4)");
  30.     // btn.addEventListener(事件类型，事件回调函数，传递机制)
  31.     btn4.addEventListener('click',function(){
  32.         alert(this.innerText);
  33.     },false);
  34.     // 事件派发
  35.     var btn5 =document.querySelector("button:last-of-type")
  36.     btn5.addEventListener('click',function(){
  37.         alert(this.innerText);
  38.     },false);
  39.     var ev = new Event("click");
  40.     btn5.dispatchEvent(ev);
  41. </script>

事件传递与事件委托/代理

  • 事件的捕获与冒泡
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>事件传递与事件委托/代理</title>
  7.   </head>
  8.   <body>
  9.     <div class="first">
  10.       <div class="second">
  11.         <div class="three">事件传递</div>
  12.       </div>
  13.     </div>
  14.   </body>
  15.   <script>
  16.     // 事件的捕获与冒泡
  17.    var cl = console.log.bind(console);
  18.    var first = document.querySelector(".first");
  19.    var second = document.querySelector(".second");
  20.    var three = document.querySelector(".three");
  21.    first.addEventListener("click",function(ev){
  22.     // ev:事件对象
  23.     // ev.type:事件类型
  24.     // ev.target:触发事件的元素
  25.     // ev.currentTarget：绑定事件的元素
  26.     // cl(ev.target);
  27.     // cl(ev.target.classList.item(0));
  28.     cl("捕获阶段：" + "触发:" + ev.target.classList.item(0),"绑定:" + ev.currentTarget.classList.item(0));
  29.    },true);
  30.    second.addEventListener("click",function(ev){
  31.     cl("捕获阶段：" + "触发:" + ev.target.classList.item(0),"绑定:" + ev.currentTarget.classList.item(0));
  32.    },true);
  33.    three.addEventListener("click",function(ev){
  34.     cl("捕获阶段：" + "触发:" + ev.target.classList.item(0),"绑定:" + ev.currentTarget.classList.item(0));
  35.    },true);
  38.    first.addEventListener("click",function(ev){
  39.     // ev:事件对象
  40.     // ev.type:事件类型
  41.     // ev.target:触发事件的元素
  42.     // ev.currentTarget：绑定事件的元素
  43.     // cl(ev.target);
  44.     // cl(ev.target.classList.item(0));
  45.     cl("冒泡阶段:" + "触发:" + ev.target.classList.item(0),"绑定:" + ev.currentTarget.classList.item(0));
  46.    },false);
  47.    second.addEventListener("click",function(ev){
  48.     cl("冒泡阶段:" + "触发:" + ev.target.classList.item(0),"绑定:" + ev.currentTarget.classList.item(0));
  49.    },false);
  50.    three.addEventListener("click",function(ev){
  51.     cl("冒泡阶段:" + "触发:" + ev.target.classList.item(0),"绑定:" + ev.currentTarget.classList.item(0));
  52.    },false);
  54.   </script>
  55.    <ul>
  56.        <li>item1</li>
  57.        <li>item2</li>
  58.        <li>item3</li>
  59.        <li>item4</li>
  60.        <li>item5</li>
  61.    </ul>
  62.    <script>
  63.     //    document.querySelectorAll("ul li").forEach(function(item){
  64.     //        item.addEventListener('click',function(ev){
  65.     //         //    this === ev.target
  66.     //         cl('当前触发事件的元素：',this);
  67.     //         // cl('当前触发事件的元素：',ev.target);
  68.     //        });
  69.     //    });
  71.     //    事件委托
  72.     document.querySelector("ul").addEventListener("click",function(ev){
  73.             //    this === ev.currentTarget
  74.             cl(ev.target);
  75.             cl(ev.currentTarget);
  76.             cl('当前触发事件的元素：',this);
  77.             cl('当前触发事件的元素：',ev.currentTarget);
  78.             });
  79.    </script>
  80. </html>

总结

  • 了解如何获取Dom元素，如何遍历元素节点
  • classList的使用。
  • dataset对象属性就是自定义的数据属性,去掉data-前缀，
  • JS中点击事件的4中添加方式
  • 监听事件btn4.addEventListener(事件类型, 事件回调函数, 传递机制中false为冒泡阶段触发)
上一条：初识layui表单下一条：实战：第3章 laravel基础1与数据增查改删
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多