微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > 博客列表 > DOM操作与事件机制
博主信息
博文 43
粉丝 1
评论 0
访问量 43206
专题推荐
更多>
相关推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
DOM操作与事件机制
蔚蓝世纪
原创
825人浏览过

一、什么是 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.事件委托是由内向外触发代码。

批改老师：天蓬老师天蓬老师

批改状态：合格

老师批语：冒泡与捕获并不排斥,而是一个事物的二个过程而已
本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！
全部评论 文明上网理性发言，请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部
    • 登录PHP中文网，和优秀的人一起学习！
    全站2000+教程免费学
    微信扫码登录