search

博客列表 >通过js获取元素表单以及遍历dom树和对元素的增删改查js操作内容演练实战了留言板的操作并对自定义属性: dataset对象初步的了解以及对js操作class和classList属性对象事件的添加与删除练习与了解

通过js获取元素表单以及遍历dom树和对元素的增删改查js操作内容演练实战了留言板的操作并对自定义属性: dataset对象初步的了解以及对js操作class和classList属性对象事件的添加与删除练习与了解

卢先生
卢先生原创
2022年01月07日 00:45:20553浏览
获取表单元素
传统的方法:

代码部分:

  1. <body>
  2.     <form action="login.php" method="post" id="login">
  3.       <fieldset class="login">
  4.         <legend>登录</legend>
  5.         <label for="user">用户名:</label>
  6.         <input type="text" id="text" name="text" value="隔壁老卢" />
  7.         <label for="email">您的邮箱</label>
  8.         <input type="email" id="email" name="email" value="123456@qq.com" />
  9.         <label for="password">您的密码</label>
  10.         <input type="password" id="password" name="password" placeholder="请输入您的密码" />
  11.         <button type="submit">提交</button>
  12.       </fieldset>
  13.     </form>
  14.     <script>
  15.       //传统空间获取表单元素
  16.       //   使用document.querySelector 获取的,值为表单的id属性,
  17.       let form = document.querySelector("#login");
  18.       console.log(form);
  19.       //   获取表单内的某个控件表单的值
  20.       console.log(form.querySelector("#email").value);
  21.     </script>
  22.   </body>

截图示例:

推荐方式:

语法:
document.forms
代码部分:

  1.     //   推荐方式
  2.       // 推荐方式这里使用了一个语法糖 document.forms[0] 返回的一个html中的表单的结合数组
  3.       //   所以当前表单的排序也为0
  4.       console.log(document.forms[0]);
  5.       //   并且还可使用id来访问,比如id=login
  6.       console.log(document.forms.login);
  7.       //   上面两者获取的表单都是跟25行获取的表单是一样的
  8.       //   获取下面的input name相当于id
  9.       console.log(document.forms.login.email.value);
  10.       //   这样上面就获取到了邮箱

前后端交互方面:

这里使用到了取json值,使用到的代码为:JSON.stringify对取到的账号密码或者某些值进行json化
代码先上:

  1. //   前后端交互中使用的json
  2.       //   先取到表单
  3.       let login = document.forms.login;
  4.       //   使用表单追加找到id为text上面的value用户输入的值
  5.       let user = login.text.value;
  6.       let email = login.email.value;
  7.       let password = login.password.value;
  8.       console.log(user, email, password);
  9.       //   这里取值应该用{} 对象的方式
  10.       let name = { user, email, password };
  11.       //   对取到的值,进行json化 然后用null,2格式化,不格式化我看也能看
  12.       let data = JSON.stringify(name, null, 2);
  13.       console.log(data);

截图后上:

整体代码:

  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.     <form action="login.php" method="post" id="login">
  11.       <fieldset class="login">
  12.         <legend>登录</legend>
  13.         <label for="user">用户名:</label>
  14.         <input type="text" id="text" name="text" value="隔壁老卢" />
  15.         <label for="email">您的邮箱</label>
  16.         <input type="email" id="email" name="email" value="123456@qq.com" />
  17.         <label for="password">您的密码</label>
  18.         <input type="password" id="password" name="password" value="66666" placeholder="请输入您的密码" />
  19.         <button type="submit">提交</button>
  20.       </fieldset>
  21.     </form>
  22.     <script>
  23.       //传统空间获取表单元素
  24.       //   使用document.querySelector 获取的,值为表单的id属性,
  25.       //   let form = document.querySelector("#login");
  26.       //   console.log(form);
  27.       //   获取表单内的某个控件表单的值,这里email是form的下级,既然在上面已经声明了一个form内,就直接使用
  28.       //   console.log(form.querySelector("#email").value);
  29.       //   推荐方式
  30.       // 推荐方式这里使用了一个语法糖 document.forms[0] 返回的一个html中的表单的结合数组
  31.       //   所以当前表单的排序也为0
  32.       console.log(document.forms[0]);
  33.       //   并且还可使用id来访问,比如id=login
  34.       console.log(document.forms.login);
  35.       //   上面两者获取的表单都是跟25行获取的表单是一样的
  36.       //   获取下面的input name相当于id
  37.       console.log(document.forms.login.email.value);
  38.       //   这样上面就获取到了邮箱
  39.       /////////
  40.       //   前后端交互中使用的json
  41.       //   先取到表单
  42.       let login = document.forms.login;
  43.       //   使用表单追加找到id为text上面的value用户输入的值
  44.       let user = login.text.value;
  45.       let email = login.email.value;
  46.       let password = login.password.value;
  47.       console.log(user, email, password);
  48.       //   这里取值应该用{} 对象的方式
  49.       let name = { user, email, password };
  50.       //   对取到的值,进行json化 然后用null,2格式化,不格式化我看也能看
  51.       let data = JSON.stringify(name, null, 2);
  52.       console.log(data);
  53.     </script>
  54.   </body>
  55. </html>
