JS获取表单元素、dom树遍历增删改、操作元素内容、自定义属性、操作css、事件小结

程序员文章站 2022-03-13 12:41:17

...

实例演示如何正确优雅的获取表单元素 2. 实例演示dom树的遍历与常用属性 3. 实例演示dom元素的增删改操作 4. js操作元素内容的几个常用方法,并分析异同 5. 将留言板的实战案例进行仿写,加上一些样式 6. 实例演示 dataset对象 7. 实例演示如何获取元素的计算样式 8. 实例演示 classList 对象常用方法 9. 实例演示事件的添加与派发

1. 获取表单元素


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>获取表单元素</title>
  </head>
  <body>
    <style>
      .form {
        width: 20em;
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.5em 1em;
      }
      input {
        text-align: center;
      }
    </style>
    <form class="form" id="form">
      <input type="text" name="user" placeholder="输入用户名" />
      <input type="text" name="pass" placeholder="输入密码" />
      <button>提交</button>
      <script>
        //   传统获取方式：上一课讲的两个API
        // 获取表单
        let form = document.querySelector(".form");
        // 获取用户
        let user = document.querySelector("input[name='user']");
        // 获取密码
        let pass = document.querySelector("input[name='pass']");
        console.log(form);
        console.log(user);
        console.log(pass);

        // 推荐方式：用document.forms属性.name属性值(或id值)
        user = document.forms.form.user;
        pass = document.forms.form.pass;
        user.value = "超人";
        pass.value = "123456789";

        // 前后端数据交互、
        form = document.forms.form;
        user = form.user.value;
        pass = form.pass.value;
        // 转为json
        let users = { user, pass };
        // 用函数转为json字符串
        let data = JSON.stringify(users);
        console.log(data);
      </script>
    </form>
  </body>
</html>

2. dom树的遍历


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>遍历DOM树</title>
  </head>
  <body>
    <ul class="list">
      <li class="item">项目1</li>
      <li class="item">项目2</li>
      <li class="item">项目3</li>
      <li class="item">项目4</li>
      <li class="item">项目5</li>
      <li class="item">项目6</li>
    </ul>
    <script>
      //   1. 节点类型：元素、文本、属性、注释、文档
      // 通常只关注元素类型
      let Ul = document.querySelector(".list");
      let items = Ul.children;
      //   上条获得的items类型是HTMLCollection
      //   获得的是类数组，不是数组，不能用数组的方法
      //   类数组特征：
      // 有从0开始递增的正整数索引
      // 有length属性
      console.log(items);

      //   2. 转化为真数组
      //   2.1 用函数转化
      let Li = Array.from(items);
      //   现在items类型是Array数组了，可以用数组的方法引用
      console.log(Li);
      //   2.2 用...rest转化
      let Li_items = [...items];
      console.log(Li_items);
      Li[0].style.fontSize = "3em";

      //   3. 用语法糖遍历
      //   第一个子元素
      Ul.firstElementChild.style.color = "red";
      //   下一个兄弟元素
      Ul.firstElementChild.nextElementSibling.style.color = "blue";
      //   最后一个子元素
      Ul.lastElementChild.style.fontSize = "2em";
      //   前一个兄弟元素
      Ul.lastElementChild.previousElementSibling.style.color = "red";

    </script>
  </body>
</html>

我个人觉得数组好用，老师说语法糖比较优雅

