欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

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

程序员文章站 2022-03-27 09:20:22
...
获取表单元素
传统的方法:

代码部分:

    

  1. <body>
    2. 

  2.     <form action="login.php" method="post" id="login">
    3. 

  3.       <fieldset class="login">
    4. 

  4.         <legend>登录</legend>
    5. 

  5.         <label for="user">用户名:</label>
    6. 

  6.         <input type="text" id="text" name="text" value="隔壁老卢" />
    7. 

  7.         <label for="email">您的邮箱</label>
    8. 

  8.         <input type="email" id="email" name="email" value="123456@qq.com" />
    9. 

  9.         <label for="password">您的密码</label>
    10. 

  10.         <input type="password" id="password" name="password" placeholder="请输入您的密码" />
    11. 

  11.         <button type="submit">提交</button>
    12. 

  12.       </fieldset>
    13. 

  13.     </form>
    14. 

  14.     <script>
    15. 

  15.       //传统空间获取表单元素
    16. 

  16.       //   使用document.querySelector 获取的,值为表单的id属性,
    17. 

  17.       let form = document.querySelector("#login");
    18. 

  18.       console.log(form);
    19. 

  19.       //   获取表单内的某个控件表单的值
    20. 

  20.       console.log(form.querySelector("#email").value);
    21. 

  21.     </script>
    22. 

  22.   </body>
    23.

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

推荐方式:

语法:
document.forms
代码部分:

    

  1.     //   推荐方式
    2. 

  2.       // 推荐方式这里使用了一个语法糖 document.forms[0] 返回的一个html中的表单的结合数组
    3. 

  3.       //   所以当前表单的排序也为0
    4. 

  4.       console.log(document.forms[0]);
    5. 

  5.       //   并且还可使用id来访问,比如id=login
    6. 

  6.       console.log(document.forms.login);
    7. 

  7.       //   上面两者获取的表单都是跟25行获取的表单是一样的
    8. 

  8.       //   获取下面的input name相当于id
    9. 

  9.       console.log(document.forms.login.email.value);
    10. 

  10.       //   这样上面就获取到了邮箱
    11.

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

前后端交互方面:

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

    

  1. //   前后端交互中使用的json
    2. 

  2.       //   先取到表单
    3. 

  3.       let login = document.forms.login;
    4. 

  4.       //   使用表单追加找到id为text上面的value用户输入的值
    5. 

  5.       let user = login.text.value;
    6. 

  6.       let email = login.email.value;
    7. 

  7.       let password = login.password.value;
    8. 

  8.       console.log(user, email, password);
    9. 

  9.       //   这里取值应该用{} 对象的方式
    10. 

  10.       let name = { user, email, password };
    11. 

  11.       //   对取到的值,进行json化 然后用null,2格式化,不格式化我看也能看
    12. 

  12.       let data = JSON.stringify(name, null, 2);
    13. 

  13.       console.log(data);
    14.

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

    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="zh-CN">
    3. 

  3.   <head>
    4. 

  4.     <meta charset="UTF-8" />
    5. 

  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6. 

  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7. 

  7.     <title>获取表单元素</title>
    8. 

  8.   </head>
    9. 

  9.   <body>
    10. 

  10.     <form action="login.php" method="post" id="login">
    11. 

  11.       <fieldset class="login">
    12. 

  12.         <legend>登录</legend>
    13. 

  13.         <label for="user">用户名:</label>
    14. 

  14.         <input type="text" id="text" name="text" value="隔壁老卢" />
    15. 

  15.         <label for="email">您的邮箱</label>
    16. 

  16.         <input type="email" id="email" name="email" value="123456@qq.com" />
    17. 

  17.         <label for="password">您的密码</label>
    18. 

  18.         <input type="password" id="password" name="password" value="66666" placeholder="请输入您的密码" />
    19. 

  19.         <button type="submit">提交</button>
    20. 

  20.       </fieldset>
    21. 

  21.     </form>
    22. 

  22.     <script>
    23. 

  23.       //传统空间获取表单元素
    24. 

  24.       //   使用document.querySelector 获取的,值为表单的id属性,
    25. 

  25.       //   let form = document.querySelector("#login");
    26. 

  26.       //   console.log(form);
    27. 

  27.       //   获取表单内的某个控件表单的值,这里email是form的下级,既然在上面已经声明了一个form内,就直接使用
    28. 

  28.       //   console.log(form.querySelector("#email").value);
    29. 

  29.       //   推荐方式
    30. 

  30.       // 推荐方式这里使用了一个语法糖 document.forms[0] 返回的一个html中的表单的结合数组
    31. 

  31.       //   所以当前表单的排序也为0
    32. 

  32.       console.log(document.forms[0]);
    33. 

  33.       //   并且还可使用id来访问,比如id=login
    34. 

  34.       console.log(document.forms.login);
    35. 

  35.       //   上面两者获取的表单都是跟25行获取的表单是一样的
    36. 

  36.       //   获取下面的input name相当于id
    37. 

  37.       console.log(document.forms.login.email.value);
    38. 

  38.       //   这样上面就获取到了邮箱
    39. 

  39.       /////////
    40. 

  40.       //   前后端交互中使用的json
    41. 

  41.       //   先取到表单
    42. 

  42.       let login = document.forms.login;
    43. 

  43.       //   使用表单追加找到id为text上面的value用户输入的值
    44. 

  44.       let user = login.text.value;
    45. 

  45.       let email = login.email.value;
    46. 

  46.       let password = login.password.value;
    47. 

  47.       console.log(user, email, password);
    48. 

  48.       //   这里取值应该用{} 对象的方式
    49. 

  49.       let name = { user, email, password };
    50. 

  50.       //   对取到的值,进行json化 然后用null,2格式化,不格式化我看也能看
    51. 

  51.       let data = JSON.stringify(name, null, 2);
    52. 

  52.       console.log(data);
    53. 

  53.     </script>
    54. 

  54.   </body>
    55. 

  55. </html>
    56.
遍历dom树操作
文本的类型

