获取表单元素

  • document.forms: 获取页面所有表单
  • form.id: 获取元素
  • form.id.name: 获取元素
  • form.id.name.value: 获取元素值
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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.     <style>
  9.       .login {
  10.         width: 15em;
  11.         border: 1px solid #888;
  12.         border-radius: 0.5em;
  13.         box-shadow: 5px 5px 5px #888;
  14.         display: grid;
  15.         grid-template-columns: 3em 1fr;
  16.         gap: 0.5em 1em;
  17.       }
  18.       .login legend {
  19.         padding: 0 0.5em;
  20.         text-align: center;
  21.         margin-bottom: 0.5em;
  22.         font-weight: bolder;
  23.       }
  24.       .login button {
  25.         grid-column: 2;
  26.       }
  27.       .login button:hover {
  28.         cursor: pointer;
  29.         background-color: lightcyan;
  30.       }
  31.     </style>
  32.   </head>
  33.   <body>
  34.     <form action="login.php" method="post" id="login">
  35.       <fieldset class="login">
  36.         <legend>请登录</legend>
  37.         <label for="email">邮箱:</label>
  38.         <input type="email" name="email" id="email" value="help_10086@foxmail.com" autofocus />
  39.         <label for="password">密码:</label>
  40.         <input type="password" name="password" id="password" value="zh10086" />
  41.         <button>提交</button>
  42.       </fieldset>
  43.     </form>
  44.     <script>
  46.         // 获取表单元素方式
  47.         // console.log(document.forms[0]);
  48.         // form.id
  49.         // console.log(document.forms.login);
  50.         // input:name,此时 name 相当于 id
  51.         // console.log(document.forms.login.email);
  52.         // value
  53.         // console.log(document.forms.login.email.value);
  55.         // 前后端数据交互, json
  56.         let login = document.forms.login;
  57.         let email = login.email.value;
  58.         let password = login.password.value;
  59.         console.log(email, password);
  61.       //   let user = { email: email, password: password };
  62.       let user = { email, password };
  64.       // 提交到服务器端/后端: json
  65.       let data = JSON.stringify(user, null, 2);
  66.       console.log(data);
  67.     </script>
  68.   </body>
  69. </html>

dom 树的遍历与常用属性

  • 节点类型:元素, 文本, 属性, 注释,文档…,通常只关注元素类型
  • 类数组: “类似”数组,像数组,但不是真正的数组,所以不能用数组上的方法类数组特征:
    • 具有从 0 开始递增的正整数索引
    • 具有 length 属性, 表示成员数量
  1. let list = document.querySelector(".list");
  2. // childNodes 所有类型元素
  3. console.log(list.childNodes);
  4. // children 元素类型元素
  5. console.log(list.children);
  7. // 类数组 ==> 真数组
  8. // 2.1 Array.from()
  9. console.log(Array.from(list.children));
  10. // 2.2 ...rest
  11. console.log([...list.children]);

dom 树的遍历

stt 语法 说明
1 firstElementChild 第一个
2 nextElementSibling 下一个
3 lastElementChild 最后一个
4 previousElementSibling 前一个
5 parentElment / parentNode 父节点 
  1. <body>
  2.     <div class="list">
  3.         <div class="item">item1</div>
  4.         <div class="item">item2</div>
  5.         <div class="item">item3</div>
  6.         <div class="item">item4</div>
  7.         <div class="item">item5</div>
  8.         <div class="item">item6</div>
  9.     </div>
  11. </body>
  12. <script>
  13.     // 1. 节点类型:元素, 文本, 属性, 注释,文档...
  14.     // 通常只关注元素类型
  16.     let list = document.querySelector(".list");
  17.     // childNodes 所有类型元素
  18.     console.log(list.childNodes);
  19.     // children 元素类型元素
  20.     console.log(list.children);
  22.     // 2. 类数组: "类似"数组,像数组,但不是真正的数组,所以不能用数组上的方法
  23.     // 类数组特征:
  24.     // 1. 具有从0开始递增的正整数索引
  25.     // 2. 具有length属性, 表示成员数量
  27.     // 类数组 ==> 真数组
  28.     // 2.1 Array.from()
  29.     console.log(Array.from(list.children));
  30.     // 2.2 ...rest
  31.     console.log([...list.children]);
  33.     // 3. 遍历
  34.     //第一个, firstElementChild
  35.     console.log([...list.children][0]);
  36.     [...list.children][0].style.color = "blue";
  37.     list.firstElementChild.style.background = "yellow";
  39.     // 下一个兄弟, 第2个, nextElementSibling
  40.     list.firstElementChild.nextElementSibling.style.background = "green";
  42.     // 最后一个, lastElementChild
  43.     list.lastElementChild.style.background = "yellow";
  45.     // 前一个兄弟, previousElementSibling
  46.     list.lastElementChild.previousElementSibling.style.background = "lightgreen";
  48.     // 父节点/元素节点, parentElment / parentNode
  49.     // ul.lastElementChild.parentElement.style.border = "4px solid";
  50.     list.lastElementChild.parentNode.style.border = "4px solid red";
  51. </script>