遍历dom树操作
文本的类型

children 元素节点
代码部分:

  1. <ul class="ul">
  2.       <li class="li">测试专用</li>
  3.       <li class="li">测试专用</li>
  4.       <li class="li">测试专用</li>
  5.       <li class="li">测试专用</li>
  6.       <li class="li">测试专用</li>
  7.     </ul>
  8.     <script>
  9.       // 节点类型
  10.       let ul = document.querySelector(".ul");
  11.       //   dom树种.childNodes是文本节点
  12.       //   console.log(ul.childNodes);
  13.       console.log(ul.children);
  14.       //   children元素节点
  15.       // 节点类型: 元素, 文本, 属性, 注释,文档...
  16.       // 通常只关注元素类型
  17.     </script>

截图部分:

类数组及类数组转换为真数组

Array.from将类数组转换为真数组
通过上面的节点示例:console.log(Array.from(ul.children))
以及使用…rast方法:
console.log([...ul.children]);注意:使用rast方法时,需要在元素节点的前面增加[]数组的中括号

代码部分:

  1. <body>
  2.     <ul class="ul">
  3.       <li class="li">测试专用</li>
  4.       <li class="li">测试专用</li>
  5.       <li class="li">测试专用</li>
  6.       <li class="li">测试专用</li>
  7.       <li class="li">测试专用</li>
  8.     </ul>
  9.     <script>
  10.       // 节点类型
  11.       let ul = document.querySelector(".ul");
  12.       //   dom树种.childNodes是文本节点
  13.       //   console.log(ul.childNodes);
  14.       console.log(ul.children);
  15.       //   children元素节点
  16.       // 节点类型: 元素, 文本, 属性, 注释,文档...
  17.       // 通常只关注元素类型
  18.       /////////////////////////
  19.       //   类似数组，类似数组并不是数组，只是看起来像是数组，所以并不能用数组上的方法
  20.       //   类似数组具有数组特征，其实从0开始
  21.       //   具有lengrh属性，表示成员数量
  22.       //   类似数组怎么变成真数组呢？使用Array.from(数组元素节点)
  23.       console.log(Array.from(ul.children));
  24.       //   或者使用之前学过的拆分的一部分...rest方法
  25.       //   测试了下,需要加上数组的[]否则输出来的不是数组
  26.       console.log([...ul.children]);
  27.     </script>
  28.   </body>

截图示例:

对节点内容的遍历操作
参数 示例 说明
firstElementChild ul.firstElementChild.style.color = “green”; 选中ul下面第一个元素
nextElementSibling ul.firstElementChild.nextElementSibling.style.color = “red”; 选中ul下面第一个li的下一位兄弟
lastElementChild ul.lastElementChild.style.color = “green”; 选中ul下面最后一个li标签
previousElementSibling ul.lastElementChild.previousElementSibling.style.color = “red”; 选中ul下面最后一个li标签的上面那位li标签
parentElment / parentNode ul.lastElementChild.parentElement.style.border = “1px green solid”; 获取元素的父级标签

贴代码:

  1.  //////////////////////////////
  2.       //   对节点内容的遍历操作
  3.       //像极了grid里面的代码,虽然我记不住...
  4.       console.log([...ul.children][0]);
  5.       console.log(([...ul.children][0].style.color = "green"));
  6.       //   []以数组的方式进行选中
  7.       //   ul节点的第一个li变红色
  8.       [...ul.children][0].style.color = "red";
  9.       //   程序自带的语法糖firstElementChild
  10.       //   ul节点的第一个li变绿色
  11.       ul.firstElementChild.style.color = "green";
  12.       //   ul节点的第二个li兄弟变红色
  13.       //   程序自带的语法糖nextElementSibling
  14.       ul.firstElementChild.nextElementSibling.style.color = "red";
  15.       //   ul节点的倒数第一个大兄弟变绿色
  16.       //   倒数第一个进行操作语法糖lastElementChild
  17.       ul.lastElementChild.style.color = "green";
  18.       //   某一个节点的前一个兄弟的语法糖previousElementSibling,变红色
  19.       ul.lastElementChild.previousElementSibling.style.color = "red";
  20.       // 获取父节点/元素节点, parentElment / parentNode
  21.       //   这里父级就一个,ul中的li的父级别就一个,就是ul本身,所以就直接选中随便一个都可以
  22.       ul.lastElementChild.parentElement.style.border = "1px green solid";

示例截图:

贴遍历dom数完整代码:

  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>遍历dom树</title>
  8.   </head>
  9.   <body>
  10.     <ul class="ul">
  11.       <li class="li">测试专用</li>
  12.       <li class="li">测试专用</li>
  13.       <li class="li">测试专用</li>
  14.       <li class="li">测试专用</li>
  15.       <li class="li">测试专用</li>
  16.     </ul>
  17.     <script>
  18.       // 节点类型
  19.       let ul = document.querySelector(".ul");
  20.       //   dom树种.childNodes是文本节点
  21.       //   console.log(ul.childNodes);
  22.       console.log(ul.children);
  23.       //   children元素节点
  24.       // 节点类型: 元素, 文本, 属性, 注释,文档...
  25.       // 通常只关注元素类型
  26.       /////////////////////////
  27.       //   类似数组，类似数组并不是数组，只是看起来像是数组，所以并不能用数组上的方法
  28.       //   类似数组具有数组特征，其实从0开始
  29.       //   具有lengrh属性，表示成员数量
  30.       //   类似数组怎么变成真数组呢？使用Array.from(数组元素节点)
  31.       console.log(Array.from(ul.children));
  32.       //   或者使用之前学过的拆分的一部分...rest方法
  33.       //   测试了下,需要加上数组的[]否则输出来的不是数组
  34.       console.log([...ul.children]);
  35.       //////////////////////////////
  36.       //   对节点内容的遍历操作
  37.       //像极了grid里面的代码,虽然我记不住...
  38.       console.log([...ul.children][0]);
  39.       console.log(([...ul.children][0].style.color = "green"));
  40.       //   []以数组的方式进行选中
  41.       //   ul节点的第一个li变红色
  42.       [...ul.children][0].style.color = "red";
  43.       //   程序自带的语法糖firstElementChild
  44.       //   ul节点的第一个li变绿色
  45.       ul.firstElementChild.style.color = "green";
  46.       //   ul节点的第二个li兄弟变红色
  47.       //   程序自带的语法糖nextElementSibling
  48.       ul.firstElementChild.nextElementSibling.style.color = "red";
  49.       //   ul节点的倒数第一个大兄弟变绿色
  50.       //   倒数第一个进行操作语法糖lastElementChild
  51.       ul.lastElementChild.style.color = "green";
  52.       //   某一个节点的前一个兄弟的语法糖previousElementSibling,变红色
  53.       ul.lastElementChild.previousElementSibling.style.color = "red";
  54.       // 获取父节点/元素节点, parentElment / parentNode
  55.       //   这里父级就一个,ul中的li的父级别就一个,就是ul本身,所以就直接选中随便一个都可以
  56.       ul.lastElementChild.parentElement.style.border = "1px green solid";
  57.     </script>
  58.   </body>
  59. </html>
dom元素的增删改查（完整代码将整理到本项结束之后）

语法糖 createElement创建节点
语法糖 .append在某个元素节点下面增加节点
语法糖.textContent对某个节点的text操作
语法糖.outerHTML查看自己全局定义的html中的元素
.createElement程序自带的语法糖，创建某个元素或者节点使用的

示例代码：

  1.  <script>
  2.     //   语法糖 createElement创建节点
  3.     // 语法糖 .append在某个元素节点下面追加节点
  4.     // 语法糖.textContent对某个节点的text操作
  5.     // 语法糖.outerHTML查看自己全局定义的html中的元素
  6.     // .createElement程序自带的语法糖，创建某个元素或者节点使用的
  7.     let ul = document.createElement("ul");
  8.     // 使用.append进行对某个元素下面追加节点
  9.     // 下面是在html页面中的body下追加一个ul节点
  10.     document.body.append(ul);
  11.     //////////////////////////////
  12.     //利用for循环对ul添加li元素
  13.     for (i = 0; i < 5; i++) {
  14.       // 创建li节点
  15.       const li = document.createElement("li");
  16.       //   li节点增加text文本
  17.       li.textContent = "测试" + (i + 1);
  18.       //   在ul下面追加一个li节点，默认为0，追加最大为5个
  19.       ul.append(li);
  20.     }

示例截图：

节点的前后追加部分

before 节点前插入
after 节点之后插入（克隆）配合.cloneNode(真/假)操作

  1.  // 控制台查看节点
  2.     console.log(ul);
  3.     // outerHTML查看某个元素，或者某个页面的html页面节点
  4.     // 试了下，只能查看自己全局创建的节点
  5.     console.log(ul.outerHTML);
  6.     /////////////////////////////
  7.     //////节点之前插入before
  8.     // 老样子，先创建一个li节点
  9.     let li = document.createElement("li");
  10.     // 对节点进行css 添加字符等操作
  11.     li.style.backgroundColor = "green";
  12.     li.textContent = "选中的节点前面那个";
  13.     // 声明一个l，l选中的单个节点，ul下面第三个li
  14.     const l = document.querySelector("ul li:nth-of-type(3)");
  15.     // 对l，也就是第三个li前面增加一个节点，li
  16.     l.before(li);
  17.     // 在节点之后插入: after
  18.     // cloneNode(true): 克隆节点, true, 复制元素后代的内容
  19.     // .cloneNode(true/false)真假 克隆节点li，文本为真，如果为真，就连内容css一起拿过来，否则不拿
  20.     let cloneLi = li.cloneNode(true);
  21.     // 在声明的l节点 第三个节点后面插入
  22.     l.after(cloneLi);
对父标签的操作

