简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 前端 - JS - DOM操作和事件处理
Blogger Information
Blog 33
fans 0
comment 0
visits 27665
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
前端 - JS - DOM操作和事件处理
郴
Original
670 people have browsed it

前端 - 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和事件处理的特点以及基本用法。
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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！