简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >DOM操作与事件机制

DOM操作与事件机制

蔚蓝世纪
蔚蓝世纪原创
2020年05月26日 23:03:41644浏览

一、什么是 HTML DOM？

DOM 是一项 W3C (World Wide Web Consortium) 标准。DOM 定义了访问文档的标准：“W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问、更新文档的内容、结构和样式。” 而HTML DOM 是 HTML 的标准对象模型和编程接口。通过 HTML DOM，JavaScript 能够获取、更改、添加或删除 HTML 文档的所有元素。
对于DOM集合接口，一般的规定是:

  1. node.childNodes 结果返回类型是 NodeList。
  2. node（document或者其他不同节点）.getElementsByXXX 结果返回类型是HTMLCollection。
  3. node.children 结果返回类型是 HTMLCollection。

二、NodeList与HTMLCollection的区别。

  1. HTMLCollection是 HTML 元素的集合。
  2. NodeList 是文档节点的集合。
  3. HTMLCollection 和 NodeList 对象都是类数组的对象列表（集合）。
  4. 都有定义列表（集合）中项目数的 length 属性。
  5. 都可以通过索引 (0, 1, 2, 3, 4, ...) 像数组那样访问每个项目。
  6. 可以通过它们的名称、id 或索引号,问 HTMLCollection 项目。
  7. 访问 NodeList 项目，只能通过它们的索引号。
  8. 只有 NodeList 对象能包含属性节点和文本节点。

1.NodeList类型

NodeList对象是一个节点的集合,是由Node.childNodes and the querySelectorAll方法返回的.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>遍历元素节点NodeList类型</title>
  7.   </head>
  8.   <body>
  9.     <ul>
  10.       <li>返回1号</li>
  11.       <li>返回2号</li>
  12.       <li>返回3号</li>
  13.       <li>返回4号</li>
  14.       <li>返回5号</li>
  15.     </ul>
  16.   </body>
  17.   <script>
  18.     var ul = document.querySelector("ul");
  19.     console.log(ul);
  20.     // 子节点
  21.     console.log(ul.childNodes);
  22.     console.log(ul.childNodes.length);
  23.     console.log(ul.childNodes[2]);
  24.     // js 节点有11种类型,但是与html相关的只有6个
  25.     // 1: 元素
  26.     // 2: 属性
  27.     // 3: 文本
  28.     // 6: 注释
  29.     // 9: 文档, document
  30.     // 11: 文档片断
  31.     console.log(ul.childNodes[0]);
  32.     console.log(ul.childNodes[0].nodeType); //查看节点类型
  33.     console.log(ul.childNodes[1].nodeValue); //查看节点值
  34.     console.log(ul.childNodes[1].nodeName); //查看节点名称
  35.     // 最后一个
  36.     console.log(ul.childNodes[ul.childNodes.length - 1]);
  37.     console.log(ul.childNodes[ul.childNodes.length - 2].nodeName);
  38.     // 遍历
  39.     var eles = [];
  40.     ul.childNodes.forEach(function (item) {
  41.       // 只返回类型为1的元素节点
  42.       if (item.nodeType === 1) this.push(item);
  43.     }, eles);
  44.     console.log(eles);
  45.     //获取第一个子节点
  46.     console.log(ul.firstChild);
  47.     // cl(ul.childNodes[0]);
  48.     console.log(ul.childNodes[ul.childNodes.length - 1]);
  49.     // 最后一个子节点
  50.     console.log(ul.lastChild);
  51.     // 前一个兄弟节点
  52.     console.log(ul.lastChild.previousSibling);
  53.     // 后一个兄弟节点
  54.     console.log(ul.firstChild.nextSibling);
  55.   </script>
  56. </html>

输出效果：

2.HTMLCollection类型

HTMLCollection 对象是类数组的 HTML 元素列表（集合）。
HTMLCollection特点：

  1. 键名：是从0开始的正整数。
  2. 有一个length属性，表示数量。
  3. HTMLCollection 看起来像数组，但并不是数组。我们可以遍历列表并通过数字引用元素（就像数组那样）。但是不能对 HTMLCollection使用数组方法，比如 valueOf()、pop()、push() 或 join()。