DOM 元素的增删改操作

  • outerHTML: 元素的 html 字符串表示
  • cloneNode(true): 克隆节点, true, 复制元素后代的内容

插入元素

STT 语法 说明
1 document.createElement("ul") 创建 ul 元素
2 document.body.append(ul) 在 body 中添加 ul 元素
3 three.before(li) 在 three 元素节点前插入 li
4 three.after(cloneLi) 在 three 元素节点后插入克隆 li
5 insertAdjacentElement 在父节点的标签为插入点,进行插入元素
  • insertAdjacentElement: 在父节点的标签为插入点,进行插入元素
  • insertAdjacentElement(‘插入位置’, 元素)
  • afterBegin: 开始标签之后,第一个子元素
  • beforeBegin: 开始标签之前,是它的前一个兄弟元素
  • afterEnd: 结束标签之后,它的下一个兄弟元素
  • beforeEnd: 结束标签之前,它的最后一个子元素

替换元素：.replaceChild

  • ul.replaceChild(‘替换元素’, ‘被替换元素’);

删除元素：.remove

  • ul.lastElementChild.remove();
  1. <script>
  2.       // 1. 创建元素,document 文档对象
  3.       const ul = document.createElement("ul");
  5.       // 2. 添加到页面中/html中: append
  6.       document.body.append(ul);
  8.       // 3. 为ul列表添加元素
  9.       for (let i = 0; i < 5; i++) {
  10.         const li = document.createElement("li");
  11.         li.textContent = "item" + (i + 1);
  12.         ul.append(li);
  13.       }
  15.       // 4.查看元素
  16.       console.log(ul);
  17.       // outerHTML: 元素的html字符串表示
  18.       console.log(ul.outerHTML);
  20.       // 5. 在节点之前插入: before
  21.       const li = document.createElement("li");
  22.       li.textContent = "new item";
  23.       li.style.color = "red";
  24.       const three = document.querySelector("ul li:nth-of-type(3)");
  25.       three.before(li);
  27.       // 6. 在节点之后插入 : after
  28.       // cloneNode(true): 克隆节点, true, 复制元素后代的内容
  29.       let cloneLi = li.cloneNode(true);
  30.       three.after(cloneLi);
  32.       // 7. 在父节点的标签为插入点,进行插入元素
  33.       // insertAdjacentElement('插入位置', 元素)
  34.       // 插入位置有四个
  35.       // afterBegin: 开始标签之后,第一个子元素
  36.       // beforeBegin: 开始标签之前,是它的前一个兄弟元素
  37.       // afterEnd: 结束标签之后,它的下一个兄弟元素
  38.       // beforeEnd: 结束标签之前,它的最后一个子元素
  39.       ul.style.border = "1px solid";
  41.       const h3 = document.createElement("h3");
  42.       h3.textContent = "商品列表";
  43.       ul.insertAdjacentElement("beforeBegin", h3);
  45.       const p = document.createElement("p");
  46.       p.textContent = "共计: 7 件";
  47.       ul.insertAdjacentElement("afterEnd", p);
  49.       // 8. 替换 replaceChild
  50.       // 1. 插入点
  51.       const last = document.querySelector("ul li:last-of-type");
  52.       // 2. 插入的元素
  53.       const a = document.createElement("a");
  54.       a.href = "https://php.cn";
  55.       a.textContent = "php.cn";
  56.       // 3. 执行替换
  57.       ul.replaceChild(a, last);
  59.       // 9. 移除: remove
  60.       ul.lastElementChild.remove();
  61.     </script>

JS 操作元素内容的常用方法与异同

  • innerHTML: 可解析 html 字符, innerText: 不解析 html 字符