children 元素节点
代码部分:

    

  1. <ul class="ul">
    2. 

  2.       <li class="li">测试专用</li>
    3. 

  3.       <li class="li">测试专用</li>
    4. 

  4.       <li class="li">测试专用</li>
    5. 

  5.       <li class="li">测试专用</li>
    6. 

  6.       <li class="li">测试专用</li>
    7. 

  7.     </ul>
    8. 

  8.     <script>
    9. 

  9.       // 节点类型
    10. 

  10.       let ul = document.querySelector(".ul");
    11. 

  11.       //   dom树种.childNodes是文本节点
    12. 

  12.       //   console.log(ul.childNodes);
    13. 

  13.       console.log(ul.children);
    14. 

  14.       //   children元素节点
    15. 

  15.       // 节点类型: 元素, 文本, 属性, 注释,文档...
    16. 

  16.       // 通常只关注元素类型
    17. 

  17.     </script>
    18.

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

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

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

代码部分:

    

  1. <body>
    2. 

  2.     <ul class="ul">
    3. 

  3.       <li class="li">测试专用</li>
    4. 

  4.       <li class="li">测试专用</li>
    5. 

  5.       <li class="li">测试专用</li>
    6. 

  6.       <li class="li">测试专用</li>
    7. 

  7.       <li class="li">测试专用</li>
    8. 

  8.     </ul>
    9. 

  9.     <script>
    10. 

  10.       // 节点类型
    11. 

  11.       let ul = document.querySelector(".ul");
    12. 

  12.       //   dom树种.childNodes是文本节点
    13. 

  13.       //   console.log(ul.childNodes);
    14. 

  14.       console.log(ul.children);
    15. 

  15.       //   children元素节点
    16. 

  16.       // 节点类型: 元素, 文本, 属性, 注释,文档...
    17. 

  17.       // 通常只关注元素类型
    18. 

  18.       /////////////////////////
    19. 

  19.       //   类似数组，类似数组并不是数组，只是看起来像是数组，所以并不能用数组上的方法
    20. 

  20.       //   类似数组具有数组特征，其实从0开始
    21. 

  21.       //   具有lengrh属性，表示成员数量
    22. 

  22.       //   类似数组怎么变成真数组呢？使用Array.from(数组元素节点)
    23. 

  23.       console.log(Array.from(ul.children));
    24. 

  24.       //   或者使用之前学过的拆分的一部分...rest方法
    25. 

  25.       //   测试了下,需要加上数组的[]否则输出来的不是数组
    26. 

  26.       console.log([...ul.children]);
    27. 

  27.     </script>
    28. 

  28.   </body>
    29.

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

对节点内容的遍历操作
参数 示例 说明
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. 

  2.       //   对节点内容的遍历操作
    3. 

  3.       //像极了grid里面的代码,虽然我记不住...
    4. 

  4.       console.log([...ul.children][0]);
    5. 

  5.       console.log(([...ul.children][0].style.color = "green"));
    6. 

  6.       //   []以数组的方式进行选中
    7. 

  7.       //   ul节点的第一个li变红色
    8. 

  8.       [...ul.children][0].style.color = "red";
    9. 

  9.       //   程序自带的语法糖firstElementChild
    10. 

  10.       //   ul节点的第一个li变绿色
    11. 

  11.       ul.firstElementChild.style.color = "green";
    12. 

  12.       //   ul节点的第二个li兄弟变红色
    13. 

  13.       //   程序自带的语法糖nextElementSibling
    14. 

  14.       ul.firstElementChild.nextElementSibling.style.color = "red";
    15. 

  15.       //   ul节点的倒数第一个大兄弟变绿色
    16. 

  16.       //   倒数第一个进行操作语法糖lastElementChild
    17. 

  17.       ul.lastElementChild.style.color = "green";
    18. 

  18.       //   某一个节点的前一个兄弟的语法糖previousElementSibling,变红色
    19. 

  19.       ul.lastElementChild.previousElementSibling.style.color = "red";
    20. 

  20.       // 获取父节点/元素节点, parentElment / parentNode
    21. 

  21.       //   这里父级就一个,ul中的li的父级别就一个,就是ul本身,所以就直接选中随便一个都可以
    22. 

  22.       ul.lastElementChild.parentElement.style.border = "1px green solid";
    23.

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

贴遍历dom数完整代码:

    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="zh-CN">
    3. 

  3.   <head>
    4. 

  4.     <meta charset="UTF-8" />
    5. 

  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6. 

  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7. 

  7.     <title>遍历dom树</title>
    8. 

  8.   </head>
    9. 

  9.   <body>
    10. 

  10.     <ul class="ul">
    11. 

  11.       <li class="li">测试专用</li>
    12. 

  12.       <li class="li">测试专用</li>
    13. 

  13.       <li class="li">测试专用</li>
    14. 

  14.       <li class="li">测试专用</li>
    15. 

  15.       <li class="li">测试专用</li>
    16. 

  16.     </ul>
    17. 

  17.     <script>
    18. 

  18.       // 节点类型
    19. 

  19.       let ul = document.querySelector(".ul");
    20. 

  20.       //   dom树种.childNodes是文本节点
    21. 

  21.       //   console.log(ul.childNodes);
    22. 

  22.       console.log(ul.children);
    23. 

  23.       //   children元素节点
    24. 

  24.       // 节点类型: 元素, 文本, 属性, 注释,文档...
    25. 

  25.       // 通常只关注元素类型
    26. 

  26.       /////////////////////////
    27. 

  27.       //   类似数组，类似数组并不是数组，只是看起来像是数组，所以并不能用数组上的方法
    28. 

  28.       //   类似数组具有数组特征，其实从0开始
    29. 

  29.       //   具有lengrh属性，表示成员数量
    30. 

  30.       //   类似数组怎么变成真数组呢？使用Array.from(数组元素节点)
    31. 

  31.       console.log(Array.from(ul.children));
    32. 

  32.       //   或者使用之前学过的拆分的一部分...rest方法
    33. 

  33.       //   测试了下,需要加上数组的[]否则输出来的不是数组
    34. 

  34.       console.log([...ul.children]);
    35. 

  35.       //////////////////////////////
    36. 

  36.       //   对节点内容的遍历操作
    37. 

  37.       //像极了grid里面的代码,虽然我记不住...
    38. 

  38.       console.log([...ul.children][0]);
    39. 

  39.       console.log(([...ul.children][0].style.color = "green"));
    40. 

  40.       //   []以数组的方式进行选中
    41. 

  41.       //   ul节点的第一个li变红色
    42. 

  42.       [...ul.children][0].style.color = "red";
    43. 

  43.       //   程序自带的语法糖firstElementChild
    44. 

  44.       //   ul节点的第一个li变绿色
    45. 

  45.       ul.firstElementChild.style.color = "green";
    46. 

  46.       //   ul节点的第二个li兄弟变红色
    47. 

  47.       //   程序自带的语法糖nextElementSibling
    48. 

  48.       ul.firstElementChild.nextElementSibling.style.color = "red";
    49. 

  49.       //   ul节点的倒数第一个大兄弟变绿色
    50. 

  50.       //   倒数第一个进行操作语法糖lastElementChild
    51. 

  51.       ul.lastElementChild.style.color = "green";
    52. 

  52.       //   某一个节点的前一个兄弟的语法糖previousElementSibling,变红色
    53. 

  53.       ul.lastElementChild.previousElementSibling.style.color = "red";
    54. 

  54.       // 获取父节点/元素节点, parentElment / parentNode
    55. 

  55.       //   这里父级就一个,ul中的li的父级别就一个,就是ul本身,所以就直接选中随便一个都可以
    56. 

  56.       ul.lastElementChild.parentElement.style.border = "1px green solid";
    57. 

  57.     </script>
    58. 

  58.   </body>
    59. 

  59. </html>
    60.