insertAdjacentElement(‘插入位置’, 元素)
插入位置有四个
afterBegin: 开始标签之后,第一个子元素
beforeBegin: 开始标签之前,是它的前一个兄弟元素
afterEnd: 结束标签之后,它的下一个兄弟元素
beforeEnd: 结束标签之前,它的最后一个子元素
代码部分：

  1. // 7. 在父节点的标签为插入点,进行插入元素
  2.     // insertAdjacentElement('插入位置', 元素)
  3.     // 插入位置有四个
  4.     // afterBegin: 开始标签之后,第一个子元素
  5.     // beforeBegin: 开始标签之前,是它的前一个兄弟元素
  6.     // afterEnd: 结束标签之后,它的下一个兄弟元素
  7.     // beforeEnd: 结束标签之前,它的最后一个子元素
  8.     // 因为在上面已经创建了ul，所以不需再次创建ul，直接在ul上面增加css
  9.     ul.style.border = "1px green solid";
  10.     // 声明一个h3，页面增加一个h3标签
  11.     let h3 = document.createElement("h3");
  12.     // h3标签利用textcontent 添加一个文本
  13.     h3.textContent = "弄点商品进去吧";
  14.     // 对锁定ul位置，也就是插入的位置，位置有4个，在ul开始标签哪里前面 是前面进行插入h3
  15.     ul.insertAdjacentElement("beforeBegin", h3);
  16.     // 创建一个button标签
  17.     let button = document.createElement("button");
  18.     // 这里要注意的是，针对button标签的内容需要用=号并且加“”
  19.     button.textContent = "结算商品";
  20.     ul.insertAdjacentElement("afterend", button);
  21.     button.style.backgroundColor = "green";
  22.     button.style.color = "#fff";
  23.     button.style.clear = "none";
  24.     button.style.float = "left";
  25.     button.style.border = "0";
  26.     button.style.cursor = "pointer";
对节点的替换

replaceChild节点的替换

  1. // 替换 replaceChild
  2.     // 插入的节点，就是首先找到要插入的节点
  3.     // 使用伪类进行查找位置
  4.     let li5 = document.querySelector("ul li:last-of-type");
  5.     // 需要插入的节点
  6.     // 新建需要插入的节点
  7.     let a = document.createElement("a");
  8.     a.textContent = "清除商品";
  9.     a.href = "https://www.baidu.com";
  10.     // 这个地方要注意的是，你插入的li标签在ul下面，所以是ul.replaceChild(插入的节点名，节点位置)
  11.     ul.replaceChild(a, li5);
删除某个节点

.remove

  1.  // 删除某个节点remove
  2.     // 例如，删除ul下面最后一个标签,已经不管他是a，还是li了
  3.     ul.lastElementChild.remove();

帖整段代码部分：

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>dom元素的增删改查</title>
  7.   </head>
  9.   <body></body>
  10.   <style></style>
  11.   <script>
  12.     //   语法糖 createElement创建节点
  13.     // 语法糖 .append在某个元素节点下面追加节点
  14.     // 语法糖.textContent对某个节点的text操作
  15.     // 语法糖.outerHTML查看自己全局定义的html中的元素
  16.     // .createElement程序自带的语法糖，创建某个元素或者节点使用的
  17.     let ul = document.createElement("ul");
  18.     // 使用.append进行对某个元素下面追加节点
  19.     // 下面是在html页面中的body下追加一个ul节点
  20.     document.body.append(ul);
  21.     //////////////////////////////
  22.     //利用for循环对ul添加li元素
  23.     for (i = 0; i < 5; i++) {
  24.       // 创建li节点
  25.       const li = document.createElement("li");
  26.       //   li节点增加text文本
  27.       li.textContent = "测试" + (i + 1);
  28.       //   在ul下面追加一个li节点，默认为0，追加最大为5个
  29.       ul.append(li);
  30.     }
  31.     // 控制台查看节点
  32.     console.log(ul);
  33.     // outerHTML查看某个元素，或者某个页面的html页面节点
  34.     // 试了下，只能查看自己全局创建的节点
  35.     console.log(ul.outerHTML);
  36.     /////////////////////////////
  37.     //////节点之前插入before
  38.     // 老样子，先创建一个li节点
  39.     let li = document.createElement("li");
  40.     // 对节点进行css 添加字符等操作
  41.     li.style.backgroundColor = "green";
  42.     li.textContent = "选中的节点前面那个";
  43.     // 声明一个l，l选中的单个节点，ul下面第三个li
  44.     const l = document.querySelector("ul li:nth-of-type(3)");
  45.     // 对l，也就是第三个li前面增加一个节点，li
  46.     l.before(li);
  47.     // 在节点之后插入: after
  48.     // cloneNode(true): 克隆节点, true, 复制元素后代的内容
  49.     // .cloneNode(true/false)真假 克隆节点li，文本为真，如果为真，就连内容css一起拿过来，否则不拿
  50.     let cloneLi = li.cloneNode(true);
  51.     // 在声明的l节点 第三个节点后面插入
  52.     l.after(cloneLi);
  53.     ////////////////////////////////
  54.     ///////对父标签的操作 父标签的前后操作
  55.     /////////////////////////////////
  56.     // 7. 在父节点的标签为插入点,进行插入元素
  57.     // insertAdjacentElement('插入位置', 元素)
  58.     // 插入位置有四个
  59.     // afterBegin: 开始标签之后,第一个子元素
  60.     // beforeBegin: 开始标签之前,是它的前一个兄弟元素
  61.     // afterEnd: 结束标签之后,它的下一个兄弟元素
  62.     // beforeEnd: 结束标签之前,它的最后一个子元素
  63.     // 因为在上面已经创建了ul，所以不需再次创建ul，直接在ul上面增加css
  64.     ul.style.border = "1px green solid";
  65.     // 声明一个h3，页面增加一个h3标签
  66.     let h3 = document.createElement("h3");
  67.     // h3标签利用textcontent 添加一个文本
  68.     h3.textContent = "弄点商品进去吧";
  69.     // 对锁定ul位置，也就是插入的位置，位置有4个，在ul开始标签哪里前面 是前面进行插入h3
  70.     ul.insertAdjacentElement("beforeBegin", h3);
  71.     // 创建一个button标签
  72.     let button = document.createElement("button");
  73.     // 这里要注意的是，针对button标签的内容需要用=号并且加“”
  74.     button.textContent = "结算商品";
  75.     ul.insertAdjacentElement("afterend", button);
  76.     button.style.backgroundColor = "green";
  77.     button.style.color = "#fff";
  78.     button.style.clear = "none";
  79.     button.style.float = "left";
  80.     button.style.border = "0";
  81.     button.style.cursor = "pointer";
  82.     // 替换 replaceChild
  83.     // 插入的节点，就是首先找到要插入的节点
  84.     // 使用伪类进行查找位置
  85.     let li5 = document.querySelector("ul li:last-of-type");
  86.     // 需要插入的节点
  87.     // 新建需要插入的节点
  88.     let a = document.createElement("a");
  89.     a.textContent = "清除商品";
  90.     a.href = "https://www.baidu.com";
  91.     // 这个地方要注意的是，你插入的li标签在ul下面，所以是ul.replaceChild(插入的节点名，节点位置)
  92.     ul.replaceChild(a, li5);
  93.     // 删除某个节点remove
  94.     // 例如，删除ul下面最后一个标签,已经不管他是a，还是li了
  95.     ul.lastElementChild.remove();
  96.   </script>
  97. </html>
