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

dom 操作与事件

程序员文章站 2022-05-21 22:56:45
...

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>获取表单元素</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="username">账号:</label>
  38. <input
  39. type="text"
  40. name="username"
  41. id="username"
  42. value="3448137167@qq.com"
  43. autofocus
  44. />
  45. <label for="password">密码:</label>
  46. <input type="password" name="password" id="password" value="" />
  47. <button>login</button>
  48. </fieldset>
  49. </form>
  50. </body>
  51. </html>

这是一个表单,那么我们怎样去获取表单里的元素呢?传统方法我们用 querySelector/querySelectorALl 来获取
例如:

  1. <script>
  2. const form = document.querySelector("#login");
  3. console.log(form);
  4. const username = form.querySelector("#username").value;
  5. console.log(username);
  6. </script>

我们来看下推荐的方式获取表单里的元素
示例:

  1. <script>
  2. const login = document.forms.login;
  3. const username = login.username.value;
  4. const password = login.password.value;
  5. const userinfo = { username: username, password: password };
  6. console.log(userinfo);
  7. // 提交到服务器端/后端:json
  8. const data = JSON.stringify(userinfo);
  9. console.log(data);
  10. </script>

遍历 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="list">
  11. <li class="item">item1</li>
  12. <li class="item">item2</li>
  13. <li class="item">item3</li>
  14. <li class="item">item4</li>
  15. <li class="item">item5</li>
  16. </ul>
  17. <script>
  18. // 获取所有节点类型
  19. let ul = document.querySelector(".list").childNodes;
  20. // console.log(ul);
  21. // 获取元素节点类型
  22. ul = document.querySelector(".list").children;
  23. console.log(ul);
  24. </script>
  25. </body>
  26. </html>

