ASCII码 ASCII码

JS获取表单元素、dom树遍历增删改、操作元素内容、自定义属性、操作css、事件小结

发布于：2022-01-19 09:06:45  栏目：技术文档
  1. 实例演示如何正确优雅的获取表单元素 2. 实例演示dom树的遍历与常用属性 3. 实例演示dom元素的增删改操作 4. js操作元素内容的几个常用方法,并分析异同 5. 将留言板的实战案例进行仿写,加上一些样式 6. 实例演示 dataset对象 7. 实例演示如何获取元素的计算样式 8. 实例演示 classList 对象常用方法 9. 实例演示事件的添加与派发

1. 获取表单元素

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>获取表单元素</title>
  8.   </head>
  9.   <body>
  10.     <style>
  11.       .form {
  12.         width: 20em;
  13.         display: grid;
  14.         grid-template-columns: 1fr;
  15.         gap: 0.5em 1em;
  16.       }
  17.       input {
  18.         text-align: center;
  19.       }
  20.     </style>
  21.     <form class="form" id="form">
  22.       <input type="text" name="user" placeholder="输入用户名" />
  23.       <input type="text" name="pass" placeholder="输入密码" />
  24.       <button>提交</button>
  25.       <script>
  26.         //   传统获取方式：上一课讲的两个API
  27.         // 获取表单
  28.         let form = document.querySelector(".form");
  29.         // 获取用户
  30.         let user = document.querySelector("input[name='user']");
  31.         // 获取密码
  32.         let pass = document.querySelector("input[name='pass']");
  33.         console.log(form);
  34.         console.log(user);
  35.         console.log(pass);
  37.         // 推荐方式：用document.forms属性.name属性值(或id值)
  38.         user = document.forms.form.user;
  39.         pass = document.forms.form.pass;
  40.         user.value = "超人";
  41.         pass.value = "123456789";
  43.         // 前后端数据交互、
  44.         form = document.forms.form;
  45.         user = form.user.value;
  46.         pass = form.pass.value;
  47.         // 转为json
  48.         let users = { user, pass };
  49.         // 用函数转为json字符串
  50.         let data = JSON.stringify(users);
  51.         console.log(data);
  52.       </script>
  53.     </form>
  54.   </body>
  55. </html>

2. dom树的遍历

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>遍历DOM树</title>
  8.   </head>
  9.   <body>
  10.     <ul class="list">
  11.       <li class="item">项目1</li>
  12.       <li class="item">项目2</li>
  13.       <li class="item">项目3</li>
  14.       <li class="item">项目4</li>
  15.       <li class="item">项目5</li>
  16.       <li class="item">项目6</li>
  17.     </ul>
  18.     <script>
  19.       //   1. 节点类型：元素、文本、属性、注释、文档
  20.       // 通常只关注元素类型
  21.       let Ul = document.querySelector(".list");
  22.       let items = Ul.children;
  23.       //   上条获得的items类型是HTMLCollection
  24.       //   获得的是类数组，不是数组，不能用数组的方法
  25.       //   类数组特征：
  26.       // 有从0开始递增的正整数索引
  27.       // 有length属性
  28.       console.log(items);
  30.       //   2. 转化为真数组
  31.       //   2.1 用函数转化
  32.       let Li = Array.from(items);
  33.       //   现在items类型是Array数组了，可以用数组的方法引用
  34.       console.log(Li);
  35.       //   2.2 用...rest转化
  36.       let Li_items = [...items];
  37.       console.log(Li_items);
  38.       Li[0].style.fontSize = "3em";
  40.       //   3. 用语法糖遍历
  41.       //   第一个子元素
  42.       Ul.firstElementChild.style.color = "red";
  43.       //   下一个兄弟元素
  44.       Ul.firstElementChild.nextElementSibling.style.color = "blue";
  45.       //   最后一个子元素
  46.       Ul.lastElementChild.style.fontSize = "2em";
  47.       //   前一个兄弟元素
  48.       Ul.lastElementChild.previousElementSibling.style.color = "red";
  50.     </script>
  51.   </body>
  52. </html>
  • 我个人觉得数组好用，老师说语法糖比较优雅