textContent 返回元素以及后代元素中的所有文本内容
innerText 返回元素以及后代中的文本
innerHTML 返回内部的 html 字符串
outerHTML 返回当前节点的自身的 html 字符串
.outerHTML = url; 替换
.outerHTML = none; 清空 
  1. <script>
  2.       const box = document.querySelector(".box");
  3.       // textContent: 返回元素以及后代元素中的所有文本内容,包括 <style>, display:none的内容
  4.       console.log(box.textContent);
  5.       // innerText: 返回元素以及后代中的文本
  6.       console.log(box.innerText);
  7.       // innerHTML: 返回内部的html字符串
  8.       console.log(box.innerHTML);
  10.       // textContent, innerText ? textContent 首选, innerText,2016才成为w3c标准
  12.       // innerText, innerHTML 区别?
  13.       let p = document.createElement("p");
  14.       let url = '<a href="https://php.cn">php.cn</a>';
  15.       p.innerText = url;
  16.       box.append(p);
  17.       p = document.createElement("p");
  18.       p.innerHTML = url;
  19.       box.append(p);
  21.       // innerHTML: 可解析html字符,  innerText: 不解析html字符
  23.       // outerHTML: 返回当前节点的自身的html字符串
  24.       console.log(box.outerHTML);
  26.       // 替换
  27.       // box.outerHTML = url;
  29.       // 清空/删除
  30.       box.outerHTML = null;
  31.     </script>

留言板实例

  • onkeydown: 按下键时触发
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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.     <style>
  9.         * {
  10.             margin: 0;
  11.             padding: 0;
  12.             box-sizing: border-box;
  14.         }
  15.         .content{
  16.             margin: 20px 80px;
  17.             display: flex;
  18.             flex-direction: column;
  19.             width: 460px;
  20.         }
  21.         .content > input{
  22.             height: 38px;
  23.             margin-bottom: 18px;
  24.             font-size: 1.2rem;
  25.         }
  26.         .content > ul{
  27.             margin-left: 13px;
  28.         }
  29.         .content > ul li{
  30.             margin-right: 13px;
  31.         }
  32.         .content > ul > li > button{
  33.             background-color: #85f0f8;
  34.             margin-left: 13px;
  35.         }
  37.     </style>
  38.   </head>
  39.   <body>
  40.       <div class="content">
  41.         <!-- onkeydown: 按下键时触发 -->
  42.         <input type="text" onkeydown="addMsg(this)" placeholder="请输入留言内容" autofocus />
  43.         <ul class="list"></ul>
  44.       </div>
  45.     <script>
  46.       function addMsg(ele) {
  47.         console.log(ele);
  48.         // event:保存了当前所有的事件信息,是当前事件的事件对象
  49.         // event: 在事件方法中, 总是可用的
  50.         console.log(event);
  51.         console.log(event.key);
  52.         if (event.key === "Enter") {
  53.           // 1. 获取留言列表的容器
  54.           const ul = document.querySelector(".list");
  56.           // 2. 判断留言是否为空?
  57.           if (ele.value.length === 0) {
  58.             alert("留言内容不能为空");
  59.             ele.focus();
  60.             return false;
  61.           }
  62.           // 3. 添加一条新留言
  63.           const li = document.createElement("li");
  64.           //   li.textContent = ele.value;
  65.           //   ul.append(li);
  66.           //   before
  67.           //   ul.firstElementChild.before(li);
  68.           //   插入到起始标签的后面就永远是第一条
  70.           // 添加删除留言功能
  71.           li.innerHTML = ele.value + "<button onclick='del(this.parentNode)'>删除</button>";
  73.           ul.insertAdjacentElement("afterBegin", li);
  74.           // 4. 清空留言的输入框,为下一次做准备
  75.           ele.value = null;
  77.           // 5. 重置焦点到留言框中,方便用户更次输入
  78.           ele.focus();
  79.         }
  80.       }
  82.       // 删除功能
  83.       function del(ele) {
  85.         return confirm("是否删除?") ? ele.remove() : false;
  86.       }
  87.     </script>
  88.   </body>
  89. </html>

dataset 对象

  • 元素属性有二类:
    1. 内置的预定义属性, 如 id, class,title,style 等
    1. 用户自定义属性,主要用于 js 脚本控制, 以 “data-“”为前缀,如 data-key
  • 自定义属性还可以将一些数据保存到标签中
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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.       * 元素属性有二类:
  12.       * 1. 内置的预定义属性, 如 id, class,title,style等
  13.       * 2. 用户自定义属性,主要用于js脚本控制, 以 "data-""为前缀,如 data-key
  14.      -->
  16.     <div class="btn-group">
  17.       <!-- onclick: 内置/预定义事件属性 -->
  18.       <!-- data-index: 自定义属性 -->
  19.       <button data-index="1" onclick="getIndex(this)">btn1</button>
  20.       <button data-index="2" onclick="getIndex(this)">btn2</button>
  21.       <button data-index="3" onclick="getIndex(this)">btn3</button>
  22.     </div>
  24.     <!-- 自定义属性还可以将一些数据保存到标签中 -->
  25.     <!-- data-emial, data-work-unit  -->
  26.     <div class="user" data-email="498668472@qq.com" data-work-unit="php中文网">猪老师</div>
  28.     <script>
  29.       function getIndex(btn) {
  30.         // 通过自定义属性data-index的值,知道我点的是哪一个?
  31.         // dataset.prop, "data-"一定要省略掉
  32.         console.log("点击了第 ", btn.dataset.index, " 个按钮");
  33.       }
  35.       const user = document.querySelector(".user");
  37.       console.log(user.dataset.email);
  38.       //   work-unit ==> workUnit
  39.       console.log(user.dataset.workUnit);
  41.       // dataset 可读可写
  42.       user.dataset.workUnit = "php.cn";
  43.       console.log(user.dataset.workUnit);
  44.     </script>
  45.   </body>
  46. </html>