3. dom元素的增删改


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>dom元素的增删改</title>
  </head>
  <body>
    <script>
      // 1. 创建元素
      const h3 = document.createElement("h3");
      //   2.添加到页面中
      document.body.append(h3);
      h3.textContent = "创建的元素";

      // 创建ul元素
      const ul = document.createElement("ul");
      document.body.append(ul);
      // 创建列表项
      for (i = 0; i < 6; i++) {
        const li = document.createElement("li");
        li.textContent = "项目" + (i + 1);
        ul.append(li);
      }
      console.log(ul);
      console.log(ul.outerHTML);

      // 3. 插入节点
      // 示例：在第四个节点前后插入列表项
      const li = document.createElement("li");
      // 设置列表内容和样式
      li.textContent = "新的项目";
      li.style.fontSize = "3em";
      // 获取第四个节点
      const li_four = document.querySelector("li:nth-of-type(4)");
      // 在节点前插入新列表项
      li_four.before(li);
      // 克隆列表，用colenNode方法，true复制后代内容，即文本
      const li_copy = li.cloneNode(true);
      // 在节点后插入
      li_four.after(li_copy);

      // 以父节点标签为插入点，进行插入元素示例
      // 语法：insertAdjacentElement('插入位置',元素)
      // 插入位置有四个：可以不分大小写
      // afterBegin:开始标签后的第一个子元素
      // beforeBegin:开始标签之前的兄弟元素
      // afterEnd：结束标签之后的兄弟元素
      // beforeEnd：结束标签之前的子元素
      // 例：在上面列表前插入h4
      const h4 = document.createElement("h4");
      h4.textContent = "新列表";
      ul.insertAdjacentElement("beforebegin", h4);
      // 例：在列表后插入p
      const p = document.createElement("p");
      p.textContent = "共计8个项目";
      ul.insertAdjacentElement("afterEnd", p);

      // 4. 替换节点语法： replaceChild(新节点，替换的节点)
      // 获取要替换的节点
      const li_replace = document.querySelector("li:nth-of-type(8)");
      // 创建要替换的元素
      const a = document.createElement("a");
      a.textContent = "php.cn";
      a.href = "https://php.cn";
      // 调用函数替换
      ul.replaceChild(a, li_replace);

      // 5. 删除节点：获取要删除的节点，使用 remove()方法
      document.querySelector("li:nth-of-type(7)").remove();
    </script>
  </body>
</html>

4. js操作元素内容


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>js操作元素内容</title>
  </head>
  <body>
    <div class="box">
      <style>
        h3 {
          color: crimson;
        }
      </style>
      <h3>聚餐通知</h3>
      <p>公司全体员工：</p>
      <p>今天晚上全体在食堂聚餐，加菜，全羊宴！</p>
    </div>
    <script>
      // 查看元素内容textContent、innerHtml、innerText的不同
      const div = document.querySelector(".box");
      //   textContent：返回元素及后代元素中所有文本内容，包括h3样式的内容
      console.log(div.textContent);
      //   innerHTML：返回文本内容包含标签字符串
      console.log(div.innerHTML);
      //   innerText：只返回元素以及后代中的文本
      console.log(div.innerText);
      //   outerHTML：返回当前节点的html字符串
      console.log(div.outerHTML);
      //   小结：首选textContent

      //   清空
      div.outerHTML = null;
    </script>
  </body>
</html>

5. DOM实战：留言板


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>DOM实战：留言板</title>
  </head>
  <body>
    <style>
      input {
        width: 30em;
        height: 1.5rem;
      }
      li {
        margin: 0.4em;
      }
    </style>
    <!-- 按下键时触发 -->
    <input type="text" placeholder="输入留言" onkeydown="addMsg(this)" />
    <hr />
    <p>留言：</p>
    <ul class="msgList"></ul>

    <script>
      // 定义触发函数，接收传递的元素
      function addMsg(inputText) {
        // 判断按下的键是否是回车，回车就记录输入的留言。
        // 用event对象的key值是否是“enter”判断
        // event对象包含当前事件的所有信息，是当前事件的对象
        if (event.key === "Enter") {
          // 判断留言是否为空。这个判断语句不完善，根据长度判断也不完善
          if (inputText.value === "") {
            alert("留言不能为空");
            // 重新激活输入框
            inputText.focus();
            return false;
          }
          // 获取留言列表
          const ul_Msg = document.querySelector(".msgList");
          // 添加留言，带删除按键，调用删除函数。
          const li = document.createElement("li");
          li.innerHTML = `${inputText.value}<button onclick="del(this.parentNode)">删除</button>`;
          // 留言添加到ul开始元素后面，这样确保最新留言在最前
          ul_Msg.insertAdjacentElement("afterbegin", li);
          // 清空留言框
          inputText.value = null;
          // 重新激留言框
          inputText.focus();
        }
      }

      // 定义删除函数，接收传递的li删除
      function del(li_del) {
        // 删除前用户确认，用函数confirm("提示信息")
        // 点确定返回true，点取消返回false
        return confirm("是否删除此留言？") ? li_del.remove() : false;
      }
    </script>
  </body>