3. dom元素的增删改

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>dom元素的增删改</title>
  8.   </head>
  9.   <body>
  10.     <script>
  11.       // 1. 创建元素
  12.       const h3 = document.createElement("h3");
  13.       //   2.添加到页面中
  14.       document.body.append(h3);
  15.       h3.textContent = "创建的元素";
  17.       // 创建ul元素
  18.       const ul = document.createElement("ul");
  19.       document.body.append(ul);
  20.       // 创建列表项
  21.       for (i = 0; i < 6; i++) {
  22.         const li = document.createElement("li");
  23.         li.textContent = "项目" + (i + 1);
  24.         ul.append(li);
  25.       }
  26.       console.log(ul);
  27.       console.log(ul.outerHTML);
  29.       // 3. 插入节点
  30.       // 示例：在第四个节点前后插入列表项
  31.       const li = document.createElement("li");
  32.       // 设置列表内容和样式
  33.       li.textContent = "新的项目";
  34.       li.style.fontSize = "3em";
  35.       // 获取第四个节点
  36.       const li_four = document.querySelector("li:nth-of-type(4)");
  37.       // 在节点前插入新列表项
  38.       li_four.before(li);
  39.       // 克隆列表，用colenNode方法，true复制后代内容，即文本
  40.       const li_copy = li.cloneNode(true);
  41.       // 在节点后插入
  42.       li_four.after(li_copy);
  44.       // 以父节点标签为插入点，进行插入元素示例
  45.       // 语法：insertAdjacentElement('插入位置',元素)
  46.       // 插入位置有四个：可以不分大小写
  47.       // afterBegin:开始标签后的第一个子元素
  48.       // beforeBegin:开始标签之前的兄弟元素
  49.       // afterEnd：结束标签之后的兄弟元素
  50.       // beforeEnd：结束标签之前的子元素
  51.       // 例：在上面列表前插入h4
  52.       const h4 = document.createElement("h4");
  53.       h4.textContent = "新列表";
  54.       ul.insertAdjacentElement("beforebegin", h4);
  55.       // 例：在列表后插入p
  56.       const p = document.createElement("p");
  57.       p.textContent = "共计8个项目";
  58.       ul.insertAdjacentElement("afterEnd", p);
  60.       // 4. 替换节点语法： replaceChild(新节点，替换的节点)
  61.       // 获取要替换的节点
  62.       const li_replace = document.querySelector("li:nth-of-type(8)");
  63.       // 创建要替换的元素
  64.       const a = document.createElement("a");
  65.       a.textContent = "php.cn";
  66.       a.href = "https://php.cn";
  67.       // 调用函数替换
  68.       ul.replaceChild(a, li_replace);
  70.       // 5. 删除节点：获取要删除的节点，使用 remove()方法
  71.       document.querySelector("li:nth-of-type(7)").remove();
  72.     </script>
  73.   </body>
  74. </html>

4. js操作元素内容

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>js操作元素内容</title>
  8.   </head>
  9.   <body>
  10.     <div class="box">
  11.       <style>
  12.         h3 {
  13.           color: crimson;
  14.         }
  15.       </style>
  16.       <h3>聚餐通知</h3>
  17.       <p>公司全体员工：</p>
  18.       <p>今天晚上全体在食堂聚餐，加菜，全羊宴！</p>
  19.     </div>
  20.     <script>
  21.       // 查看元素内容textContent、innerHtml、innerText的不同
  22.       const div = document.querySelector(".box");
  23.       //   textContent：返回元素及后代元素中所有文本内容，包括h3样式的内容
  24.       console.log(div.textContent);
  25.       //   innerHTML：返回文本内容包含标签字符串
  26.       console.log(div.innerHTML);
  27.       //   innerText：只返回元素以及后代中的文本
  28.       console.log(div.innerText);
  29.       //   outerHTML：返回当前节点的html字符串
  30.       console.log(div.outerHTML);
  31.       //   小结：首选textContent
  33.       //   清空
  34.       div.outerHTML = null;
  35.     </script>
  36.   </body>
  37. </html>