由于获取到的节点是一个类数组(类似数组,但是不是真正的数组,所以不能用数组上的办法),我们要把他转化成一个真正的数组
示例:

  1. <script>
  2. // 获取所有节点类型
  3. let ul = document.querySelector(".list").childNodes;
  4. // console.log(ul);
  5. // 获取元素节点类型
  6. let ul_li = document.querySelector(".list").children;
  7. // console.log(ul_li);
  8. // 方法1
  9. ul_li = Array.from(ul_li);
  10. // console.log(ul_li);
  11. // 方法2
  12. ul_li = [...ul_li];
  13. console.log(ul_li);
  14. </script>
  • 遍历元素
    示例:
  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="list">
  11. <li class="item">item1</li>
  12. <li class="item">item2</li>
  13. <li class="item">item3</li>
  14. <li class="item">item4</li>
  15. <li class="item">item5</li>
  16. </ul>
  17. <script>
  18. // 获取所有节点类型
  19. let ul = document.querySelector(".list");
  20. // console.log(ul);
  21. // 获取元素节点类型
  22. let ul_li = document.querySelector(".list").children;
  23. // console.log(ul_li);
  24. // 方法1
  25. ul_li = Array.from(ul_li);
  26. // console.log(ul_li);
  27. // 方法2
  28. ul_li = [...ul_li];
  29. console.log(ul_li);
  30. // 第一个firstElementChild
  31. ul.firstElementChild.style.background = "red";
  32. // 下一个nextElementSibling
  33. ul.firstElementChild.nextElementSibling.style.background = "blue";
  34. // 前一个previousElementSibling
  35. ul.lastElementChild.previousElementSibling.style.background = "green";
  36. // 最后一个lastElementChild
  37. ul.lastElementChild.style.background = "wheat";
  38. // 父节点parentElement
  39. ul.lastElementChild.parentElement.style.border = "3px solid red";
  40. </script>
  41. </body>
  42. </html>
  • 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. <script>
  11. // 1.创建元素
  12. const ul = document.createElement("ul");
  13. // 添加元素到html页面中
  14. document.body.append(ul);
  15. // 在ul内插入5个li
  16. for (let i = 1; i <= 5; i++) {
  17. const li = document.createElement("li");
  18. li.textContent = `item${i}`;
  19. ul.append(li);
  20. }
  21. // 我们在第三个节点之前插入一个全新的li
  22. const new_li = document.createElement("li");
  23. new_li.textContent = "new li";
  24. new_li.style.color = "red";
  25. const three = document.querySelector("ul>li:nth-of-type(3)");
  26. three.before(new_li);
  27. // 克隆一个新的节点插入到第三个li后
  28. const new_li_copy = new_li.cloneNode(true);
  29. // 插入第三个li后;
  30. three.after(new_li_copy);
  31. // 在父节点的标签为插入点,进行插入元素
  32. // 给ul加个边框
  33. ul.style.border = "4px dashed red";
  34. const h3 = document.createElement("h3");
  35. h3.textContent = "购物车";
  36. ul.insertAdjacentElement("beforeBegin", h3);
  37. const p = document.createElement("p");
  38. const num = document.querySelectorAll("ul>li").length;
  39. p.textContent = `总共: ${num} 件`;
  40. ul.insertAdjacentElement("afterEnd", p);
  41. // 替换
  42. // 先找到ul下最后一个元素
  43. const last = document.querySelector("ul>li:last-of-type");
  44. // 创建一个新元素a标签
  45. const a = document.createElement("a");
  46. a.href = "http://www.php.cn";
  47. a.textContent = "php.cn";
  48. // 用a标签替换最后一个li;
  49. ul.replaceChild(a, last);
  50. // 我们再把这个a标签给移除了
  51. ul.lastElementChild.remove();
  52. </script>
  53. </body>
  54. </html>
  • Js 操作元素内容
  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>
  20. <script>
  21. const box = document.querySelector(".box");
  22. //返回元素以及后代元素中所有文本内容,包括<style>,display:none的内容
  23. console.log(box.textContent);
  24. // innerText:返回元素以及后代中的文本
  25. console.log(box.innerText);
  26. // innerHTML:返回内部的html字符串
  27. console.log(box.innerHTML);
  28. // 添加个p标签
  29. // 先创建个p
  30. const p = document.createElement("p");
  31. p.textContent = '<a href="https://www.php.cn/"></a>';
  32. box.append(p);
  33. const newp = p.cloneNode(true);
  34. newp.innerHTML = '<a href="https://www.php.cn/">php.cn</a>';
  35. box.append(newp);
  36. // 替换
  37. // box.outerHTML = '<a href="https://www.php.cn/">php.cn</a>';
  38. //删除清空
  39. box.outerHTML = null;
  40. </script>
  41. </body>
  42. </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. <style>
  9. input {
  10. width: 30em;
  11. height: 10em;
  12. }
  13. </style>
  14. </head>
  15. <body>
  16. <input
  17. type="text"
  18. onkeydown="addMsg(this)"
  19. placeholder="请输入留言内容,回车键确认留言"
  20. autofocus
  21. />
  22. <ul class="list"></ul>
  23. <script>
  24. function addMsg(key) {
  25. if (event.key === "Enter") {
  26. // 1.获取留言列表的容器
  27. const ul = document.querySelector(".list");
  28. // 2.判断留言是否为空
  29. if (key.value.length === 0) {
  30. alert("留言内容不能为空");
  31. key.focus();
  32. return false;
  33. } else {
  34. // 3.添加一条新留言
  35. const li = document.createElement("li");
  36. li.innerHTML =
  37. key.value +
  38. ' <button onclick="Del(this.parentNode)">删除该留言</button>';
  39. li.style.color = "red";
  40. ul.insertAdjacentElement("afterBegin", li);
  41. // 4.清空留言的输入框,为下一个做准备
  42. key.value = "";
  43. // 5.重置焦点到留言框中,方便用户再次输入
  44. key.focus();
  45. return true;
  46. }
  47. }
  48. }
  49. // 删除留言
  50. function Del(li) {
  51. // 方案1a
  52. // li.remove();
  53. // 方案2
  54. // li.outerHTML = null;
  55. return confirm("是否确认删除") ? li.remove() : false;
  56. }
  57. </script>
  58. </body>
  59. </html>

