search

博客列表 >JavaScript表单元素获取及dom元素的操作学习

JavaScript表单元素获取及dom元素的操作学习

#三生
#三生原创
2022年01月10日 03:09:10790浏览

一. 优雅的获取表单元素

示例代码：
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  4. <head>
  5.     <meta charset="UTF-8" />
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8.     <title>获取表单元素</title>
  9.     <style>
  10.         #login {
  11.             margin-bottom: 2em;
  12.         }
  14.         .login {
  15.             width: 15em;
  16.             border: 1px solid #888;
  17.             border-radius: 0.5em;
  18.             box-shadow: 5px 5px 5px #888;
  19.             display: grid;
  20.             grid-template-columns: 3em 1fr;
  21.             gap: 0.5em 1em;
  22.         }
  24.         .login legend {
  25.             padding: 0 0.5em;
  26.             text-align: center;
  27.             margin-bottom: 0.5em;
  28.             font-weight: bolder;
  29.         }
  31.         .login button {
  32.             grid-column: 2;
  33.         }
  35.         .login button:hover {
  36.             cursor: pointer;
  37.             background-color: lightcyan;
  38.         }
  39.     </style>
  40. </head>
  42. <body>
  43.     <form action="login.php" method="post" id="login">
  44.         <fieldset class="login">
  45.             <legend>表单1</legend>
  46.             <label for="email">邮箱:</label>
  47.             <input type="email" name="email" id="email" value="admin@php.cn" autofocus />
  48.             <label for="password">密码:</label>
  49.             <input type="password" name="password" id="password" value="123456" />
  50.             <button>提交</button>
  51.         </fieldset>
  52.     </form>
  54.     <form action="login.php" method="post" id="login1">
  55.         <fieldset class="login">
  56.             <legend>表单2</legend>
  57.             <label for="email">邮箱:</label>
  58.             <input type="email" name="email" id="email" value="admin@php.cn" autofocus />
  59.             <label for="password">密码:</label>
  60.             <input type="password" name="password" id="password" value="123456" />
  61.             <button>提交</button>
  62.         </fieldset>
  63.     </form>
  64.     <script>
  65.         // 使用document.forms可获取页面所有表单
  66.         // 通过form表单的id或索引[]获取指定的表单
  67.         console.log(document.forms);
  68.         console.log(document.forms.login);
  69.         console.log(document.forms[1]);
  71.         // 获取表单内的元素，可通过元素的name值来获取：forms.表单id.元素name
  72.         console.log(document.forms.login.email);
  73.         console.log(document.forms.login.password);
  75.         // 获取表单中元素的值
  76.         console.log(document.forms.login.email.value);
  77.     </script>
  78. </body>
  80. </html>
示例图：

二. dom树的遍历与常用属性

示例代码：
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  4. <head>
  5.     <meta charset="UTF-8" />
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8.     <title>遍历DOM树</title>
  9. </head>
  11. <body>
  12.     <ol class="list">
  13.         <li class="item1">item</li>
  14.         <li class="item2">item</li>
  15.         <li class="item3">item</li>
  16.         <li class="item4">item</li>
  17.         <li class="item5">item</li>
  18.     </ol>
  19.     <script>
  20.         // 获取整个list元素
  21.         let ol = document.querySelector(".list");
  22.         console.log(ol);
  24.         //获取所有子节点元素：使用children获取到的结果是一个元素集合。
  25.         let child = ol.children;
  26.         console.log(child);
  28.         // 将元素集合转成数组
  29.         // Array.from()
  30.         console.log(Array.from(ol.children));
  31.         // ...rest
  32.         console.log([...ol.children]);
  34.         // 遍历
  35.         //第一个, firstElementChild
  36.         console.log([...ol.children][0]);
  37.         [...ol.children][0].style.color = "blue";
  38.         ol.firstElementChild.style.background = "yellow";
  40.         // 下一个兄弟, 第2个, nextElementSibling
  41.         ol.firstElementChild.nextElementSibling.style.background = "green";
  43.         // 最后一个, lastElementChild
  44.         ol.lastElementChild.style.background = "yellow";
  46.         // 前一个兄弟, previousElementSibling
  47.         ol.lastElementChild.previousElementSibling.style.background = "lightgreen";
  49.         // 父节点/元素节点, parentElment / parentNode
  50.         ol.lastElementChild.parentNode.style.border = "1px solid red";
  51.     </script>
  52. </body>
  54. </html>