5. DOM实战：留言板

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>DOM实战：留言板</title>
  8.   </head>
  9.   <body>
  10.     <style>
  11.       input {
  12.         width: 30em;
  13.         height: 1.5rem;
  14.       }
  15.       li {
  16.         margin: 0.4em;
  17.       }
  18.     </style>
  19.     <!-- 按下键时触发 -->
  20.     <input type="text" placeholder="输入留言" onkeydown="addMsg(this)" />
  21.     <hr />
  22.     <p>留言：</p>
  23.     <ul class="msgList"></ul>
  25.     <script>
  26.       // 定义触发函数，接收传递的元素
  27.       function addMsg(inputText) {
  28.         // 判断按下的键是否是回车，回车就记录输入的留言。
  29.         // 用event对象的key值是否是“enter”判断
  30.         // event对象包含当前事件的所有信息，是当前事件的对象
  31.         if (event.key === "Enter") {
  32.           // 判断留言是否为空。这个判断语句不完善，根据长度判断也不完善
  33.           if (inputText.value === "") {
  34.             alert("留言不能为空");
  35.             // 重新激活输入框
  36.             inputText.focus();
  37.             return false;
  38.           }
  39.           // 获取留言列表
  40.           const ul_Msg = document.querySelector(".msgList");
  41.           // 添加留言，带删除按键，调用删除函数。
  42.           const li = document.createElement("li");
  43.           li.innerHTML = `${inputText.value}<button onclick="del(this.parentNode)">删除</button>`;
  44.           // 留言添加到ul开始元素后面，这样确保最新留言在最前
  45.           ul_Msg.insertAdjacentElement("afterbegin", li);
  46.           // 清空留言框
  47.           inputText.value = null;
  48.           // 重新激留言框
  49.           inputText.focus();
  50.         }
  51.       }
  53.       // 定义删除函数，接收传递的li删除
  54.       function del(li_del) {
  55.         // 删除前用户确认，用函数confirm("提示信息")
  56.         // 点确定返回true，点取消返回false
  57.         return confirm("是否删除此留言？") ? li_del.remove() : false;
  58.       }
  59.     </script>
  60.   </body>
  61. </html>

6. 自定义属性: dataset对象

元素属性有二类:

  • 内置的预定义属性, 如 id, class,title,style等
  • 用户自定义属性,主要用于js脚本控制, 以 “data-“”为前缀,如 data-key
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8" />
    5.   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7.   <title>自定义属性: dataset对象</title>
    8. </head>
    9. <body>
    10.   <!-- 根据按钮显示自定义属性的值 -->
    11.   <div class="btn-group">
    12.     <!-- 用data-value自定义属性存放值 -->
    13.     <button data-index-value="1号" onclick="getValue(this)">按键1</button>
    14.     <button data-index-value="2号" onclick="getValue(this)">按键2</button>
    15.     <button data-index-value="3号" onclick="getValue(this)">按键3</button>
    16.   </div>
    17.   <p data-value="php.cn"></p>
    18.   <script>
    19.     function getValue(value) {
    20.       //   自定义属性使用dataset.属性名调用
    21.       // 属性名有-符号时改为驼峰写法
    22.       alert(`点击的是${value.dataset.indexValue}按钮`);
    23.     }
    24.     //   自定义属性可读可写
    25.     const p = document.querySelector("p");
    26.     p.dataset.value = "php中文网";
    27.     console.log(p.dataset.value);
    28.   </script>
    29. </body>
    30. </html>