dom元素的增删改查（完整代码将整理到本项结束之后）

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

示例代码：

    

  1.  <script>
    2. 

  2.     //   语法糖 createElement创建节点
    3. 

  3.     // 语法糖 .append在某个元素节点下面追加节点
    4. 

  4.     // 语法糖.textContent对某个节点的text操作
    5. 

  5.     // 语法糖.outerHTML查看自己全局定义的html中的元素
    6. 

  6.     // .createElement程序自带的语法糖，创建某个元素或者节点使用的
    7. 

  7.     let ul = document.createElement("ul");
    8. 

  8.     // 使用.append进行对某个元素下面追加节点
    9. 

  9.     // 下面是在html页面中的body下追加一个ul节点
    10. 

  10.     document.body.append(ul);
    11. 

  11.     //////////////////////////////
    12. 

  12.     //利用for循环对ul添加li元素
    13. 

  13.     for (i = 0; i < 5; i++) {
    14. 

  14.       // 创建li节点
    15. 

  15.       const li = document.createElement("li");
    16. 

  16.       //   li节点增加text文本
    17. 

  17.       li.textContent = "测试" + (i + 1);
    18. 

  18.       //   在ul下面追加一个li节点，默认为0，追加最大为5个
    19. 

  19.       ul.append(li);
    20. 

  20.     }
    21.

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

节点的前后追加部分

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

    

  1.  // 控制台查看节点
    2. 

  2.     console.log(ul);
    3. 

  3.     // outerHTML查看某个元素，或者某个页面的html页面节点
    4. 

  4.     // 试了下，只能查看自己全局创建的节点
    5. 

  5.     console.log(ul.outerHTML);
    6. 

  6.     /////////////////////////////
    7. 

  7.     //////节点之前插入before
    8. 

  8.     // 老样子，先创建一个li节点
    9. 

  9.     let li = document.createElement("li");
    10. 

  10.     // 对节点进行css 添加字符等操作
    11. 

  11.     li.style.backgroundColor = "green";
    12. 

  12.     li.textContent = "选中的节点前面那个";
    13. 

  13.     // 声明一个l，l选中的单个节点，ul下面第三个li
    14. 

  14.     const l = document.querySelector("ul li:nth-of-type(3)");
    15. 

  15.     // 对l，也就是第三个li前面增加一个节点，li
    16. 

  16.     l.before(li);
    17. 

  17.     // 在节点之后插入: after
    18. 

  18.     // cloneNode(true): 克隆节点, true, 复制元素后代的内容
    19. 

  19.     // .cloneNode(true/false)真假 克隆节点li，文本为真，如果为真，就连内容css一起拿过来，否则不拿
    20. 

  20.     let cloneLi = li.cloneNode(true);
    21. 

  21.     // 在声明的l节点 第三个节点后面插入
    22. 

  22.     l.after(cloneLi);
    23.
对父标签的操作

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

    

  1. // 7. 在父节点的标签为插入点,进行插入元素
    2. 

  2.     // insertAdjacentElement('插入位置', 元素)
    3. 

  3.     // 插入位置有四个
    4. 

  4.     // afterBegin: 开始标签之后,第一个子元素
    5. 

  5.     // beforeBegin: 开始标签之前,是它的前一个兄弟元素
    6. 

  6.     // afterEnd: 结束标签之后,它的下一个兄弟元素
    7. 

  7.     // beforeEnd: 结束标签之前,它的最后一个子元素
    8. 

  8.     // 因为在上面已经创建了ul，所以不需再次创建ul，直接在ul上面增加css
    9. 

  9.     ul.style.border = "1px green solid";
    10. 

  10.     // 声明一个h3，页面增加一个h3标签
    11. 

  11.     let h3 = document.createElement("h3");
    12. 

  12.     // h3标签利用textcontent 添加一个文本
    13. 

  13.     h3.textContent = "弄点商品进去吧";
    14. 

  14.     // 对锁定ul位置，也就是插入的位置，位置有4个，在ul开始标签哪里前面 是前面进行插入h3
    15. 

  15.     ul.insertAdjacentElement("beforeBegin", h3);
    16. 

  16.     // 创建一个button标签
    17. 

  17.     let button = document.createElement("button");
    18. 

  18.     // 这里要注意的是，针对button标签的内容需要用=号并且加“”
    19. 

  19.     button.textContent = "结算商品";
    20. 

  20.     ul.insertAdjacentElement("afterend", button);
    21. 

  21.     button.style.backgroundColor = "green";
    22. 

  22.     button.style.color = "#fff";
    23. 

  23.     button.style.clear = "none";
    24. 

  24.     button.style.float = "left";
    25. 

  25.     button.style.border = "0";
    26. 

  26.     button.style.cursor = "pointer";
    27.
