Community Learn Tools Library Leisure
search
English
Home > List of blog posts > DOM操作
Blogger Information
Blog 36
fans 0
comment 0
visits 28200
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操作
phpcn_u202398
Original
561 people have browsed it

1、NodeList

  • NodeList是一个节点的集合(既可以包含元素和其他节点)，在DOM中，节点的类型总共有12种，通过判断节点的nodeType来判断节点的类型。
  • NodeList对象有个length属性和item()方法，length表示所获得的NodeList对象的节点个数，这里还是要强调的是节点，而item()可以传入一个索引来访问Nodelist中相应索引的元素。
1.1、与html有关的6个节点类型
类型名称 常数值
元素节点 1
属性节点 2
文本节点 3
实体名称节点 6
文档节点 9
文档片段节点 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 id="list">
  10.         <li class="item" name="first">item1</li>
  11.         <li class="item" name="first">item2</li>
  12.         <li class="item" name="first">item3</li>
  13.         <li class="item" name="first">item4</li>
  14.         <li class="item" name="first">item5</li>
  15.         <li class="item" name="first">item6</li>
  16.     </ul>
  17. </body>
  18. </html>
  19. <script>
  20.     var lg = console.log.bind(console);
  21.     var ul = document.querySelector("ul");
  22.     lg(ul);
  24.     //子节点
  25.     lg(ul.childNodes);
  26.     lg(ul.childNodes.length);
  27.     lg(ul.childNodes[3]);
  29.     //遍历
  30.     var eles = [];
  31.     ul.childNodes.forEach(function(item){
  32.          if(item.nodeType === 1) this.push(item);
  33.     },eles)
  34.     lg(eles);
  35.     //获取第一个子节点
  36.     lg(ul.firstChild);
  37.     //获取下一个子节点
  38.     lg(ul.firstChild.nextSibling);
  40.     //获取最后一个子节点
  41.     lg(ul.lastChild);
  42.     //获取前一个子节点
  43.     lg(ul.lastChild.previousSibling);
  44. </script>

2、HTMLCollection

  • HTMLCollection是元素集合，它和NodeList很像，有length属性来表示HTMLCollection对象的长度，也可以通过elements.item()传入元素索引来访问。
  • HTMLCollection的集合和NodeList对象一样也是动态的，他们获取的都是节点或元素集合的一个引用。
代码示例
  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" name="first">item2</li>
  12.         <li class="item" name="first">item3</li>
  13.         <li class="item" name="first">item4</li>
  14.         <li class="item" name="first">item5</li>
  15.         <li class="item" name="first">item6</li>
  16.     </ul>
  17. </body>
  18. </html>
  19. <script>
  20.     var lg = console.log.bind(console);
  21.     var ul = document.querySelector("ul");
  23.     lg(ul.children);
  24.     lg(ul.children.length);
  25.     lg(ul.childElementCount);
  26.     //第一个元素
  27.     lg(ul.firstElementChild);
  28.     //最后一个元素
  29.     lg(ul.lastElementChild);
  30.     lg(ul.children[3]);
  31.     //前一个
  32.     lg(ul.children[3].previousElementSibling);
  33.     //下一个
  34.     lg(ul.children[3].nextElementSibling);
  35.     lg("-------------------------");
  36.     //遍历
  37.     for(var i = 0;i<ul.childElementCount;i++){
  38.         lg(ul.children.item(i));
  39.     }
  40. </script>

3、事件添加方式