代码举例：

  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>遍历dom元素HTMLCollection</title>
  7.   </head>
  8.   <body>
  9.     <ul id="list">
  10.       <li class="item" name="first">我是第1个</li>
  11.       <li class="item">我是第2个</li>
  12.       <li class="item">我是第3个</li>
  13.       <li class="item active">我是第4个</li>
  14.       <li class="item">我是第5个</li>
  15.     </ul>
  16.   </body>
  17. </html>
  18. <script>
  19.   // 1. 标签
  20.   var lis = document.getElementsByTagName("li");
  21.   console.log(lis);
  22.   // HTMLCollection:类数组
  23.   console.log(lis[2]);
  24.   console.log(lis.item(2));
  25.   console.log(lis.length);
  27.   // 2. id
  28.   var ul = document.getElementById("list");
  29.   console.log(ul);
  31.   // 3. class
  32.   var lis = document.getElementsByClassName("item");
  33.   var lis = document.getElementsByClassName("item active");
  34.   console.log(lis.item(0));
  36.   // 4. name
  37.   var first = document.getElementsByName("first");
  38.   console.log(first[0]);
  40.   // 5. css选择器
  41.   var ul = document.querySelector("#list");
  42.   console.log(ul);
  43.   var li = document.querySelector(".item");
  44.   console.log(li);
  45.   var lis = document.querySelectorAll(".item");
  46.   console.log(lis);
  47.   var lis = document.querySelectorAll("#list > li:nth-of-type(-n+3");
  48.   lis.forEach(function (item) {
  49.     item.style.color = "red";
  50.   });
  51. </script>

输出效果：

3.node.children 结果返回类型也是 HTMLCollection。

代码举例：

  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>遍历元素节点返回类型也是 HTMLCollection</title>
  7.   </head>
  8.   <body>
  9.     <ul>
  10.       <li>我是第1个元素节点</li>
  11.       <li>我是第2个元素节点</li>
  12.       <li>我是第3个元素节点</li>
  13.       <li>我是第4个元素节点</li>
  14.       <li>我是第5个元素节点</li>
  15.     </ul>
  16.   </body>
  17.   <script>
  18.     var ul = document.querySelector("ul");
  20.     // children
  21.     // childNodes: 返回所有节点,包括元素,文本...
  22.     console.log(ul.childNodes);
  23.     // children: 只返回元素
  24.     console.log(ul.children);
  25.     console.log(ul.children.length);
  26.     console.log(ul.childElementCount);
  27.     // 第一个元素
  28.     console.log(ul.firstElementChild);
  29.     // 最后一个
  30.     console.log(ul.lastElementChild);
  31.     // 任何一个
  32.     console.log(ul.children[2]);
  33.     // 前一个兄弟
  34.     console.log(ul.children[2].previousElementSibling);
  35.     //后一个兄弟
  36.     console.log(ul.children[3].nextElementSibling);
  37.     // HTMLCollection没有forEach
  38.     console.log("-----------");
  39.     for (var i = 0; i < ul.childElementCount; i++) {
  40.       console.log(ul.children.item(i));
  41.     }
  42.   </script>
  43. </html>

输出效果：

三、DOM事件的添加方式

HTML DOM 允许 JavaScript 对 HTML 事件作出反应，即：当用户点击某个 HTML 元素时，JavaScript 能够在事件发生时执行。
DOM事件的添加方式：

1. 给html元素绑定事件属性

  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>1. 给html元素绑定事件属性</title>
  7.   </head>
  8.   <body>
  9.     <button onclick="var text=this.innerText;alert(text);">按钮1</button>
  10.     <button onclick="show(this)">按钮2</button>
  11.   </body>
  12.   <script>
  13.     function show(ele) {
  14.       var text = ele.innerText;
  15.       alert(text);
  16.     }
  17.   </script>
  18. </html>

输出效果：


2.给html元素添加属性

  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>2.给html元素添加属性</title>
  7.   </head>
  8.   <body>
  9.     <button onclick="var text=this.innerText;alert(text);">按钮3</button>
  10.   </body>
  11.   <script>
  12.     var btn3 = document.querySelector("button");
  13.     btn3.onclick = function () {
  14.       alert(this.nodeName);
  15.     };
  16.   </script>
  17. </html>