js对元素的操作

textContent: 返回元素以及后代元素中的所有文本内容，包括了<style>, display:none的内容
innerText:返回元素以及后代中的文本
innerHTML：返回内部的html字符串
textContent, innerText ? textContent 首选, innerText,2016才成为w3c标准
outerHTML: 返回当前节点的自身的html字符串

并且outerHTML可对某个节点清空，或者替换操作
  1. // 替换
  2.       //   box.outerHTML = url;
  4.       // 清空/删除
  5.       box.outerHTML = null;

这一节试了试，直接贴老师的代码吧，我的没写注释

  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操作元素内容</title>
  8.   </head>
  9.   <body>
  10.     <div class="box">
  11.       <style>
  12.         h2 {
  13.           color: red;
  14.         }
  15.       </style>
  16.       <h2>通知</h2>
  17.       <span style="display: none">试用期员工不参加</span>
  18.       <p>今天下午17:00开会, 开发部, 运营部全体参加~~</p>
  19.     </div>
  21.     <script>
  22.       const box = document.querySelector(".box");
  23.       // textContent: 返回元素以及后代元素中的所有文本内容,包括 <style>, display:none的内容
  24.       console.log(box.textContent);
  25.       // innerText: 返回元素以及后代中的文本
  26.       console.log(box.innerText);
  27.       // innerHTML: 返回内部的html字符串
  28.       console.log(box.innerHTML);
  30.       // textContent, innerText ? textContent 首选, innerText,2016才成为w3c标准
  32.       // innerText, innerHTML 区别?
  33.       let p = document.createElement("p");
  34.       let url = '<a href="https://php.cn">php.cn</a>';
  35.       p.innerText = url;
  36.       box.append(p);
  37.       p = document.createElement("p");
  38.       p.innerHTML = url;
  39.       box.append(p);
  41.       // innerHTML: 可解析html字符,  innerText: 不解析html字符
  43.       // outerHTML: 返回当前节点的自身的html字符串
  44.       console.log(box.outerHTML);
  46.       // 替换
  47.       //   box.outerHTML = url;
  49.       // 清空/删除
  50.       box.outerHTML = null;
  51.     </script>
  52.   </body>
  53. </html>