示例图：

三.dom元素的增删改操作

示例代码：
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  4. <head>
  5.     <meta charset="UTF-8" />
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8.     <title>dom元素的增删改</title>
  9. </head>
  11. <body>
  12.     <script>
  13.         // 1. 创建元素
  14.         const ul = document.createElement("ul");
  15.         //给ul插入内联css
  16.         ul.style.border = "1px solid";
  17.         //给ul插入指向样式
  18.         ul.className = "content";
  20.         // 2. 添加到页面中/html中: append
  21.         document.body.append(ul);
  23.         // 3. 为ul列表添加元素
  24.         for (let i = 0; i < 5; i++) {
  25.             const li = document.createElement("li");
  26.             li.textContent = "item" + (i + 1);
  27.             ul.append(li);
  28.         }
  30.         // 4.查看元素
  31.         console.log(ul);
  32.         // outerHTML: 元素的html字符串表示
  33.         console.log(ul.outerHTML);
  35.         // 5. 在节点之前插入: before
  36.         const li = document.createElement("li");
  37.         li.textContent = "商品";
  38.         li.style.color = "red";
  39.         //在第4个元素前面插入新建的元素
  40.         //先获取第4个元素
  41.         const four = document.querySelector("ul li:nth-of-type(4)");
  42.         //插入
  43.         four.before(li);
  45.         // 6. 在节点之后插入 : after
  46.         // cloneNode(true): 克隆节点, true, 复制元素后代的内容
  47.         let cloneLi = li.cloneNode(true);
  48.         //插入
  49.         four.after(cloneLi);
  51.         // 7. 在父节点的标签为插入点,进行插入元素
  52.         // insertAdjacentElement('插入位置', 元素)
  53.         // 插入位置有四个
  54.         // afterBegin: 开始标签之后,第一个子元素
  55.         // beforeBegin: 开始标签之前,是它的前一个兄弟元素
  56.         // afterEnd: 结束标签之后,它的下一个兄弟元素
  57.         // beforeEnd: 结束标签之前,它的最后一个子元素
  59.         const h3 = document.createElement("h3");
  60.         h3.textContent = "商品列表";
  61.         ul.insertAdjacentElement("beforeBegin", h3);
  63.         const p = document.createElement("p");
  64.         p.textContent = "共计: 7 件";
  65.         ul.insertAdjacentElement("afterEnd", p);
  67.         // 8. 替换元素 replaceChild
  68.         // 1. 插入的元素
  69.         const a = document.createElement("a");
  70.         a.href = "https://php.cn";
  71.         a.textContent = "php.cn";
  72.         // 2. 执行替换第二个元素
  73.         const last = ul.lastElementChild;
  74.         ul.replaceChild(a, last);
  76.         // 9. 移除: removex
  77.         //ul.lastElementChild.remove(last);
  78.     </script>
  79. </body>
  81. </html>
示例图：

四.js操作元素内容的几个常用方法

示例代码：
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  4. <head>
  5.     <meta charset="UTF-8" />
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8.     <title>js操作元素内容</title>
  9. </head>
  11. <body>
  12.     <div class="box">
  13.         <style>
  14.             h2 {
  15.                 color: red;
  16.             }
  17.         </style>
  18.         <h2>通知</h2>
  19.         <span style="display: none">试用期员工不参加</span>
  20.         <p>今天下午17:00开会, 开发部, 运营部全体参加~~</p>
  21.     </div>
  23.     <script>
  24.         const box = document.querySelector(".box");
  26.         // textContent: 返回元素以及后代元素中的所有文本内容,包括 <style>, display:none的内容
  27.         console.log(box.textContent);
  29.         // innerText: 返回元素以及后代中的文本
  30.         console.log(box.innerText);
  32.         // innerHTML: 返回内部的html字符串
  33.         console.log(box.innerHTML);
  35.         // outerHTML: 返回当前节点的自身的html字符串
  36.         console.log(box.outerHTML);
  37.     </script>
  38. </body>
  40. </html>