对节点的替换

replaceChild节点的替换

    

  1. // 替换 replaceChild
    2. 

  2.     // 插入的节点，就是首先找到要插入的节点
    3. 

  3.     // 使用伪类进行查找位置
    4. 

  4.     let li5 = document.querySelector("ul li:last-of-type");
    5. 

  5.     // 需要插入的节点
    6. 

  6.     // 新建需要插入的节点
    7. 

  7.     let a = document.createElement("a");
    8. 

  8.     a.textContent = "清除商品";
    9. 

  9.     a.href = "https://www.baidu.com";
    10. 

  10.     // 这个地方要注意的是，你插入的li标签在ul下面，所以是ul.replaceChild(插入的节点名，节点位置)
    11. 

  11.     ul.replaceChild(a, li5);
    12.
删除某个节点

.remove

    

  1.  // 删除某个节点remove
    2. 

  2.     // 例如，删除ul下面最后一个标签,已经不管他是a，还是li了
    3. 

  3.     ul.lastElementChild.remove();
    4.

帖整段代码部分：

    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="zh-CN">
    3. 

  3.   <head>
    4. 

  4.     <meta charset="UTF-8" />
    5. 

  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6. 

  6.     <title>dom元素的增删改查</title>
    7. 

  7.   </head>
    8. 

    9. 

  9.   <body></body>
    10. 

  10.   <style></style>
    11. 

  11.   <script>
    12. 

  12.     //   语法糖 createElement创建节点
    13. 

  13.     // 语法糖 .append在某个元素节点下面追加节点
    14. 

  14.     // 语法糖.textContent对某个节点的text操作
    15. 

  15.     // 语法糖.outerHTML查看自己全局定义的html中的元素
    16. 

  16.     // .createElement程序自带的语法糖，创建某个元素或者节点使用的
    17. 

  17.     let ul = document.createElement("ul");
    18. 

  18.     // 使用.append进行对某个元素下面追加节点
    19. 

  19.     // 下面是在html页面中的body下追加一个ul节点
    20. 

  20.     document.body.append(ul);
    21. 

  21.     //////////////////////////////
    22. 

  22.     //利用for循环对ul添加li元素
    23. 

  23.     for (i = 0; i < 5; i++) {
    24. 

  24.       // 创建li节点
    25. 

  25.       const li = document.createElement("li");
    26. 

  26.       //   li节点增加text文本
    27. 

  27.       li.textContent = "测试" + (i + 1);
    28. 

  28.       //   在ul下面追加一个li节点，默认为0，追加最大为5个
    29. 

  29.       ul.append(li);
    30. 

  30.     }
    31. 

  31.     // 控制台查看节点
    32. 

  32.     console.log(ul);
    33. 

  33.     // outerHTML查看某个元素，或者某个页面的html页面节点
    34. 

  34.     // 试了下，只能查看自己全局创建的节点
    35. 

  35.     console.log(ul.outerHTML);
    36. 

  36.     /////////////////////////////
    37. 

  37.     //////节点之前插入before
    38. 

  38.     // 老样子，先创建一个li节点
    39. 

  39.     let li = document.createElement("li");
    40. 

  40.     // 对节点进行css 添加字符等操作
    41. 

  41.     li.style.backgroundColor = "green";
    42. 

  42.     li.textContent = "选中的节点前面那个";
    43. 

  43.     // 声明一个l，l选中的单个节点，ul下面第三个li
    44. 

  44.     const l = document.querySelector("ul li:nth-of-type(3)");
    45. 

  45.     // 对l，也就是第三个li前面增加一个节点，li
    46. 

  46.     l.before(li);
    47. 

  47.     // 在节点之后插入: after
    48. 

  48.     // cloneNode(true): 克隆节点, true, 复制元素后代的内容
    49. 

  49.     // .cloneNode(true/false)真假 克隆节点li，文本为真，如果为真，就连内容css一起拿过来，否则不拿
    50. 

  50.     let cloneLi = li.cloneNode(true);
    51. 

  51.     // 在声明的l节点 第三个节点后面插入
    52. 

  52.     l.after(cloneLi);
    53. 

  53.     ////////////////////////////////
    54. 

  54.     ///////对父标签的操作 父标签的前后操作
    55. 

  55.     /////////////////////////////////
    56. 

  56.     // 7. 在父节点的标签为插入点,进行插入元素
    57. 

  57.     // insertAdjacentElement('插入位置', 元素)
    58. 

  58.     // 插入位置有四个
    59. 

  59.     // afterBegin: 开始标签之后,第一个子元素
    60. 

  60.     // beforeBegin: 开始标签之前,是它的前一个兄弟元素
    61. 

  61.     // afterEnd: 结束标签之后,它的下一个兄弟元素
    62. 

  62.     // beforeEnd: 结束标签之前,它的最后一个子元素
    63. 

  63.     // 因为在上面已经创建了ul，所以不需再次创建ul，直接在ul上面增加css
    64. 

  64.     ul.style.border = "1px green solid";
    65. 

  65.     // 声明一个h3，页面增加一个h3标签
    66. 

  66.     let h3 = document.createElement("h3");
    67. 

  67.     // h3标签利用textcontent 添加一个文本
    68. 

  68.     h3.textContent = "弄点商品进去吧";
    69. 

  69.     // 对锁定ul位置，也就是插入的位置，位置有4个，在ul开始标签哪里前面 是前面进行插入h3
    70. 

  70.     ul.insertAdjacentElement("beforeBegin", h3);
    71. 

  71.     // 创建一个button标签
    72. 

  72.     let button = document.createElement("button");
    73. 

  73.     // 这里要注意的是，针对button标签的内容需要用=号并且加“”
    74. 

  74.     button.textContent = "结算商品";
    75. 

  75.     ul.insertAdjacentElement("afterend", button);
    76. 

  76.     button.style.backgroundColor = "green";
    77. 

  77.     button.style.color = "#fff";
    78. 

  78.     button.style.clear = "none";
    79. 

  79.     button.style.float = "left";
    80. 

  80.     button.style.border = "0";
    81. 

  81.     button.style.cursor = "pointer";
    82. 

  82.     // 替换 replaceChild
    83. 

  83.     // 插入的节点，就是首先找到要插入的节点
    84. 

  84.     // 使用伪类进行查找位置
    85. 

  85.     let li5 = document.querySelector("ul li:last-of-type");
    86. 

  86.     // 需要插入的节点
    87. 

  87.     // 新建需要插入的节点
    88. 

  88.     let a = document.createElement("a");
    89. 

  89.     a.textContent = "清除商品";
    90. 

  90.     a.href = "https://www.baidu.com";
    91. 

  91.     // 这个地方要注意的是，你插入的li标签在ul下面，所以是ul.replaceChild(插入的节点名，节点位置)
    92. 

  92.     ul.replaceChild(a, li5);
    93. 

  93.     // 删除某个节点remove
    94. 

  94.     // 例如，删除ul下面最后一个标签,已经不管他是a，还是li了
    95. 

  95.     ul.lastElementChild.remove();
    96. 

  96.   </script>
    97. 

  97. </html>
    98.