留言板实操部分：
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>留言板实操</title>
  7.   </head>
  9.   <body>
  10.     <!-- onkeydown:键盘按下时触发 -->
  11.     <!-- 其中onkeydown="js函数" -->
  12.     <!-- event返回事件，总是可用，程序自带 -->
  13.     <!-- 当前页面中的elent是事件对象 在input事件框中，经常使用，因为当敲下回车后会返回input事件框返回的所有内容 -->
  14.     <input type="text" onkeydown="anxia(this)" placeholder="请输入留言内容" autofocus />
  15.     <ul class="list"></ul>
  16.   </body>
  17.   <script>
  18.     // 声明一个函数 函数名就是键盘按下时触发的函数名
  19.     function anxia(ele) {
  20.       // 事件对象，回车后返回的input框
  21.       console.log(ele);
  22.       console.log(event.key);
  23.       // event敲一下回车，会返回所有的事件信息
  24.       // 在控制台可以看出，敲会车头key返回的值为key，所以当event.key=Enter时说明用户进行了回车操作
  25.       // 由此，我们可以进行判断用户是否敲了回车操作
  26.       // event总是可以用的
  27.       if (event.key === "Enter") {
  28.         // 获取留言列表的容器 就是用户发送的数据存放的地方
  29.         const ul = document.querySelector(".list");
  30.         // 判断留言内容是否为空
  31.         // ele是文本框， 就是文本框下面的vlaue的长度
  32.         if (ele.value.length === 0) {
  33.           alert("留言内容为空，请重新输入");
  34.           // 返回给onkeydown事件返回光标
  35.           ele.focus();
  36.           // 没有内容所以返回一个假
  37.           return false;
  38.         }
  39.         // 添加一条留言
  40.         //   li.textContent = ele.value;
  41.         //   ul.append(li);
  42.         //   before
  43.         //   ul.firstElementChild.before(li);
  44.         //   插入到起始标签的后面就永远是第一条
  45.         //上面是老师的部分
  46.         const li = document.createElement("li");
  47.         li.textContent = ele.value;
  48.         ul.append(li);
  49.         // before 某个元素之前插入，之前学的课程
  50.         // ul.firstElementChild.before(li);
  51.         // 删除留言功能
  52.         // 获取里的html节点
  53.         // 这里按下删除，是一个del函数事件，需要写一个函数事件，清空的事件
  54.         console.log(li.innerHTML); //获取到当前的li标签的文字部分
  55.         // li.textContent = ele.value //原来的获取留言部分，赋值给li.innerHTML
  56.         // 相当于在ele.value后面增加一段html代码 换成了innerHTML
  57.         // parentNode父元素
  58.         li.innerHTML = ele.value + "<button onclick='del(this.parentNode)'>删除</button>";
  59.         ul.insertAdjacentElement("afterBegin", li);
  60.         // 清空留言的输入框，为下一次做准备
  61.         ele.value = null;
  62.         // 重置焦点到留言框中，方便用户再次输入
  63.         ele.focus();
  64.       }
  65.     }
  67.     function del(ele) {
  68.       // ele.remove();
  69.       // remove清空删除
  70.       // 或者使用ele.innerHTML = null;
  71.       // 给用户一个提示语句
  72.       // confirm 是否删除 系统自带的方法
  73.       // console.log(confirm("是否删除？"));
  74.       // 通过浏览器控制台发现，如果是删除，返回的状态为true 取消为false
  75.       if (confirm("是否删除？") == true) {
  76.         ele.remove();
  77.       } else {
  78.         return false;
  79.       }
  80.       // 简写部分
  81.       // if confirm("是否删除？" ? ele.remove() : false;
  82.     }
  83.     ///下面是老师的部分
  84.     // console.log(ele);
  85.     // 方案1
  86.     // ele.remove();
  87.     // 方案2
  88.     // ele.outerHTML = null;
  90.     // 应该删除前让用户确认一下
  91.     // console.log(confirm("是否删除?"));
  92.     // 点击"确定"返回 true , 取消 返回  false
  93.     // if (confirm("是否删除?")) {
  94.     //   ele.remove();
  95.     // }
  96.   </script>
  97. </html>
自定义属性data-对象的解释

dataset程序自带的这个属性index等于data-后面的index

  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.       * 1. 内置的预定义属性, 如 id, class,title,style等
  12.       * 2. 用户自定义属性,主要用于js脚本控制, 以 "data-""为前缀,如 data-key -->
  13.     <div class="btn-group">
  14.       <!-- onclick: 内置/预定义事件属性 -->
  15.       <!-- data-index: 自定义属性 -->
  16.       <button data-index="1" onclick="getIndex(this)">btn1</button>
  17.       <button data-index="2" onclick="getIndex(this)">btn2</button>
  18.       <button data-index="3" onclick="getIndex(this)">btn3</button>
  19.     </div>
  20.     <!-- 自定义属性还可以将一些数据保存到标签中 -->
  21.     <!-- data-emial, data-work-unit  -->
  22.     <div class="user" data-email="498668472@qq.com" data-work-unit="php中文网">猪老师</div>
  23.   </body>
  24.   <script>
  25.     function getIndex(btn) {
  26.       // 这里声明了一个函数名字叫getIndex 对象为btn,
  27.       // 自定义属性data-等于dataset程序自带的这个属性index等于data-后面的index
  28.       // data-是前缀, 写法是data-prop 就是data-属性
  29.       console.log("点击了", btn.dataset.index, "按钮");
  30.     }
  31.     const user = document.querySelector(".user");
  32.     //  通过class先拿到user的节点 然后通过user节点拿到.dataset
  33.     console.log(user.dataset.email);
  34.     // 工作单位是data-work-unit 需要对这种的转一下,转成workUnit 驼峰
  35.     console.log(user.dataset.workUnit);
  36.     // 对data-值的修改
  37.     user.dataset.workUnit = "php中文网2";
  38.     console.log(user.dataset.workUnit);
  39.   </script>
  40. </html>

示例截图:

js操作css属性