自定义属性:dataset 对象

  • 元素属性
    元素的属性有两类:
    1.内置预定义属性,如 id,class,title,style
    2.用户自定义属性,主要用于 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. -->
  15. <div class="btn-group">
  16. <!-- onclick: 内置/预定义事件属性 -->
  17. <!-- data-index: 自定义属性 -->
  18. <button data-index="1" onclick="getIndex(this)">btn1</button>
  19. <button data-index="2" onclick="getIndex(this)">btn2</button>
  20. <button data-index="3" onclick="getIndex(this)">btn3</button>
  21. </div>
  22. <!-- 自定义属性还可以将一些数据保存到标签中 -->
  23. <!-- data-emial, data-work-unit -->
  24. <div class="user" data-email="123456@qq.com" data-work-unit="">
  25. Mr.fu
  26. </div>
  27. <script>
  28. function getIndex(btn) {
  29. // 通过自定义属性data-index的值,知道我点的是哪一个?
  30. // dataset.prop, "data-"一定要省略掉
  31. console.log("点击了第 ", btn.dataset.index, " 个按钮");
  32. }
  33. const user = document.querySelector(".user");
  34. console.log(user.dataset.email);
  35. // work-unit ==> workUnit
  36. console.log(user.dataset.workUnit);
  37. // dataset 可读可写
  38. user.dataset.workUnit = "php.cn";
  39. console.log(user.dataset.workUnit);
  40. </script>
  41. </body>
  42. </html>
  • js 操作 css
  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. .red {
  10. color: red;
  11. }
  12. .bgc {
  13. background-color: yellow;
  14. }
  15. .blue {
  16. color: blue;
  17. }
  18. .bd {
  19. border: 5px solid #000;
  20. }
  21. .box {
  22. width: 100px;
  23. height: 200px;
  24. }
  25. </style>
  26. </head>
  27. <body>
  28. <div class="box">hello word</div>
  29. <script>
  30. const box = document.querySelector("div");
  31. // 添加class标签
  32. box.classList.add("red");
  33. box.classList.add("bd");
  34. box.classList.add("bgc");
  35. // 判断是否有这个class
  36. console.log(box.classList.contains("bgc"));
  37. // 移除class
  38. box.classList.remove("bd");
  39. // 替换class
  40. box.classList.replace("red", "blue");
  41. // 切换
  42. box.classList.toggle("bd");
  43. // 取出宽高
  44. const width = window.getComputedStyle(box).width;
  45. const hight = window.getComputedStyle(box).hight;
  46. // 修改宽度
  47. box.style.width = `${parseInt(width) + 200}px`;
  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>Document</title>
  8. </head>
  9. <body>
  10. <button>1</button>
  11. <button>2</button>
  12. <button>3</button>
  13. </body>
  14. <script>
  15. const btn1 = document.querySelector("button:first-of-type");
  16. const btn2 = document.querySelector("button:nth-of-type(2)");
  17. const btn3 = document.querySelector("button:last-of-type");
  18. // 给btn1添加事件
  19. btn1.onclick = () => console.log("事件添加成功");
  20. // btn1事件移除
  21. btn1.onclick = null;
  22. // 给bt2添加事件监听器
  23. // 先给个监听到事件后要执行的回调
  24. clg = () => console.log("事件监听成功");
  25. // 添加监听事件
  26. btn2.addEventListener("click", clg, false);
  27. // 移除监听事件
  28. btn2.removeEventListener("click", clg, false);
  29. // 派发事件
  30. // 先添加一个监听事件
  31. let i = 0.0;
  32. btn3.addEventListener(
  33. "click",
  34. () => {
  35. console.log("恭喜你,又赚了 : " + i + "元");
  36. i += 0.8;
  37. },
  38. false
  39. );
  40. // 创建一个自定义事件
  41. const myclick = new Event("click");
  42. // btn3.dispatchEvent(myclick);
  43. // btn3.dispatchEvent(myclick);
  44. // btn3.dispatchEvent(myclick);
  45. // btn3.dispatchEvent(myclick);
  46. // btn3.dispatchEvent(myclick);
  47. // btn3.dispatchEvent(myclick);
  48. // setTimeout()一次性定时器
  49. // setTimeout(() => btn3.dispatchEvent(myclick), 2000);
  50. // setInterval: 间歇式的定时器
  51. setInterval(() => btn3.dispatchEvent(myclick), 2000);
  52. </script>
  53. </html>