js对元素的操作

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

并且outerHTML可对某个节点清空，或者替换操作
    

  1. // 替换
    2. 

  2.       //   box.outerHTML = url;
    3. 

    4. 

  4.       // 清空/删除
    5. 

  5.       box.outerHTML = null;
    6.

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

    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="zh-CN">
    3. 

  3.   <head>
    4. 

  4.     <meta charset="UTF-8" />
    5. 

  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6. 

  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7. 

  7.     <title>js操作元素内容</title>
    8. 

  8.   </head>
    9. 

  9.   <body>
    10. 

  10.     <div class="box">
    11. 

  11.       <style>
    12. 

  12.         h2 {
    13. 

  13.           color: red;
    14. 

  14.         }
    15. 

  15.       </style>
    16. 

  16.       <h2>通知</h2>
    17. 

  17.       <span style="display: none">试用期员工不参加</span>
    18. 

  18.       <p>今天下午17:00开会, 开发部, 运营部全体参加~~</p>
    19. 

  19.     </div>
    20. 

    21. 

  21.     <script>
    22. 

  22.       const box = document.querySelector(".box");
    23. 

  23.       // textContent: 返回元素以及后代元素中的所有文本内容,包括 <style>, display:none的内容
    24. 

  24.       console.log(box.textContent);
    25. 

  25.       // innerText: 返回元素以及后代中的文本
    26. 

  26.       console.log(box.innerText);
    27. 

  27.       // innerHTML: 返回内部的html字符串
    28. 

  28.       console.log(box.innerHTML);
    29. 

    30. 

  30.       // textContent, innerText ? textContent 首选, innerText,2016才成为w3c标准
    31. 

    32. 

  32.       // innerText, innerHTML 区别?
    33. 

  33.       let p = document.createElement("p");
    34. 

  34.       let url = '<a href="https://php.cn">php.cn</a>';
    35. 

  35.       p.innerText = url;
    36. 

  36.       box.append(p);
    37. 

  37.       p = document.createElement("p");
    38. 

  38.       p.innerHTML = url;
    39. 

  39.       box.append(p);
    40. 

    41. 

  41.       // innerHTML: 可解析html字符,  innerText: 不解析html字符
    42. 

    43. 

  43.       // outerHTML: 返回当前节点的自身的html字符串
    44. 

  44.       console.log(box.outerHTML);
    45. 

    46. 

  46.       // 替换
    47. 

  47.       //   box.outerHTML = url;
    48. 

    49. 

  49.       // 清空/删除
    50. 

  50.       box.outerHTML = null;
    51. 

  51.     </script>
    52. 

  52.   </body>
    53. 

  53. </html>
    54.