示例图：

五.将留言板的实战案例进行仿写,加上一些样式

示例代码：
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  4. <head>
  5.     <meta charset="UTF-8" />
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8.     <title>dom实战: 留言板</title>
  9.     <style>
  10.         * {
  11.             padding: 0;
  12.             margin: 0;
  13.             box-sizing: border-box;
  14.         }
  16.         .content {
  17.             width: 20em;
  18.             height: 3em;
  19.             border: 2px solid green;
  20.             padding: 0 20px;
  21.             border-radius: 20px;
  22.         }
  24.         ul {
  25.             list-style: none;
  26.             background-color: yellowgreen;
  27.             width: 16.8em;
  28.             margin: -1em 0 0 1em;
  29.             border-radius: 20px;
  30.             overflow: hidden;
  31.         }
  33.         li {
  34.             height: 2.2em;
  35.             line-height: 2.2em;
  36.             border-bottom: 1px dashed rgb(253, 253, 253);
  37.             padding-left: 1em;
  38.         }
  40.         input {
  41.             margin: 2em 1em;
  42.         }
  43.     </style>
  44. </head>
  46. <body>
  47.     <!-- onkeydown: 按下键时触发 -->
  48.     <input class="content" type="text" onkeydown="addMsg(this)" placeholder="请输入留言内容" autofocus />
  49.     <ul class="list"></ul>
  51.     <script>
  52.         function addMsg(ele) {
  53.             // 判断按键，如果是回车键则执行添加留言
  54.             if (event.key === "Enter") {
  55.                 // 1. 获取留言列表的容器
  56.                 const ul = document.querySelector(".list");
  58.                 // 2. 判断留言是否为空?
  59.                 if (ele.value.length === 0) {
  60.                     alert("留言内容不能为空");
  61.                     ele.focus();
  62.                     return false;
  63.                 }
  65.                 // 3. 添加一条新留言
  66.                 const li = document.createElement("li");
  67.                 // 添加删除留言功能
  68.                 li.innerHTML = ele.value + "<button onclick='del(this.parentNode)'>删除</button>";
  69.                 // 根据留言规则，最新的一条显示在最上面
  70.                 ul.insertAdjacentElement("afterBegin", li);
  72.                 // 4. 清空留言的输入框,为下一次做准备
  73.                 ele.value = null;
  75.                 // 5. 重置焦点到留言框中,方便用户更次输入
  76.                 ele.focus();
  77.             }
  78.         }
  80.         // 删除功能
  81.         function del(ele) {
  82.             return confirm("是否删除?") ? ele.remove() : false;
  83.         }
  84.     </script>
  85. </body>
  87. </html>
示例图：

六.dataset对象

元素属性有二类:
  1. 内置的预定义属性, 如 id, class,title,style等
  2. 用户自定义属性,主要用于js脚本控制, 以 “data-“”为前缀,如 data-key 
  1. <div class="btn-group">
  2.     <!-- onclick: 内置/预定义事件属性 -->
  3.     <!-- data-index: 自定义属性 -->
  4.     <button data-index="1" onclick="getIndex(this)">btn1</button>
  5.     <button data-index="2" onclick="getIndex(this)">btn2</button>
  6.     <button data-index="3" onclick="getIndex(this)">btn3</button>
  7. </div>
  8. <script>
  9.     function getIndex(btn) {
  10.         // 通过自定义属性data-index的值,知道我点的是哪一个?
  11.         // dataset.prop, "data-"一定要省略掉
  12.         console.log("点击了第 ", btn.dataset.index, " 个按钮");
  13.     }
  14. </script>
  16. <!-- 自定义属性还可以将一些数据保存到标签中 -->
  17. <!-- data-emial, data-work-unit  -->
  18. <div class="user" data-email="88888@qq.com" data-work-unit="php中文网">老师</div>
  20. <script>
  21.     const user = document.querySelector(".user");
  22.     console.log(user.dataset.email);
  23.     console.log(user.dataset.workUnit);
  24. </script>