</html>

6. 自定义属性: dataset对象

元素属性有二类:

内置的预定义属性, 如 id, class,title,style等

用户自定义属性,主要用于js脚本控制, 以 “data-“”为前缀,如 data-key


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>自定义属性: dataset对象</title>
</head>
<body>
  <!-- 根据按钮显示自定义属性的值 -->
  <div class="btn-group">
    <!-- 用data-value自定义属性存放值 -->
    <button data-index-value="1号" onclick="getValue(this)">按键1</button>
    <button data-index-value="2号" onclick="getValue(this)">按键2</button>
    <button data-index-value="3号" onclick="getValue(this)">按键3</button>
  </div>
  <p data-value="php.cn"></p>
  <script>
    function getValue(value) {
      //   自定义属性使用dataset.属性名调用
      // 属性名有-符号时改为驼峰写法
      alert(`点击的是${value.dataset.indexValue}按钮`);
    }
    //   自定义属性可读可写
    const p = document.querySelector("p");
    p.dataset.value = "";
    console.log(p.dataset.value);
  </script>
</body>
</html>

7. js操作css


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>js操作css</title>
  </head>
  <body>
    <style>
      div {
        width: 20em;
      }
    </style>
    <div style="font-size: 2em; color: chocolate"></div>
    <script>
      let div = document.querySelector("div");
      // 获取行内样式
      console.log(div.style.fontSize);
      //   计算样式：指内部style标签样式或外部css文件样式
      // 获取外部样式，用全局方法window.getComputedStyle(标签，伪元素)
      console.log(window.getComputedStyle(div).width);

      //   操作：宽度加100px
      let width = window.getComputedStyle(div).width;
      // 得到的宽度是字符串，用parseInt()函数提取出数字
      width = parseInt(width) + 100 + "px";
      // 在行内样式中加入样式
      div.style.width = width;
      console.log(div.style.width);
    </script>
  </body>
</html>

8. js操作class属性: classList对象


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>js操作class属性: classList对象</title>
  </head>
  <body>
    <h2>学习php</h2>
    <style>
      .red {
        color: red;
      }
      .bg-yello {
        background-color: yellow;
      }
      .turquoise {
        color: turquoise;
      }
    </style>
    <script>
      // 1. 用传统方式添加样式
      let h2 = document.querySelector("h2");
      h2.className = "red bg-yello";

      //   2. 用classList对象
      // 添加样式：add方法
      h2.classList.add("turquoise");
      //   判断样式是否存在：contains方法
      console.log(h2.classList.contains("red"));
      //   移除样式
      h2.classList.remove("bg-yello");
      //   替换样式：方法replace(要替换的样式名，替换样式)
      h2.classList.replace("turquoise", "red");
      //   切换样式：toggle方法
      //   如果要切换的样式已存在，则移除，否则添加
      // 如red样式上条语句已生效，则下面语句变为移除red样式
      h2.classList.toggle("red");
    </script>
  </body>
</html>

9. 事件的添加与删除


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>事件的添加与删除</title>
  </head>
  <body>
    <button>开始</button>
    <button>事件监听</button>
    <button>事件派发</button>
    <script>
      // 获取元素
      const btn1 = document.querySelector("button:first-of-type");
      // 添加点击事件
      btn1.onclick = () => {
        console.log(event);
      };
      //   删除事件
      btn1.onclick = null;

      //   事件监听器
      //   获取元素
      const btn2 = document.querySelector("button:nth-of-type(2)");
      // 监听事件addEventListener("监听事件",动作,false)，false表示冒泡事件
      btn2.addEventListener("click", show, false);
      //   删除事件
      btn2.removeEventListener("click", show, false);
      function show() {
        console.log(event);
      }

      //   事件派发：事件发生时，自动触发动作
      btn3 = document.querySelector("button:nth-of-type(3)");
      //   监听事件，自调用
      let i = 0;
      btn3.addEventListener(
        "click",
        () => {
          console.log(`点赞${++i}个`);
        },
        false
      );

      //   创建自定义事件，通过event对象
      const myClick = new Event("click");
      // 触发3次自定义事件
      btn3.dispatchEvent(myClick);
      btn3.dispatchEvent(myClick);
      btn3.dispatchEvent(myClick);
      //   用一次性定时器触发1500毫秒
      setTimeout(() => {
        btn3.dispatchEvent(myClick);
      }, 1500);
      // 用间歇定时器触发
      setInterval(() => {
        btn3.dispatchEvent(myClick);
      }, 1500);
    </script>
  </body>