常常使用到的代码有
window.getComputedStyle(需要拿的标签).标签内的某个元素
比如 console.log(window.getComputedStyle(div).width);
示例代码:

  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.   </head>
  9.   <style>
  10.     div {
  11.       width: 150px;
  12.       height: 100px;
  13.     }
  14.   </style>
  15.   <body>
  16.     <div style="color: red; background-color: lightgreen">Hello</div>
  17.   </body>
  18.   <script>
  19.     //   首先拿到div元素
  20.     const div = document.querySelector("div");
  21.     // 行内样式style
  22.     console.log(div.style.color);
  23.     // 控制台输出了red
  24.     console.log(div.style.backgroundColor);
  25.     // 控制台输出了lightgreen
  26.     // 计算行内样式 内部及行内或者外部的style css等
  27.     // getComputedStyle程序自带的一个语法糖 全局属性,是在window里面的 一般有两个元素,有一个是获取伪元素的
  28.     //   使用方法window.getComputedStyle(需要拿的标签).标签内的某个元素
  29.     console.log(window.getComputedStyle(div).width);
  30.     console.log(window.getComputedStyle(div).height);
  31.     // 声明一个宽度,并对宽度进行修改
  32.     const width = window.getComputedStyle(div).width;
  33.     console.log(width); //拿到的竟然是一个150px 发现没有
  34.     // 这时候用到一个语法糖 parseInt
  35.     // parseInt(width) === 150 也就是一个数值 所以可以对他进行修改
  36.     console.log(parseInt(width)); //这时候浏览器控制台输出的是150,并不是150px
  37.     // 这时候对值进行修改
  38.     div.style.width = parseInt(width) + 500 + "px";
  39.   </script>
  40. </html>

示例截图:

js操作属性之优化版-进步版

className传统的添加class
classList.add 新方法添加class
contains 对当前class属性判断是否一致
remove 移除操作
replace 替换操作
toggle 切换/如果存在则删除

示例代码:
  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.   </head>
  9.   <style>
  10.     .red {
  11.       color: red;
  12.     }
  13.     .bgc {
  14.       background-color: yellow;
  15.     }
  16.     .blue {
  17.       color: blue;
  18.     }
  19.     .bd {
  20.       border: 5px solid #000;
  21.     }
  22.   </style>
  23.   <body>
  24.     <h2>你好啊</h2>
  25.   </body>
  26.   <!-- 传统方式属性 -->
  27.   <script>
  28.     const h2 = document.querySelector("h2");
  29.     // className 也是程序自带的一个语法糖,使用某一个颜色,但是颜色需要在当前页面的style中
  30.     h2.className = "red";
  31.     // 上面是传统的方式
  32.     // 下面是新方式,用到的代码为.classlist.add 对象
  33.     h2.classList.add("blue");
  35.     //contains:判断
  36.     // 对当前class进行判断,判断当前的class是否一致
  37.     // contains判断,直接在需要判断的属性后面添加.contains("需要判断的颜色")
  38.     console.log(h2.classList.contains("blue")); //需要打印一下,不打印你控制台可能看不见
  39.     h2.classList.contains("blue");
  40.     //remove:移除class
  41.     // console.log(h2.classList.remove("blue"));
  42.     //试了下,不支持移除传统的class
  43.     // replace:替换
  44.     // 语法:replace:("将要替换的颜色","替换后的颜色")
  45.     h2.classList.replace("blue", "red");
  47.     // toggle:切换class
  48.     // 如果已存在 bd, 则执行remove 移除操作, 否则执行 add 添加操作
  49.     // h2.classList.add("bd"); //特意试了下
  50.     h2.classList.toggle("bd");
  51.   </script>
  52. </html>
示例截图:

事件的添加与删除操作

事件的添加与删除操作
  1. 元素对象
  2. 元素事件的监听器
  3. 事件的派发/点击广告赚钱
    添加事件.addEventListener("事件类型", 命名函数);
    删除/移除事件.removeEventListener("事件类型", 命名函数);

自定义事件:
new Event("事件名");
dispatchEvent(myclick)派发事件
setTimeout()一次性定时器
setInterval()间歇式定时器
上面的代码,一下子可能看不懂,看下面的代码示例和截图以及最后的代码:

获取元素对象

代码示例:

  1. <body>
  2.     <button>元素对象</button>
  3.     <button>元素事件的监听器</button>
  4.     <button>事件的派发/点击广告赚钱</button>
  5.   </body>
  6.   <script>
  7.     //元素对象
  8.     //   获取到一个button
  9.     const btn1 = document.querySelector("button"); //这里也可以用伪类来操作
  10.     // console.log(btn1.outerHTML);//确认了下是返回了第一个
  11.     // 对btn1赋值一个点击事件,使用event 获取所有的
  12.     // 当点击所有的button的时候,都将返回event数据
  13.     btn1.onclick = function () {
  14.       console.log(event);
  15.     };
  16.     //清除元素对象,对对象点击事件赋值一个空//就是点击后不生效
  17.     btn1.onclick = null;

这里给第一个按钮buttn 赋值了一个点击事件,并且点击后返回event所有的数据
示例截图:

事件监听器