七.获取元素的计算样式

示例代码：
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  4. <head>
  5.     <meta charset="UTF-8" />
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8.     <title>获取元素的计算样式</title>
  9.     <style>
  10.         .box {
  11.             width: 150px;
  12.             height: 100px;
  13.         }
  14.     </style>
  15. </head>
  17. <body>
  18.     <div class="box" style="color: green; background-color: lightblue">Hello World!</div>
  19.     <script>
  20.         const div = document.querySelector("div");
  21.         // 行内样式,style
  22.         console.log(div.style.color);
  23.         console.log(div.style.backgroundColor);
  25.         // 计算样式: 内部<style>或外部 如 style.css
  26.         console.log(window.getComputedStyle(div).width);
  27.         console.log(window.getComputedStyle(div).height);
  28.         console.log(window.getComputedStyle(div).backgroundColor);
  29.     </script>
  30. </body>
  32. </html>
示例图：

八.classList 对象常用方法

示例代码：
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  4. <head>
  5.     <meta charset="UTF-8" />
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8.     <title>js操作class属性: classList对象</title>
  9.     <style>
  10.         .red {
  11.             color: red;
  12.         }
  14.         .bgc {
  15.             background-color: yellow;
  16.         }
  18.         .blue {
  19.             color: blue;
  20.         }
  22.         .bd {
  23.             border: 5px solid #000;
  24.         }
  25.     </style>
  26. </head>
  28. <body>
  29.     <h2>hello</h2>
  30.     <script>
  31.         const h2 = document.querySelector("h2");
  33.         // add: 添加class,可以叠加
  34.         h2.classList.add("red"); // color: red;
  35.         h2.classList.add("bgc"); //background-color: yellow;
  37.         // remove: 移除class
  38.         //h2.classList.remove("bgc");
  40.         // replace: 替换class
  41.         //h2.classList.replace("red", "blue");
  43.         // toggle: 切换 class
  44.         // 如果已存在 bd, 则执行remove 移除操作, 否则执行 add 添加操作
  45.         h2.classList.toggle("bd");
  46.     </script>
  47. </body>
  49. </html>
示例图：

九.事件的添加与派发

示例代码：
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  4. <head>
  5.     <meta charset="UTF-8" />
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8.     <title>事件的添加与删除</title>
  9. </head>
  11. <body>
  12.     <button>元素对象</button>
  13.     <button>元素事件监听器</button>
  14.     <button>事件派发/点击广告赚钱</button>
  15.     <script>
  16.         // 1.先获取元素，然后通过元素.onclick(){}进行添加
  17.         const btn1 = document.querySelector("button:first-of-type");
  18.         btn1.onclick = function() {
  19.             console.log(event);
  20.         };
  21.         // 删除事件：null
  22.         // btn1.onclick = null;
  24.         // 2.事件监听器
  25.         const btn2 = document.querySelector("button:nth-of-type(2)");
  26.         function show() {
  27.             console.log(event);
  28.         }
  29.         // 事件回调方法不能移除,必须是命名函数才可以
  30.         btn2.addEventListener("click", show, false);
  31.         // 移除事件
  32.         //btn2.removeEventListener("click", show, false);
  34.         //3.事件派发
  35.         const btn3 = document.querySelector("button:nth-of-type(3)");
  36.         //   先添加一个事件,然后自动去的触发它
  37.         let i = 0;
  38.         btn3.addEventListener(
  39.             "click",
  40.             () => {
  41.                 console.log("恭喜你,又赚了 : " + i + "元");
  42.                 i += 0.8;
  43.             },
  44.             false
  45.         );
  46.         // 创建一个自定义事件
  47.         const myclick = new Event("click");
  48.         setInterval(() => btn3.dispatchEvent(myclick), 2000);
  49.     </script>
  50. </body>
  52. </html>
上一条：模板字面量和闭包函数下一条：javascript数组常用得api与表单事件实例
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议