</html>

上一篇： vue-material是什么？

下一篇： html测试题小结

JS获取表单元素、dom树遍历增删改、操作元素内容、自定义属性、操作css、事件小结

1. 获取表单元素

2. dom树的遍历

3. dom元素的增删改

4. js操作元素内容

5. DOM实战：留言板

6. 自定义属性: dataset对象

7. js操作css

8. js操作class属性: classList对象

9. 事件的添加与删除

优雅的获取表单元素、dom树的遍历与常用属性、dom元素的增删改操作、js操作元素内容的几个常用方法、元素的dataset对象、获取元素的计算样式、元素的classList 对象常用方法、事件的添加与派发

优雅的获取表单元素、dom树的遍历与常用属性、dom元素的增删改操作、js操作元素内容的几个常用方法、元素的dataset对象、获取元素的计算样式、元素的classList 对象常用方法、事件的添加与派发

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

表单元素获取,dom树的遍历与常用属性,dom元素的增删改, js操作元素内容,留言板实例,dataset对象，获取元素计算样式，classList 对象常用方法，事件的添加与派发

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

表单元素获取,dom树的遍历与常用属性,dom元素的增删改, js操作元素内容,留言板实例,dataset对象，获取元素计算样式，classList 对象常用方法，事件的添加与派发

获取表单元素、Dom遍历及增删改、JS操作元素内容

JS获取表单元素、dom树遍历增删改、操作元素内容、自定义属性、操作css、事件小结

JS获取表单元素、dom树遍历增删改、操作元素内容、自定义属性、操作css、事件小结

获取表单元素、Dom遍历及增删改、JS操作元素内容

JS获取表单元素、dom树遍历增删改、操作元素内容、自定义属性、操作css、事件小结

1. 获取表单元素

2. dom树的遍历

3. dom元素的增删改

4. js操作元素内容

5. DOM实战：留言板

6. 自定义属性: dataset对象

7. js操作css

8. js操作class属性: classList对象

9. 事件的添加与删除

优雅的获取表单元素、dom树的遍历与常用属性、dom元素的增删改操作、js操作元素内容的几个常用方法、元素的dataset对象、获取元素的计算样式、元素的classList 对象常用方法、事件的添加与派发

优雅的获取表单元素、dom树的遍历与常用属性、dom元素的增删改操作、js操作元素内容的几个常用方法、元素的dataset对象、获取元素的计算样式、元素的classList 对象常用方法、事件的添加与派发

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

表单元素获取,dom树的遍历与常用属性,dom元素的增删改, js操作元素内容,留言板实例,dataset对象，获取元素计算样式，classList 对象常用方法 ，事件的添加与派发

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

表单元素获取,dom树的遍历与常用属性,dom元素的增删改, js操作元素内容,留言板实例,dataset对象，获取元素计算样式，classList 对象常用方法 ，事件的添加与派发

获取表单元素、Dom遍历及增删改、JS操作元素内容

JS获取表单元素、dom树遍历增删改、操作元素内容、自定义属性、操作css、事件小结

JS获取表单元素、dom树遍历增删改、操作元素内容、自定义属性、操作css、事件小结

获取表单元素、Dom遍历及增删改、JS操作元素内容

表单元素获取,dom树的遍历与常用属性,dom元素的增删改, js操作元素内容,留言板实例,dataset对象，获取元素计算样式，classList 对象常用方法，事件的添加与派发

表单元素获取,dom树的遍历与常用属性,dom元素的增删改, js操作元素内容,留言板实例,dataset对象，获取元素计算样式，classList 对象常用方法，事件的添加与派发