代码部分:

  1. //事件监听器
  2.     // 使用到的语法糖:
  3.     //添加事件
  4.     //.addEventListener("事件类型", 命名函数);
  5.     //移除事件
  6.     //.removeEventListener("事件类型", 命名函数);
  7.     //使用命名函数调用的方法.addEventListener("事件类型", 命名函数);
  8.     const btn2 = document.querySelector("button:nth-of-type(2)");
  9.     btn2.addEventListener("click", function () {
  10.       console.log(event);
  11.     });
  12.     // 当前的回调事件方法不可移除
  13.     // 如果使用可移除的必须使用命名函数
  14.     //////////////例如下面的,先命名一个事件函数/////////////////////
  15.     function shijian() {
  16.       console.log(event);
  17.     }
  18.     btn2.addEventListener("click", shijian);
  19.     // ★★★★★支持第三种参数,冒泡阶段触发,★★★★★
  20.     // 移除方法
  21.     btn2.removeEventListener("click", shijian);
  22.     //确实没办法移除,我点击后匿名函数的那个,真没移除,点击照样飞
  23.     //////////////////////////

事件监听器,如果函数直接写在addEventListener中,是不可清除的,所以需要写带一个命名函数中,使用removeEventListener进行移除
代码示例:

  1.  //事件监听器
  2.     // 使用到的语法糖:
  3.     //添加事件
  4.     //.addEventListener("事件类型", 命名函数);
  5.     //移除事件
  6.     //.removeEventListener("事件类型", 命名函数);
  7.     //使用命名函数调用的方法.addEventListener("事件类型", 命名函数);
  8.     const btn2 = document.querySelector("button:nth-of-type(2)");
  9.     btn2.addEventListener("click", function () {
  10.       console.log(event);
  11.     });
  12.     // 当前的回调事件方法不可移除
  13.     // 如果使用可移除的必须使用命名函数
  14.     //////////////例如下面的,先命名一个事件函数/////////////////////
  15.     function shijian() {
  16.       console.log(event);
  17.     }
  18.     btn2.addEventListener("click", shijian);
  19.     // ★★★★★支持第三种参数,冒泡阶段触发,★★★★★
  20.     // 移除方法
  21.     btn2.removeEventListener("click", shijian);
  22.     console.log(btn2);
  23.     //确实没办法移除,我点击后匿名函数的那个,真没移除,点击照样飞
  24.     //////////////////////////

示例中,演示的是是否被点击,如果点击则返回一个event事件
看示例图:

事件派发,我感觉事件监听也就是一个事件派发的工作,我写的第二个按钮,点击出现操作,而事件派发也是点击出现第二个操作,无非第二个点击是输出了一个用户定义的一个值
  1.  //////事件派发/////////////
  2.     // 要默认给一个i一个值,刚刚照抄没抄上,发现报错,也不怪别人,函数里面也不给个默认值
  3.     let i = 1;
  4.     const btn3 = document.querySelector("button:nth-of-type(3)");
  5.     // btn3.addEventListener(
  6.     //   "click",
  7.     //   () => {
  8.     //     console.log(`老板,你真厉害,又赚了${i}元,继续努力!实现财富自由`);
  9.     //     i += 10;
  10.     //   },
  11.     //   //   下面这个false可以省略
  12.     //   // 但是这个事件派发,用const在全局声明一个i就报错 但是能执行
  13.     //   false
  14.     // );
  16.     // 用函数声明一个
  17.     function dianji() {
  18.       console.log(`老板,你真厉害,又赚了${i}元,继续努力!实现财富自由`);
  19.       i += 8;
  20.     }

示例截图:

自定义事件/定时器

自定义事件定时器就是免去了用户需要点击的操作,或者说利用监听器监听到某个值时进行的操作
使用到的代码:
setTimeout()一次性定时器
setInterval()间歇性定时器
代码示例:

  1. // 创建一个事件监听器
  2.     btn3.addEventListener("click", dianji, false);
  3.     //事件移除
  4.     // btn3.removeEventListener("click", dianji, false);
  5.     //////////////////////////////////////////////////
  6.     ////////////创建自定义事件////////////////////////
  7.     ///这里示例的创建的自定义事件是派发事件给btn3,让他自动执行
  8.     ///不需要用户进行点击操作
  9.     // 这里声明一个自定义事件 myclick = new Event("click")
  10.     // 当前new Event是程序js程序自带的一个语法糖,这么解释
  11.     const myclick = new Event("click");
  12.     // 可以理解为new event("click") 就是触发点击操作的,目前我是这么理解的
  13.     // 老师说是生成一个点击事件
  14.     btn3.dispatchEvent(myclick); //意思是btn3这个按钮派发一个点击myclick事件
  15.     // 一般配合定时器来操作
  16.     //下面使用一次性定时器
  17.     // setTimeout()一次性定时器
  18.     // setTimeout()语法是setTimeout(需要执行的命令,时间毫秒)
  19.     setTimeout(() => btn3.dispatchEvent(myclick), 2000);
  20.     // 上面是一次性的,2秒后执行派发这个函数的任务
  21.     //setInterval 间歇式执行任务,跟上面这个类似,不过不是一次性的,是间歇式的,一直执行
  22.     // setInterval(() => btn3.dispatchEvent(myclick), 2000);
  23.   </script>
  24. </html>

示例截图:

上一条：JS流程控制和模板字面量及模板函数的学习下一条：函数类型和数据类型
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多