留言板实操部分：
    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="zh-CN">
    3. 

  3.   <head>
    4. 

  4.     <meta charset="UTF-8" />
    5. 

  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6. 

  6.     <title>留言板实操</title>
    7. 

  7.   </head>
    8. 

    9. 

  9.   <body>
    10. 

  10.     <!-- onkeydown:键盘按下时触发 -->
    11. 

  11.     <!-- 其中onkeydown="js函数" -->
    12. 

  12.     <!-- event返回事件，总是可用，程序自带 -->
    13. 

  13.     <!-- 当前页面中的elent是事件对象 在input事件框中，经常使用，因为当敲下回车后会返回input事件框返回的所有内容 -->
    14. 

  14.     <input type="text" onkeydown="anxia(this)" placeholder="请输入留言内容" autofocus />
    15. 

  15.     <ul class="list"></ul>
    16. 

  16.   </body>
    17. 

  17.   <script>
    18. 

  18.     // 声明一个函数 函数名就是键盘按下时触发的函数名
    19. 

  19.     function anxia(ele) {
    20. 

  20.       // 事件对象，回车后返回的input框
    21. 

  21.       console.log(ele);
    22. 

  22.       console.log(event.key);
    23. 

  23.       // event敲一下回车，会返回所有的事件信息
    24. 

  24.       // 在控制台可以看出，敲会车头key返回的值为key，所以当event.key=Enter时说明用户进行了回车操作
    25. 

  25.       // 由此，我们可以进行判断用户是否敲了回车操作
    26. 

  26.       // event总是可以用的
    27. 

  27.       if (event.key === "Enter") {
    28. 

  28.         // 获取留言列表的容器 就是用户发送的数据存放的地方
    29. 

  29.         const ul = document.querySelector(".list");
    30. 

  30.         // 判断留言内容是否为空
    31. 

  31.         // ele是文本框， 就是文本框下面的vlaue的长度
    32. 

  32.         if (ele.value.length === 0) {
    33. 

  33.           alert("留言内容为空，请重新输入");
    34. 

  34.           // 返回给onkeydown事件返回光标
    35. 

  35.           ele.focus();
    36. 

  36.           // 没有内容所以返回一个假
    37. 

  37.           return false;
    38. 

  38.         }
    39. 

  39.         // 添加一条留言
    40. 

  40.         //   li.textContent = ele.value;
    41. 

  41.         //   ul.append(li);
    42. 

  42.         //   before
    43. 

  43.         //   ul.firstElementChild.before(li);
    44. 

  44.         //   插入到起始标签的后面就永远是第一条
    45. 

  45.         //上面是老师的部分
    46. 

  46.         const li = document.createElement("li");
    47. 

  47.         li.textContent = ele.value;
    48. 

  48.         ul.append(li);
    49. 

  49.         // before 某个元素之前插入，之前学的课程
    50. 

  50.         // ul.firstElementChild.before(li);
    51. 

  51.         // 删除留言功能
    52. 

  52.         // 获取里的html节点
    53. 

  53.         // 这里按下删除，是一个del函数事件，需要写一个函数事件，清空的事件
    54. 

  54.         console.log(li.innerHTML); //获取到当前的li标签的文字部分
    55. 

  55.         // li.textContent = ele.value //原来的获取留言部分，赋值给li.innerHTML
    56. 

  56.         // 相当于在ele.value后面增加一段html代码 换成了innerHTML
    57. 

  57.         // parentNode父元素
    58. 

  58.         li.innerHTML = ele.value + "<button onclick='del(this.parentNode)'>删除</button>";
    59. 

  59.         ul.insertAdjacentElement("afterBegin", li);
    60. 

  60.         // 清空留言的输入框，为下一次做准备
    61. 

  61.         ele.value = null;
    62. 

  62.         // 重置焦点到留言框中，方便用户再次输入
    63. 

  63.         ele.focus();
    64. 

  64.       }
    65. 

  65.     }
    66. 

    67. 

  67.     function del(ele) {
    68. 

  68.       // ele.remove();
    69. 

  69.       // remove清空删除
    70. 

  70.       // 或者使用ele.innerHTML = null;
    71. 

  71.       // 给用户一个提示语句
    72. 

  72.       // confirm 是否删除 系统自带的方法
    73. 

  73.       // console.log(confirm("是否删除？"));
    74. 

  74.       // 通过浏览器控制台发现，如果是删除，返回的状态为true 取消为false
    75. 

  75.       if (confirm("是否删除？") == true) {
    76. 

  76.         ele.remove();
    77. 

  77.       } else {
    78. 

  78.         return false;
    79. 

  79.       }
    80. 

  80.       // 简写部分
    81. 

  81.       // if confirm("是否删除？" ? ele.remove() : false;
    82. 

  82.     }
    83. 

  83.     ///下面是老师的部分
    84. 

  84.     // console.log(ele);
    85. 

  85.     // 方案1
    86. 

  86.     // ele.remove();
    87. 

  87.     // 方案2
    88. 

  88.     // ele.outerHTML = null;
    89. 

    90. 

  90.     // 应该删除前让用户确认一下
    91. 

  91.     // console.log(confirm("是否删除?"));
    92. 

  92.     // 点击"确定"返回 true , 取消 返回  false
    93. 

  93.     // if (confirm("是否删除?")) {
    94. 

  94.     //   ele.remove();
    95. 

  95.     // }
    96. 

  96.   </script>
    97. 

  97. </html>
    98.
自定义属性data-对象的解释

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

    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="zh-CN">
    3. 

  3.   <head>
    4. 

  4.     <meta charset="UTF-8" />
    5. 

  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6. 

  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7. 

  7.     <title>自定义属性dataset对象</title>
    8. 

  8.   </head>
    9. 

  9.   <body>
    10. 

  10.     <!-- 元素属性有二类:
    11. 

  11.       * 1. 内置的预定义属性, 如 id, class,title,style等
    12. 

  12.       * 2. 用户自定义属性,主要用于js脚本控制, 以 "data-""为前缀,如 data-key -->
    13. 

  13.     <div class="btn-group">
    14. 

  14.       <!-- onclick: 内置/预定义事件属性 -->
    15. 

  15.       <!-- data-index: 自定义属性 -->
    16. 

  16.       <button data-index="1" onclick="getIndex(this)">btn1</button>
    17. 

  17.       <button data-index="2" onclick="getIndex(this)">btn2</button>
    18. 

  18.       <button data-index="3" onclick="getIndex(this)">btn3</button>
    19. 

  19.     </div>
    20. 

  20.     <!-- 自定义属性还可以将一些数据保存到标签中 -->
    21. 

  21.     <!-- data-emial, data-work-unit  -->
    22. 

  22.     <div class="user" data-email="498668472@qq.com" data-work-unit="">猪老师</div>
    23. 

  23.   </body>
    24. 

  24.   <script>
    25. 

  25.     function getIndex(btn) {
    26. 

  26.       // 这里声明了一个函数名字叫getIndex 对象为btn,
    27. 

  27.       // 自定义属性data-等于dataset程序自带的这个属性index等于data-后面的index
    28. 

  28.       // data-是前缀, 写法是data-prop 就是data-属性
    29. 

  29.       console.log("点击了", btn.dataset.index, "按钮");
    30. 

  30.     }
    31. 

  31.     const user = document.querySelector(".user");
    32. 

  32.     //  通过class先拿到user的节点 然后通过user节点拿到.dataset
    33. 

  33.     console.log(user.dataset.email);
    34. 

  34.     // 工作单位是data-work-unit 需要对这种的转一下,转成workUnit 驼峰
    35. 

  35.     console.log(user.dataset.workUnit);
    36. 

  36.     // 对data-值的修改
    37. 

  37.     user.dataset.workUnit = "2";
    38. 

  38.     console.log(user.dataset.workUnit);
    39. 

  39.   </script>
    40. 

  40. </html>
    41.

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