代码示例
  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="show(this)">按钮</button>
  10.     <button>按钮1</button>
  11.     <button>按钮2</button>
  12. </body>
  13. </html>
  14. <script>
  15.     //给html元素绑定事件属性
  16.      function show(ele){
  17.          var text = ele.innerText;
  18.          alert(text);
  19.      }
  20.     //监听器
  21.     var btn = document.querySelector("button:first-of-type");
  23.         btn.addEventListener("click",function(){
  24.             alert(this.innerText);
  25.         },
  26.         false  //false为冒泡排序
  27.         );
  29.     //事件派发
  30.     var btn1 = document.querySelector("button:nth-of-type(3)");
  32.         btn1.addEventListener("click",function(){
  33.                 alert(this.innerText);
  34.             },
  35.             false  //false为冒泡排序
  36.             );
  38.     //创建一个事件对象
  39.     var ev = new Event("click");
  40.     btn1.dispatchEvent(ev);
  41. </script>

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.     <div class="first">
  10.         <div class="second">
  11.             <div class="three">事件传递</div>
  12.         </div>
  13.     </div>
  14.     <script>
  15.         //事件的捕获与冒泡
  16.         var lg = console.log.bind(console);
  18.         var first = document.querySelector(".first");
  19.         var second = document.querySelector(".second");
  20.         var three = document.querySelector(".three");
  22.         //true 捕获阶段触发事件
  23.         first.addEventListener("click",function(ev){
  24.             //ev:事件对象
  25.            // ev.type:事件类型
  26.            // ev.target:触发事件的元素
  27.            // ev.currentTarget:绑定事件的元素
  28.            lg(ev.target.classList.item(0));
  30.            lg("捕获阶段：" + "触发：" + ev.target.classList.item(0),
  31.                "绑定：" + ev.currentTarget.classList.item(0));
  32.         },true);
  34.         second.addEventListener("click",function(ev){
  36.            lg(ev.target.classList.item(0));
  38.            lg("捕获阶段：" + "触发：" + ev.target.classList.item(0),
  39.                "绑定：" + ev.currentTarget.classList.item(0));
  40.         },true);
  42.         three.addEventListener("click",function(ev){
  44.            lg(ev.target.classList.item(0));
  46.            lg("捕获阶段：" + "触发：" + ev.target.classList.item(0),
  47.                "绑定：" + ev.currentTarget.classList.item(0));
  48.         },true);
  51.         //false  冒泡阶段触发事件
  52.         first.addEventListener("click",function(ev){
  54.            lg(ev.target.classList.item(0));
  56.            lg("冒泡阶段：" + "触发：" + ev.target.classList.item(0),
  57.                "绑定：" + ev.currentTarget.classList.item(0));
  58.         },false);
  60.         second.addEventListener("click",function(ev){
  62.            lg(ev.target.classList.item(0));
  64.            lg("冒泡阶段：" + "触发：" + ev.target.classList.item(0),
  65.                "绑定：" + ev.currentTarget.classList.item(0));
  66.         },false);
  68.         three.addEventListener("click",function(ev){
  70.            lg(ev.target.classList.item(0));
  72.            lg("冒泡阶段：" + "触发：" + ev.target.classList.item(0),
  73.                "绑定：" + ev.currentTarget.classList.item(0));
  74.         },false);
  75.      </script>
  77.   <!--冒泡实现事件的委托/代理-->
  79.      <ul>
  80.          <li>item1</li>
  81.          <li>item2</li>
  82.          <li>item3</li>
  83.          <li>item4</li>
  84.          <li>item5</li>
  85.      </ul>
  88.     <script>
  89.         //document.querySelectorAll("ul li").forEach(function(item){
  90.         //    item.addEventListener("click",function(ev){
  91.         //        lg("当前触发事件的元素：", this);
  92.          //   });
  93.         //});
  95.         //事件委托/代理 ：子元素上的事件会冒泡到父元素上的同名事件上触发
  96.         document.querySelector("ul").addEventListener("click",function(ev){
  97.                 lg("当前触发事件的元素：",ev.target);
  98.                 lg("当前绑定事件的元素：",ev.currentTarget);
  99.         });
  100.     </script>
  101. </body>
  102. </html>

5、事件捕获与冒泡原理

学习总结

本节课我们学习了事件的添加方式与事件的委托/代理，通过本节课的学习使知道了捕获与冒泡的原理，同时学到了事件委托/代理的实现方式。

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：事件的传递机制, 理解起来比较抽象, 案例也不太好举, 所以要多写一些小练习, 去悟, 只有在实战中, 才能深刻体会事件机制
Statement of this Website
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