简体中文（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

博客列表 >前端 - JS - DOM操作和事件处理

前端 - JS - DOM操作和事件处理

郴
郴原创
2020年06月24日 12:59:31669浏览

前端 - JS - DOM操作和事件处理

一、DOM操作

  • 节点：html文档中所有内容都是节点

  • 节点树：DOM树

  • 节点类型：1.元素，2.属性，3.文本，6.注释，9.文档，11.文档片断，其余为XML节点

  • 节点集合类型：NodeList（节点列表）和HTMLCollection（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>Document</title>
  7. </head>
  8. <body>
  9.     <form action="" id="f1">
  10.         <input type="text" name="username" id="username">
  11.     </form>
  12.     <form action="" id="f2">
  13.         <input type="text" name="username" id="username">
  14.     </form>
  15.     <form action="" id="f3">
  16.         <input type="text" name="password" id="password">
  17.     </form>
  18.     <ul class="u">
  19.         <li class="uli">列表项1</li>
  20.         <li class="uli">列表项2</li>
  21.         <li class="uli">列表项3</li>
  22.         <li class="uli">列表项4</li>
  23.     </ul>
  24.     <ol class="o">
  25.         <li class="oli">列表项1</li>
  26.         <li class="oli">列表项2</li>
  27.         <li class="oli">列表项3</li>
  28.         <li class="oli">列表项4</li>
  29.     </ol>
  30.     <script>
  31.         //获取文档类型对象
  32.         console.log(document.doctype);
  33.         //获取html元素
  34.         console.log(document.documentElement);
  35.         //获取head元素
  36.         console.log(document.head);
  37.         //获取body元素
  38.         console.log(document.body);
  39.         //获取title元素
  40.         console.log(document.title);
  41.         //获取表单元素集合，节点集合类型为HTMLCollection
  42.         console.log(document.forms);
  44.         // 1. 根据标签获取，返回HTMLCollection对象
  45.         console.log(document.getElementsByTagName("ul"));
  46.         console.log(document.getElementsByTagName("form"));
  47.         // 2. 根据id获取
  48.         console.log(document.getElementById("f1"));
  49.         // 3. 根据类获取，返回HTMLCollection对象
  50.         console.log(document.getElementsByClassName("u"));
  51.         console.log(document.getElementsByClassName("oli"));
  52.         // 4. 根据name属性获取，返回NodeList对象
  53.         console.log(document.getElementsByName("password"));
  54.         console.log(document.getElementsByName("username"));
  55.         // 5. 根据CSS选择器获取，返回NodeList对象
  56.         console.log(document.querySelector(".uli"));
  57.         console.log(document.querySelectorAll(".uli"));
  59.         //1. 获取前一个相邻节点和获取前一个兄弟节点
  60.         console.log(document.getElementsByTagName("ol")[0].previousSibling);
  61.         console.log(document.getElementsByTagName("ol")[0].previousElementSibling);
  62.         //2. 获取下一个相邻节点和获取下一个兄弟节点
  63.         console.log(document.getElementsByTagName("ol")[0].nextSibling);
  64.         console.log(document.getElementsByTagName("ol")[0].nextElementSibling);
  65.         //3. 获取子节点，返回NodeList对象
  66.         console.log(document.getElementsByTagName("ol")[0].childNodes);
  67.         //4. 获取子节点，返回HTMLCollection对象
  68.         console.log(document.getElementsByTagName("ol")[0].children);
  69.         //5. 获取第一个子节点和获取第一个元素节点
  70.         console.log(document.getElementsByTagName("ol")[0].firstChild);
  71.         console.log(document.getElementsByTagName("ol")[0].firstElementChild);
  72.         //5. 获取最后一个子节点和获取最后一个元素节点
  73.         console.log(document.getElementsByTagName("ol")[0].lastChild);
  74.         console.log(document.getElementsByTagName("ol")[0].lastElementChild);
  76.         //获取某个元素的属性节点，返回NamedNodeMap对象
  77.         console.log(document.getElementById("f1").attributes);
  78.     </script>
  79. </body>
  80. </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>Document</title>
  7.   </head>
  8.   <body>
  9.     <form action="" id="f1">
  10.       <input type="submit" value="提交" />
  11.     </form>
  12.     <form action="" id="f2">
  13.       <input type="text" name="username" id="username" />
  14.     </form>
  15.     <form action="" id="f3">
  16.       <input type="text" name="password" id="password" />
  17.     </form>
  18.     <button>重置</button>
  19.     <ul class="u">
  20.       <li class="uli">列表项1</li>
  21.       <li class="uli">列表项2</li>
  22.       <li class="uli">列表项3</li>
  23.       <li class="uli">列表项4</li>
  24.     </ul>
  25.     <ol class="o">
  26.       <li class="oli">列表项1</li>
  27.       <li class="oli">列表项2</li>
  28.       <li class="oli">列表项3</li>
  29.       <li class="oli">列表项4</li>
  30.     </ol>
  31.     <script>
  32.       //1. 返回节点类型、节点名称
  33.       console.log(document.getElementsByClassName("uli")[0].nodeType);
  34.       console.log(document.getElementsByClassName("uli")[0].nodeName);
  36.       //2. 返回节点的值
  37.       //文本节点的内容
  38.       console.log(
  39.         document.getElementsByTagName("button")[0].childNodes[0].nodeValue
  40.       );
  41.       //属性节点的值
  42.       console.log(
  43.         document.getElementsByTagName("input")[0].getAttributeNode("value")
  44.           .nodeValue
  45.       );
  46.       //value属性的值
  47.       console.log(document.getElementsByTagName("input")[0].value);
  49.       // 3. 创建节点
  50.       //创建元素节点
  51.       var li = document.createElement("li");
  52.       console.log(li);
  53.       //创建文本节点
  54.       var text = document.createTextNode("列表项5");
  55.       console.log(text);
  56.       //创建属性节点
  57.       var att = document.createAttribute("style");
  58.       att.nodeValue = "color:red";
  59.       console.log(att);
  61.       // 4. 增加子节点
  62.       //增加文本节点
  63.       li.appendChild(text);
  64.       console.log(li);
  65.       var ol = document.querySelector(".u");
  66.       //增加子节点
  67.       ol.appendChild(li);
  68.       //增加属性节点
  69.       ol.attributes.setNamedItem(att);
  71.       // 5. 插入子节点
  72.       var li1 = document.createElement("li");
  73.       var text1 = document.createTextNode("列表项6");
  74.       li1.appendChild(text1);
  75.       ol.insertBefore(li1, ol.childNodes[2]);
  76.       console.log(ol);
  78.       // 6. 删除节点
  79.       //删除子节点
  80.       ol.removeChild(ol.childNodes[1]);
  81.       //删除属性节点
  82.       ol.removeAttributeNode(att);
  83.       // 7. 修改节点的值
  84.       document.getElementsByTagName("input")[0].value = "修改";
  85.       // 8. 替换/更新节点
  86.       var li2 = document.createElement("li");
  87.       var text2 = document.createTextNode("列表项7");
  88.       li2.appendChild(text2);
  89.       ol.replaceChild(li2, ol.children[0]);
  90.       console.log(ol.children);
  91.       // 9. 查询是否含有子节点
  92.       console.log(ol.hasChildNodes());
  94.           //获取子元素
  95.     console.log(document.getElementsByTagName("ol")[0].children);
  97.     //获取属性节点的值
  98.     console.log(
  99.       document.getElementsByTagName("input")[0].getAttribute("value")
  100.     );
  102.     // 3. 创建节点
  103.     //创建元素节点
  104.     var li = document.createElement("li");
  105.     console.log(li);
  106.     </script>
  107.   </body>
  108. </html>

