简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW)
Home > List of blog posts > Dom元素、classList对象、dataset对象、点击事件添加
Blogger Information
Blog 28
fans 0
comment 0
visits 25413
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
Dom元素、classList对象、dataset对象、点击事件添加
，多思曩惜，
Original
1234 people have browsed it

获取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为冒泡阶段触发)
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：继续努力
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！

  • Back top