7. js操作css

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>js操作css</title>
  8.   </head>
  9.   <body>
  10.     <style>
  11.       div {
  12.         width: 20em;
  13.       }
  14.     </style>
  15.     <div style="font-size: 2em; color: chocolate"></div>
  16.     <script>
  17.       let div = document.querySelector("div");
  18.       // 获取行内样式
  19.       console.log(div.style.fontSize);
  20.       //   计算样式：指内部style标签样式或外部css文件样式
  21.       // 获取外部样式，用全局方法window.getComputedStyle(标签，伪元素)
  22.       console.log(window.getComputedStyle(div).width);
  24.       //   操作：宽度加100px
  25.       let width = window.getComputedStyle(div).width;
  26.       // 得到的宽度是字符串，用parseInt()函数提取出数字
  27.       width = parseInt(width) + 100 + "px";
  28.       // 在行内样式中加入样式
  29.       div.style.width = width;
  30.       console.log(div.style.width);
  31.     </script>
  32.   </body>
  33. </html>

8. js操作class属性: classList对象

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>js操作class属性: classList对象</title>
  8.   </head>
  9.   <body>
  10.     <h2>学习php</h2>
  11.     <style>
  12.       .red {
  13.         color: red;
  14.       }
  15.       .bg-yello {
  16.         background-color: yellow;
  17.       }
  18.       .turquoise {
  19.         color: turquoise;
  20.       }
  21.     </style>
  22.     <script>
  23.       // 1. 用传统方式添加样式
  24.       let h2 = document.querySelector("h2");
  25.       h2.className = "red bg-yello";
  27.       //   2. 用classList对象
  28.       // 添加样式：add方法
  29.       h2.classList.add("turquoise");
  30.       //   判断样式是否存在：contains方法
  31.       console.log(h2.classList.contains("red"));
  32.       //   移除样式
  33.       h2.classList.remove("bg-yello");
  34.       //   替换样式：方法replace(要替换的样式名，替换样式)
  35.       h2.classList.replace("turquoise", "red");
  36.       //   切换样式：toggle方法
  37.       //   如果要切换的样式已存在，则移除，否则添加
  38.       // 如red样式上条语句已生效，则下面语句变为移除red样式
  39.       h2.classList.toggle("red");
  40.     </script>
  41.   </body>
  42. </html>

9. 事件的添加与删除

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>事件的添加与删除</title>
  8.   </head>
  9.   <body>
  10.     <button>开始</button>
  11.     <button>事件监听</button>
  12.     <button>事件派发</button>
  13.     <script>
  14.       // 获取元素
  15.       const btn1 = document.querySelector("button:first-of-type");
  16.       // 添加点击事件
  17.       btn1.onclick = () => {
  18.         console.log(event);
  19.       };
  20.       //   删除事件
  21.       btn1.onclick = null;
  23.       //   事件监听器
  24.       //   获取元素
  25.       const btn2 = document.querySelector("button:nth-of-type(2)");
  26.       // 监听事件addEventListener("监听事件",动作,false)，false表示冒泡事件
  27.       btn2.addEventListener("click", show, false);
  28.       //   删除事件
  29.       btn2.removeEventListener("click", show, false);
  30.       function show() {
  31.         console.log(event);
  32.       }
  34.       //   事件派发：事件发生时，自动触发动作
  35.       btn3 = document.querySelector("button:nth-of-type(3)");
  36.       //   监听事件，自调用
  37.       let i = 0;
  38.       btn3.addEventListener(
  39.         "click",
  40.         () => {
  41.           console.log(`点赞${++i}个`);
  42.         },
  43.         false
  44.       );
  46.       //   创建自定义事件，通过event对象
  47.       const myClick = new Event("click");
  48.       // 触发3次自定义事件
  49.       btn3.dispatchEvent(myClick);
  50.       btn3.dispatchEvent(myClick);
  51.       btn3.dispatchEvent(myClick);
  52.       //   用一次性定时器触发1500毫秒
  53.       setTimeout(() => {
  54.         btn3.dispatchEvent(myClick);
  55.       }, 1500);
  56.       // 用间歇定时器触发
  57.       setInterval(() => {
  58.         btn3.dispatchEvent(myClick);
  59.       }, 1500);
  60.     </script>
  61.   </body>
  62. </html>
相关推荐
阅读 +

© 2020 asciim码

人生就是一场修行