3. NodeList和HTMLCollection的区别

  • 相同点：都是类数组，都可以通过索引获取元素，索引从0开始，都有length属性

  • 不同点：

  1. 1. 获取方法不同。前者通过querySelectorAll获取的文档节点，后者通过类名和标签获取的HTML元素
  2. 2. 获取节点元素方法不同。前者只能通过索引获取，后者还可通过name和id（namedItem()方法）获取
  3. 3. 前者包含所有的节点类型，后者只包含元素节点

4. DOMTokenList（元素类名列表）

  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 class="u">
  10.       <li class="uli">列表项1</li>
  11.       <li class="uli">列表项2</li>
  12.       <li class="uli">列表项3</li>
  13.       <li class="uli">列表项4</li>
  14.     </ul>
  15.     <ol class="o">
  16.       <li class="oli">列表项1</li>
  17.       <li class="oli">列表项2</li>
  18.       <li class="oli">列表项3</li>
  19.       <li class="oli">列表项4</li>
  20.     </ol>
  21.   </body>
  22.   <script>
  23.     //获取类名
  24.     console.log(document.getElementsByClassName("u")[0].className);
  25.     //获取classList对象
  26.     console.log(document.getElementsByClassName("u")[0].classList);
  27.     //增加类名
  28.     document.getElementsByClassName("u")[0].classList.add("u01");
  29.     //删除类名
  30.     document.getElementsByClassName("u")[0].classList.remove("u01");
  31.     //修改类名
  32.     document.getElementsByClassName("u")[0].classList.replace("u", "u01");
  33.   </script>
  34. </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>Document</title>
  7.   </head>
  8.   <body>
  9.     <button onclick="alert('hello')">按钮1</button>
  10.     <button>按钮2</button>
  11.     <button>按钮3</button>
  12.     <div class="d1">
  13.       <div class="d2">
  14.         <div class="d3"></div>
  15.       </div>
  16.     </div>
  17.   </body>
  18.   <script>
  19.     //添加事件方式1：给html元素绑定事件属性
  20.     //添加事件方式2：给html元素添加事件属性
  21.     var bth2 = document.querySelectorAll("button")[1];
  22.     bth2.onclick = function () {
  23.       alert(this.nodeName);
  24.     };
  25.     //添加事件方式3：监听html元素
  26.     var bth3 = document.querySelectorAll("button")[2];
  27.     bth3.addEventListener(
  28.       "click",
  29.       function () {
  30.         alert("world");
  31.       },
  32.       false
  33.     );
  34.   </script>
  35. </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>Document</title>
  7.   </head>
  8.   <body>
  9.     <button>按钮</button>
  10.   </body>
  11.   <script>
  12.     var bth = document.querySelector("button");
  13.     bth.addEventListener(
  14.       "click",
  15.       function () {
  16.         alert("hello");
  17.       },
  18.       false
  19.     );
  20.     //创建一个事件
  21.     var ev = new Event("click");
  22.     //向一个目标派发一个事件
  23.     bth.dispatchEvent(ev);
  24.   </script>
  25. </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>Document</title>
  7.   </head>
  8.   <body>
  9.     <div class="d1">
  10.         <div class="d2">
  11.           <div class="d3">
  12.               <button>按钮</button>
  13.               <div class="d4">
  14.                   <div class="d5"></div>
  15.               </div>
  16.           </div>
  17.         </div>
  18.   </body>
  19.   <script>
  20.       var d1 = document.getElementsByClassName("d1")[0];
  21.       var d2 = document.getElementsByClassName("d2")[0];
  22.       var d3 = document.getElementsByClassName("d3")[0];
  23.       var d4 = document.getElementsByClassName("d4")[0];
  24.       var d5 = document.getElementsByClassName("d5")[0];
  25.       //事件捕获
  26.       d1.addEventListener(
  27.           "click",
  28.           function (ev) { console.log('d1') },
  29.           true
  30.       );
  31.       d2.addEventListener(
  32.           "click",
  33.           function (ev) { console.log('d2') },
  34.           true
  35.       );
  36.       d3.addEventListener(
  37.           "click",
  38.           function (ev) { console.log('d3') },
  39.           true
  40.       );
  41.       d4.addEventListener(
  42.           "click",
  43.           function (ev) { console.log('d4') },
  44.           true
  45.       );
  46.       d5.addEventListener(
  47.           "click",
  48.           function (ev) { console.log('d5') },
  49.           true
  50.       );
  51.   </script>
  52. </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>Document</title>
  7.   </head>
  8.   <body>
  9.     <div class="d1">
  10.         <div class="d2">
  11.           <div class="d3">
  12.               <button>按钮</button>
  13.               <div class="d4">
  14.                   <div class="d5"></div>
  15.               </div>
  16.           </div>
  17.         </div>
  18.   </body>
  19.   <script>
  20.       var d1 = document.getElementsByClassName("d1")[0];
  21.       var d2 = document.getElementsByClassName("d2")[0];
  22.       var d3 = document.getElementsByClassName("d3")[0];
  23.       var d4 = document.getElementsByClassName("d4")[0];
  24.       var d5 = document.getElementsByClassName("d5")[0];
  25.       //事件冒泡
  26.       d1.addEventListener(
  27.           "click",
  28.           function (ev) { console.log('d1') },
  29.           false
  30.       );
  31.       d2.addEventListener(
  32.           "click",
  33.           function (ev) { console.log('d2') },
  34.           false
  35.       );
  36.       d3.addEventListener(
  37.           "click",
  38.           function (ev) { console.log('d3') },
  39.           false
  40.       );
  41.       d4.addEventListener(
  42.           "click",
  43.           function (ev) { console.log('d4') },
  44.           false
  45.       );
  46.       d5.addEventListener(
  47.           "click",
  48.           function (ev) { console.log('d5') },
  49.           false
  50.       );
  51.   </script>
  52. </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>Document</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.     //子元素上的事件会冒泡到父元素上的同名事件上触发
  19.     document.querySelector("ul").addEventListener("click", function (ev) {
  20.       console.log(ev.target);
  21.     });
  22.   </script>
  23. </html>

四、课程总结

  • 今天学习了 JavaScript 的DOM操作和事件处理，通过上课认真听讲和认真完成老师布置的作业，使得我对 DOM和事件 的理解和运用更加深入和熟悉。最主要的知识点是明白和掌握了操作DOM和事件处理的特点以及基本用法。
上一条：前端 - JS - 实战案例下一条：Flex布局
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多