js操作css属性

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

    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="zh-CN">
    3. 

  3.   <head>
    4. 

  4.     <meta charset="UTF-8" />
    5. 

  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6. 

  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7. 

  7.     <title>js操作css属性</title>
    8. 

  8.   </head>
    9. 

  9.   <style>
    10. 

  10.     div {
    11. 

  11.       width: 150px;
    12. 

  12.       height: 100px;
    13. 

  13.     }
    14. 

  14.   </style>
    15. 

  15.   <body>
    16. 

  16.     <div style="color: red; background-color: lightgreen">Hello</div>
    17. 

  17.   </body>
    18. 

  18.   <script>
    19. 

  19.     //   首先拿到div元素
    20. 

  20.     const div = document.querySelector("div");
    21. 

  21.     // 行内样式style
    22. 

  22.     console.log(div.style.color);
    23. 

  23.     // 控制台输出了red
    24. 

  24.     console.log(div.style.backgroundColor);
    25. 

  25.     // 控制台输出了lightgreen
    26. 

  26.     // 计算行内样式 内部及行内或者外部的style css等
    27. 

  27.     // getComputedStyle程序自带的一个语法糖 全局属性,是在window里面的 一般有两个元素,有一个是获取伪元素的
    28. 

  28.     //   使用方法window.getComputedStyle(需要拿的标签).标签内的某个元素
    29. 

  29.     console.log(window.getComputedStyle(div).width);
    30. 

  30.     console.log(window.getComputedStyle(div).height);
    31. 

  31.     // 声明一个宽度,并对宽度进行修改
    32. 

  32.     const width = window.getComputedStyle(div).width;
    33. 

  33.     console.log(width); //拿到的竟然是一个150px 发现没有
    34. 

  34.     // 这时候用到一个语法糖 parseInt
    35. 

  35.     // parseInt(width) === 150 也就是一个数值 所以可以对他进行修改
    36. 

  36.     console.log(parseInt(width)); //这时候浏览器控制台输出的是150,并不是150px
    37. 

  37.     // 这时候对值进行修改
    38. 

  38.     div.style.width = parseInt(width) + 500 + "px";
    39. 

  39.   </script>
    40. 

  40. </html>
    41.

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

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

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

示例代码:
    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="zh-CN">
    3. 

  3.   <head>
    4. 

  4.     <meta charset="UTF-8" />
    5. 

  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6. 

  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7. 

  7.     <title>js操作属性之class属性进步版classlist对象</title>
    8. 

  8.   </head>
    9. 

  9.   <style>
    10. 

  10.     .red {
    11. 

  11.       color: red;
    12. 

  12.     }
    13. 

  13.     .bgc {
    14. 

  14.       background-color: yellow;
    15. 

  15.     }
    16. 

  16.     .blue {
    17. 

  17.       color: blue;
    18. 

  18.     }
    19. 

  19.     .bd {
    20. 

  20.       border: 5px solid #000;
    21. 

  21.     }
    22. 

  22.   </style>
    23. 

  23.   <body>
    24. 

  24.     <h2>你好啊</h2>
    25. 

  25.   </body>
    26. 

  26.   <!-- 传统方式属性 -->
    27. 

  27.   <script>
    28. 

  28.     const h2 = document.querySelector("h2");
    29. 

  29.     // className 也是程序自带的一个语法糖,使用某一个颜色,但是颜色需要在当前页面的style中
    30. 

  30.     h2.className = "red";
    31. 

  31.     // 上面是传统的方式
    32. 

  32.     // 下面是新方式,用到的代码为.classlist.add 对象
    33. 

  33.     h2.classList.add("blue");
    34. 

    35. 

  35.     //contains:判断
    36. 

  36.     // 对当前class进行判断,判断当前的class是否一致
    37. 

  37.     // contains判断,直接在需要判断的属性后面添加.contains("需要判断的颜色")
    38. 

  38.     console.log(h2.classList.contains("blue")); //需要打印一下,不打印你控制台可能看不见
    39. 

  39.     h2.classList.contains("blue");
    40. 

  40.     //remove:移除class
    41. 

  41.     // console.log(h2.classList.remove("blue"));
    42. 

  42.     //试了下,不支持移除传统的class
    43. 

  43.     // replace:替换
    44. 

  44.     // 语法:replace:("将要替换的颜色","替换后的颜色")
    45. 

  45.     h2.classList.replace("blue", "red");
    46. 

    47. 

  47.     // toggle:切换class
    48. 

  48.     // 如果已存在 bd, 则执行remove 移除操作, 否则执行 add 添加操作
    49. 

  49.     // h2.classList.add("bd"); //特意试了下
    50. 

  50.     h2.classList.toggle("bd");
    51. 

  51.   </script>
    52. 

  52. </html>
    53.
示例截图:

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

事件的添加与删除操作

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

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

获取元素对象

代码示例:

    

  1. <body>
    2. 

  2.     <button>元素对象</button>
    3. 

  3.     <button>元素事件的监听器</button>
    4. 

  4.     <button>事件的派发/点击广告赚钱</button>
    5. 

  5.   </body>
    6. 

  6.   <script>
    7. 

  7.     //元素对象
    8. 

  8.     //   获取到一个button
    9. 

  9.     const btn1 = document.querySelector("button"); //这里也可以用伪类来操作
    10. 

  10.     // console.log(btn1.outerHTML);//确认了下是返回了第一个
    11. 

  11.     // 对btn1赋值一个点击事件,使用event 获取所有的
    12. 

  12.     // 当点击所有的button的时候,都将返回event数据
    13. 

  13.     btn1.onclick = function () {
    14. 

  14.       console.log(event);
    15. 

  15.     };
    16. 

  16.     //清除元素对象,对对象点击事件赋值一个空//就是点击后不生效
    17. 

  17.     btn1.onclick = null;
    18.

这里给第一个按钮buttn 赋值了一个点击事件,并且点击后返回event所有的数据
示例截图:
通过js获取元素表单以及遍历dom树和对元素的增删改查js操作内容演练实战了留言板的操作并对自定义属性: dataset对象初步的了解以及对js操作class和classList属性对象事件的添加与删除练习与了解

事件监听器