输出效果：

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>3.监听器方式</title>
  7.   </head>
  8.   <body>
  9.     <button onclick="var text=this.innerText;alert(text);">按钮4</button>
  10.   </body>
  11.   <script>
  12.     // 3. 监听器
  13.     var btn4 = document.querySelector("button");
  14.     // btn4.addEventListener(事件类型, 事件回调函数, 传递机制)
  15.     btn4.addEventListener(
  16.       "click",
  17.       function () {
  18.         alert(this.innerText);
  19.       },
  20.       // false: 冒泡阶段触发
  21.       false
  22.     );
  23.   </script>
  24. </html>

输出效果：

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>4.事件派发</title>
  7.   </head>
  8.   <body>
  9.     <button onclick="var text=this.innerText;alert(text);">按钮5</button>
  10.   </body>
  11.   <script>
  12.     var btn5 = document.querySelector("button");
  13.     btn5.addEventListener(
  14.       "click",
  15.       function () {
  16.         alert(this.innerText);
  17.       },
  18.       false
  19.     );
  20.   </script>
  21. </html>

输出效果：

四、事件传递与事件委托（事件委托也叫做事件代理）

1.事件传递

  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.     var first = document.querySelector(".first");
  17.     var second = document.querySelector(".second");
  18.     var three = document.querySelector(".three");
  20.     // true: 捕获阶段触发事件
  21.     first.addEventListener(
  22.       "click",
  23.       function (ev) {
  24.         console.log(
  25.           "捕获阶段:" + "触发: " + ev.target.classList.item(0),
  26.           "绑定:" + ev.currentTarget.classList.item(0)
  27.         );
  28.       },
  29.       true
  30.     );
  32.     second.addEventListener(
  33.       "click",
  34.       function (ev) {
  35.         console.log(
  36.           "捕获阶段:" + "触发: " + ev.target.classList.item(0),
  37.           "绑定:" + ev.currentTarget.classList.item(0)
  38.         );
  39.       },
  40.       true
  41.     );
  43.     three.addEventListener(
  44.       "click",
  45.       function (ev) {
  46.         console.log(
  47.           "捕获阶段:" + "触发: " + ev.target.classList.item(0),
  48.           "绑定:" + ev.currentTarget.classList.item(0)
  49.         );
  50.       },
  51.       true
  52.     );
  53.   </script> -->
  54. </html>

输出效果：

2.事件委托

  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.     var first = document.querySelector(".first");
  17.     var second = document.querySelector(".second");
  18.     var three = document.querySelector(".three");
  19.     // false: 冒泡阶段触发事件
  20.     first.addEventListener(
  21.       "click",
  22.       function (ev) {
  23.         cl(
  24.           "冒泡阶段:" + "触发: " + ev.target.classList.item(0),
  25.           "绑定:" + ev.currentTarget.classList.item(0)
  26.         );
  27.       },
  28.       false
  29.     );
  31.     second.addEventListener(
  32.       "click",
  33.       function (ev) {
  34.         cl(
  35.           "冒泡阶段:" + "触发: " + ev.target.classList.item(0),
  36.           "绑定:" + ev.currentTarget.classList.item(0)
  37.         );
  38.       },
  39.       false
  40.     );
  42.     three.addEventListener(
  43.       "click",
  44.       function (ev) {
  45.         cl(
  46.           "冒泡阶段:" + "触发: " + ev.target.classList.item(0),
  47.           "绑定:" + ev.currentTarget.classList.item(0)
  48.         );
  49.       },
  50.       false
  51.     );
  52.   </script>
  54.   <!-- 冒泡实现事件的委托/代理 -->
  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.querySelector("ul").addEventListener("click", function (ev) {
  64.       console.log("当前触发事件的元素是:", ev.target);
  65.     });
  66.   </script>
  67. </html>

输出效果：

五、总结

1.querySelectorAll 返回的是 NodeList，但是实际上是元素集合，并且是静态的。其他接口返回的HTMLCollection和NodeList都是动态的，即取得的结果会随着相应元素的增减而增减。
2.事件传递是由外向内触发代码。
3.事件委托是由内向外触发代码。

上一条：JS基础-ajax 的基础用法/使用 ajax 实现登陆功能小实战下一条：DOM操作
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多