获取元素的计算样式

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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.     <style>
  9.       div {
  10.         width: 150px;
  11.         height: 100px;
  12.       }
  13.     </style>
  14.   </head>
  15.   <body>
  16.     <div style="color: #ff009d; background-color: #e7ebe7">Help_10086</div>
  18.     <script>
  19.         const div = document.querySelector("div");
  20.         // 行内样式,style
  21.         console.log(div.style.color);
  22.         console.log(div.style.backgroundColor);
  23.         // console.log(div.style.width);
  24.         // console.log(div.style.height);
  26.         // 计算样式: 内部<style>或外部 如 style.css
  28.         console.log(window.getComputedStyle(div).width);
  29.         console.log(window.getComputedStyle(div).height);
  30.         console.log(window.getComputedStyle(div).backgroundColor);
  32.         const width = window.getComputedStyle(div).width;
  33.         console.log(width, typeof width);
  34.         // 150px ===> 150
  35.         console.log(typeof parseInt(width));
  37.         div.style.width = parseInt(width) + 100 + "px";
  38.     </script>
  39.   </body>
  40. </html>

classList 对象常用方法

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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.     <style>
  9.       .red {
  10.         color: red;
  11.       }
  12.       .bgc {
  13.         background-color: yellow;
  14.       }
  15.       .blue {
  16.         color: blue;
  17.       }
  18.       .bd {
  19.         border: 5px solid #686464;
  20.       }
  21.     </style>
  22.   </head>
  23.   <body>
  24.     <h2>Help_10086</h2>
  26.     <script>
  27.       // 1.传统方式
  28.       const h2 = document.querySelector("h2");
  29.       // h2.className = "red bgc";
  31.       // 2. classList对象
  32.       // add: 添加class
  33.       h2.classList.add("red");
  34.       h2.classList.add("bgc");
  36.       // contains: 判断是否存在
  37.       console.log(h2.classList.contains("bgc"));
  39.       // remove: 移除class
  40.       h2.classList.remove("bgc");
  42.       // replace: 替换class
  43.       h2.classList.replace("red", "blue");
  45.       // toggle: 切换 class
  46.       // 如果已存在 bd, 则执行remove 移除操作, 否则执行 add 添加操作
  47.       h2.classList.toggle("bd");
  48.     </script>
  49.   </body>
  50. </html>

事件的添加与派发

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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.       const btn1 = document.querySelector("button:first-of-type");
  15.       // 添加
  16.       btn1.onclick = function () {
  17.         console.log(event);
  18.       };
  19.       // 删除事件
  20.       btn1.onclick = null;
  22.       // 事件监听器
  23.       const btn2 = document.querySelector("button:nth-of-type(2)");
  24.       function show() {
  25.         console.log(event);
  26.       }
  27.       // 事件回调方法不能移除,必须是命名函数才可以
  28.       btn2.addEventListener("click", show, false);
  29.       btn2.removeEventListener("click", show, false);
  31.       // 事件派发
  32.       const btn3 = document.querySelector("button:nth-of-type(3)");
  34.       // 先添加一个事件,然后自动去的触发它
  35.       let i = 0;
  36.       btn3.addEventListener(
  37.         "click",
  38.         () => {
  39.           console.log("恭喜你,又赚了 : " + i + "元");
  40.           i += 0.8;
  41.         },
  42.         false
  43.       );
  45.       // 创建一个自定义事件
  46.       const myclick = new Event("click");
  48.       // btn3.dispatchEvent(myclick);
  49.       // btn3.dispatchEvent(myclick);
  50.       // btn3.dispatchEvent(myclick);
  51.       // btn3.dispatchEvent(myclick);
  52.       // btn3.dispatchEvent(myclick);
  53.       // btn3.dispatchEvent(myclick);
  55.       // setTimeout()一次性定时器
  56.       // setTimeout(() => btn3.dispatchEvent(myclick), 2000);
  58.       // setInterval: 间歇式的定时器，不停重复执行
  59.       setInterval(() => btn3.dispatchEvent(myclick), 2000);
  60.     </script>
  61.   </body>
  62. </html>