代码部分:

    

  1. //事件监听器
    2. 

  2.     // 使用到的语法糖:
    3. 

  3.     //添加事件
    4. 

  4.     //.addEventListener("事件类型", 命名函数);
    5. 

  5.     //移除事件
    6. 

  6.     //.removeEventListener("事件类型", 命名函数);
    7. 

  7.     //使用命名函数调用的方法.addEventListener("事件类型", 命名函数);
    8. 

  8.     const btn2 = document.querySelector("button:nth-of-type(2)");
    9. 

  9.     btn2.addEventListener("click", function () {
    10. 

  10.       console.log(event);
    11. 

  11.     });
    12. 

  12.     // 当前的回调事件方法不可移除
    13. 

  13.     // 如果使用可移除的必须使用命名函数
    14. 

  14.     //////////////例如下面的,先命名一个事件函数/////////////////////
    15. 

  15.     function shijian() {
    16. 

  16.       console.log(event);
    17. 

  17.     }
    18. 

  18.     btn2.addEventListener("click", shijian);
    19. 

  19.     // ★★★★★支持第三种参数,冒泡阶段触发,★★★★★
    20. 

  20.     // 移除方法
    21. 

  21.     btn2.removeEventListener("click", shijian);
    22. 

  22.     //确实没办法移除,我点击后匿名函数的那个,真没移除,点击照样飞
    23. 

  23.     //////////////////////////
    24.

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

    

  1.  //事件监听器
    2. 

  2.     // 使用到的语法糖:
    3. 

  3.     //添加事件
    4. 

  4.     //.addEventListener("事件类型", 命名函数);
    5. 

  5.     //移除事件
    6. 

  6.     //.removeEventListener("事件类型", 命名函数);
    7. 

  7.     //使用命名函数调用的方法.addEventListener("事件类型", 命名函数);
    8. 

  8.     const btn2 = document.querySelector("button:nth-of-type(2)");
    9. 

  9.     btn2.addEventListener("click", function () {
    10. 

  10.       console.log(event);
    11. 

  11.     });
    12. 

  12.     // 当前的回调事件方法不可移除
    13. 

  13.     // 如果使用可移除的必须使用命名函数
    14. 

  14.     //////////////例如下面的,先命名一个事件函数/////////////////////
    15. 

  15.     function shijian() {
    16. 

  16.       console.log(event);
    17. 

  17.     }
    18. 

  18.     btn2.addEventListener("click", shijian);
    19. 

  19.     // ★★★★★支持第三种参数,冒泡阶段触发,★★★★★
    20. 

  20.     // 移除方法
    21. 

  21.     btn2.removeEventListener("click", shijian);
    22. 

  22.     console.log(btn2);
    23. 

  23.     //确实没办法移除,我点击后匿名函数的那个,真没移除,点击照样飞
    24. 

  24.     //////////////////////////
    25.

示例中,演示的是是否被点击,如果点击则返回一个event事件
看示例图:
通过js获取元素表单以及遍历dom树和对元素的增删改查js操作内容演练实战了留言板的操作并对自定义属性: dataset对象初步的了解以及对js操作class和classList属性对象事件的添加与删除练习与了解

事件派发,我感觉事件监听也就是一个事件派发的工作,我写的第二个按钮,点击出现操作,而事件派发也是点击出现第二个操作,无非第二个点击是输出了一个用户定义的一个值
    

  1.  //////事件派发/////////////
    2. 

  2.     // 要默认给一个i一个值,刚刚照抄没抄上,发现报错,也不怪别人,函数里面也不给个默认值
    3. 

  3.     let i = 1;
    4. 

  4.     const btn3 = document.querySelector("button:nth-of-type(3)");
    5. 

  5.     // btn3.addEventListener(
    6. 

  6.     //   "click",
    7. 

  7.     //   () => {
    8. 

  8.     //     console.log(`老板,你真厉害,又赚了${i}元,继续努力!实现财富*`);
    9. 

  9.     //     i += 10;
    10. 

  10.     //   },
    11. 

  11.     //   //   下面这个false可以省略
    12. 

  12.     //   // 但是这个事件派发,用const在全局声明一个i就报错 但是能执行
    13. 

  13.     //   false
    14. 

  14.     // );
    15. 

    16. 

  16.     // 用函数声明一个
    17. 

  17.     function dianji() {
    18. 

  18.       console.log(`老板,你真厉害,又赚了${i}元,继续努力!实现财富*`);
    19. 

  19.       i += 8;
    20. 

  20.     }
    21.

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

自定义事件/定时器

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

    

  1. // 创建一个事件监听器
    2. 

  2.     btn3.addEventListener("click", dianji, false);
    3. 

  3.     //事件移除
    4. 

  4.     // btn3.removeEventListener("click", dianji, false);
    5. 

  5.     //////////////////////////////////////////////////
    6. 

  6.     ////////////创建自定义事件////////////////////////
    7. 

  7.     ///这里示例的创建的自定义事件是派发事件给btn3,让他自动执行
    8. 

  8.     ///不需要用户进行点击操作
    9. 

  9.     // 这里声明一个自定义事件 myclick = new Event("click")
    10. 

  10.     // 当前new Event是程序js程序自带的一个语法糖,这么解释
    11. 

  11.     const myclick = new Event("click");
    12. 

  12.     // 可以理解为new event("click") 就是触发点击操作的,目前我是这么理解的
    13. 

  13.     // 老师说是生成一个点击事件
    14. 

  14.     btn3.dispatchEvent(myclick); //意思是btn3这个按钮派发一个点击myclick事件
    15. 

  15.     // 一般配合定时器来操作
    16. 

  16.     //下面使用一次性定时器
    17. 

  17.     // setTimeout()一次性定时器
    18. 

  18.     // setTimeout()语法是setTimeout(需要执行的命令,时间毫秒)
    19. 

  19.     setTimeout(() => btn3.dispatchEvent(myclick), 2000);
    20. 

  20.     // 上面是一次性的,2秒后执行派发这个函数的任务
    21. 

  21.     //setInterval 间歇式执行任务,跟上面这个类似,不过不是一次性的,是间歇式的,一直执行
    22. 

  22.     // setInterval(() => btn3.dispatchEvent(myclick), 2000);
    23. 

  23.   </script>
    24. 

  24. </html>
    25.

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

上一篇： 动态数组是如何创建的

下一篇： jQuery中Smart UI是什么

推荐阅读