dom 操作与事件

程序员文章站 2022-05-29 12:48:29

...

dom 操作与事件

获取表单元素

我们先来看一个案例：


<!DOCTYPE html>
<html lang="zh-CN">
  <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>
    <style>
      .login {
        width: 15em;
        border: 1px solid #888;
        border-radius: 0.5em;
        box-shadow: 5px 5px 5px #888;
        display: grid;
        grid-template-columns: 3em 1fr;
        gap: 0.5em 1em;
      }
      .login legend {
        padding: 0 0.5em;
        text-align: center;
        margin-bottom: 0.5em;
        font-weight: bolder;
      }
      .login button {
        grid-column: 2;
      }
      .login button:hover {
        cursor: pointer;
        background-color: lightcyan;
      }
    </style>
  </head>
  <body>
    <form action="login.php" method="post" id="login">
      <fieldset class="login">
        <legend>登录页面</legend>
        <label for="username">账号:</label>
        <input
          type="text"
          name="username"
          id="username"
          value="3448137167@qq.com"
          autofocus
        />
        <label for="password">密码:</label>
        <input type="password" name="password" id="password" value="" />
        <button>login</button>
      </fieldset>
    </form>
  </body>
</html>

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


<script>
  const form = document.querySelector("#login");
  console.log(form);
  const username = form.querySelector("#username").value;
  console.log(username);
</script>

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


<script>
  const login = document.forms.login;
  const username = login.username.value;
  const password = login.password.value;
  const userinfo = { username: username, password: password };
  console.log(userinfo);
  //   提交到服务器端/后端：json
  const data = JSON.stringify(userinfo);
  console.log(data);
</script>

遍历 dom 树

节点类型
案例


<!DOCTYPE html>
<html lang="zh-CN">
  <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">item1</li>
      <li class="item">item2</li>
      <li class="item">item3</li>
      <li class="item">item4</li>
      <li class="item">item5</li>
    </ul>
    <script>
      // 获取所有节点类型
      let ul = document.querySelector(".list").childNodes;
      //   console.log(ul);
      // 获取元素节点类型
      ul = document.querySelector(".list").children;
      console.log(ul);
    </script>
  </body>
</html>

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


<script>
  // 获取所有节点类型
  let ul = document.querySelector(".list").childNodes;
  //   console.log(ul);
  // 获取元素节点类型
  let ul_li = document.querySelector(".list").children;
  //   console.log(ul_li);
  //   方法1
  ul_li = Array.from(ul_li);
  //   console.log(ul_li);
  //   方法2
  ul_li = [...ul_li];
  console.log(ul_li);
</script>

遍历元素
示例：


<!DOCTYPE html>
<html lang="zh-CN">
  <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">item1</li>
      <li class="item">item2</li>
      <li class="item">item3</li>
      <li class="item">item4</li>
      <li class="item">item5</li>
    </ul>
    <script>
      // 获取所有节点类型
      let ul = document.querySelector(".list");
      //   console.log(ul);
      // 获取元素节点类型
      let ul_li = document.querySelector(".list").children;
      //   console.log(ul_li);
      //   方法1
      ul_li = Array.from(ul_li);
      //   console.log(ul_li);
      //   方法2
      ul_li = [...ul_li];
      console.log(ul_li);
      //   第一个firstElementChild
      ul.firstElementChild.style.background = "red";
      //   下一个nextElementSibling
      ul.firstElementChild.nextElementSibling.style.background = "blue";
      //   前一个previousElementSibling
      ul.lastElementChild.previousElementSibling.style.background = "green";
      // 最后一个lastElementChild
      ul.lastElementChild.style.background = "wheat";
      //   父节点parentElement
      ul.lastElementChild.parentElement.style.border = "3px solid red";
    </script>
  </body>
</html>

dom 元素的增删改


<!DOCTYPE html>
<html lang="zh-CN">
  <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 ul = document.createElement("ul");
      //   添加元素到html页面中
      document.body.append(ul);
      //   在ul内插入5个li
      for (let i = 1; i <= 5; i++) {
        const li = document.createElement("li");
        li.textContent = `item${i}`;
        ul.append(li);
      }
      //   我们在第三个节点之前插入一个全新的li
      const new_li = document.createElement("li");
      new_li.textContent = "new li";
      new_li.style.color = "red";
      const three = document.querySelector("ul>li:nth-of-type(3)");
      three.before(new_li);
      //   克隆一个新的节点插入到第三个li后
      const new_li_copy = new_li.cloneNode(true);
      //   插入第三个li后;
      three.after(new_li_copy);
      //   在父节点的标签为插入点，进行插入元素
      //   给ul加个边框
      ul.style.border = "4px dashed red";
      const h3 = document.createElement("h3");
      h3.textContent = "购物车";
      ul.insertAdjacentElement("beforeBegin", h3);
      const p = document.createElement("p");
      const num = document.querySelectorAll("ul>li").length;
      p.textContent = `总共: ${num} 件`;
      ul.insertAdjacentElement("afterEnd", p);
      //   替换
      //   先找到ul下最后一个元素
      const last = document.querySelector("ul>li:last-of-type");
      //   创建一个新元素a标签
      const a = document.createElement("a");
      a.href = "http://www.php.cn";
      a.textContent = "php.cn";
      //   用a标签替换最后一个li;
      ul.replaceChild(a, last);
      //   我们再把这个a标签给移除了
      ul.lastElementChild.remove();
    </script>
  </body>
</html>

Js 操作元素内容


<!DOCTYPE html>
<html lang="zh-CN">
  <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>
        h2 {
          color: red;
        }
      </style>
      <h2>通知</h2>
      <span style="display: none">试用期员工不参加</span>
      <p>今天下午17:00开会，开发部，运营部全体参加~~</p>
    </div>
    <script>
      const box = document.querySelector(".box");
      //返回元素以及后代元素中所有文本内容，包括<style>,display:none的内容
      console.log(box.textContent);
      //   innerText：返回元素以及后代中的文本
      console.log(box.innerText);
      //   innerHTML：返回内部的html字符串
      console.log(box.innerHTML);
      //   添加个p标签
      // 先创建个p
      const p = document.createElement("p");
      p.textContent = '<a href="https://www.php.cn/"></a>';
      box.append(p);
      const newp = p.cloneNode(true);
      newp.innerHTML = '<a href="https://www.php.cn/">php.cn</a>';
      box.append(newp);
      //   替换
      //   box.outerHTML = '<a href="https://www.php.cn/">php.cn</a>';
      //删除清空
      box.outerHTML = null;
    </script>
  </body>
</html>

留言板实战


<!DOCTYPE html>
<html lang="zh-CN">
  <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>
    <style>
      input {
        width: 30em;
        height: 10em;
      }
    </style>
  </head>
  <body>
    <input
      type="text"
      onkeydown="addMsg(this)"
      placeholder="请输入留言内容，回车键确认留言"
      autofocus
    />
    <ul class="list"></ul>
    <script>
      function addMsg(key) {
        if (event.key === "Enter") {
          //   1.获取留言列表的容器
          const ul = document.querySelector(".list");
          // 2.判断留言是否为空
          if (key.value.length === 0) {
            alert("留言内容不能为空");
            key.focus();
            return false;
          } else {
            // 3.添加一条新留言
            const li = document.createElement("li");
            li.innerHTML =
              key.value +
              '   <button onclick="Del(this.parentNode)">删除该留言</button>';
            li.style.color = "red";
            ul.insertAdjacentElement("afterBegin", li);
            //   4.清空留言的输入框，为下一个做准备
            key.value = "";
            // 5.重置焦点到留言框中，方便用户再次输入
            key.focus();
            return true;
          }
        }
      }
      //   删除留言
      function Del(li) {
        //   方案1a
        // li.remove();
        // 方案2
        // li.outerHTML = null;
        return confirm("是否确认删除") ? li.remove() : false;
      }
    </script>
  </body>
</html>

自定义属性：dataset 对象

元素属性
元素的属性有两类：
1.内置预定义属性，如 id，class，title，style
2.用户自定义属性，主要用于 js 脚本控制，以‘data-’为前缀，如 data-key


<!DOCTYPE html>
<html lang="zh-CN">
  <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>
    <!-- 
      * 元素属性有二类:
      * 1. 内置的预定义属性, 如 id, class,title,style等
      * 2. 用户自定义属性,主要用于js脚本控制, 以 "data-""为前缀,如 data-key 
     -->

    <div class="btn-group">
      <!-- onclick: 内置/预定义事件属性 -->
      <!-- data-index: 自定义属性 -->
      <button data-index="1" onclick="getIndex(this)">btn1</button>
      <button data-index="2" onclick="getIndex(this)">btn2</button>
      <button data-index="3" onclick="getIndex(this)">btn3</button>
    </div>

    <!-- 自定义属性还可以将一些数据保存到标签中 -->
    <!-- data-emial, data-work-unit  -->
    <div class="user" data-email="123456@qq.com" data-work-unit="">
      Mr.fu
    </div>

    <script>
      function getIndex(btn) {
        // 通过自定义属性data-index的值,知道我点的是哪一个?
        // dataset.prop, "data-"一定要省略掉
        console.log("点击了第 ", btn.dataset.index, " 个按钮");
      }

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

      console.log(user.dataset.email);
      //   work-unit ==> workUnit
      console.log(user.dataset.workUnit);

      // dataset 可读可写
      user.dataset.workUnit = "php.cn";
      console.log(user.dataset.workUnit);
    </script>
  </body>
</html>

js 操作 css


<!DOCTYPE html>
<html lang="zh-CN">
  <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>
    <style>
      .red {
        color: red;
      }
      .bgc {
        background-color: yellow;
      }
      .blue {
        color: blue;
      }
      .bd {
        border: 5px solid #000;
      }
      .box {
        width: 100px;
        height: 200px;
      }
    </style>
  </head>
  <body>
    <div class="box">hello word</div>
    <script>
      const box = document.querySelector("div");
      // 添加class标签
      box.classList.add("red");
      box.classList.add("bd");
      box.classList.add("bgc");
      //   判断是否有这个class
      console.log(box.classList.contains("bgc"));
      //   移除class
      box.classList.remove("bd");
      //   替换class
      box.classList.replace("red", "blue");
      //   切换
      box.classList.toggle("bd");
      // 取出宽高
      const width = window.getComputedStyle(box).width;
      const hight = window.getComputedStyle(box).hight;
      // 修改宽度
      box.style.width = `${parseInt(width) + 200}px`;
    </script>
  </body>
</html>

时间的添加与删除


<!DOCTYPE html>
<html lang="zh-CN">
  <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>Document</title>
  </head>
  <body>
    <button>1</button>
    <button>2</button>
    <button>3</button>
  </body>
  <script>
    const btn1 = document.querySelector("button:first-of-type");
    const btn2 = document.querySelector("button:nth-of-type(2)");
    const btn3 = document.querySelector("button:last-of-type");
    // 给btn1添加事件
    btn1.onclick = () => console.log("事件添加成功");
    // btn1事件移除
    btn1.onclick = null;
    // 给bt2添加事件监听器
    // 先给个监听到事件后要执行的回调
    clg = () => console.log("事件监听成功");
    // 添加监听事件
    btn2.addEventListener("click", clg, false);
    // 移除监听事件
    btn2.removeEventListener("click", clg, false);
    // 派发事件
    // 先添加一个监听事件
    let i = 0.0;
    btn3.addEventListener(
      "click",
      () => {
        console.log("恭喜你,又赚了 : " + i + "元");
        i += 0.8;
      },
      false
    );
    // 创建一个自定义事件
    const myclick = new Event("click");
    //   btn3.dispatchEvent(myclick);
    //   btn3.dispatchEvent(myclick);
    //   btn3.dispatchEvent(myclick);
    //   btn3.dispatchEvent(myclick);
    //   btn3.dispatchEvent(myclick);
    //   btn3.dispatchEvent(myclick);

    //   setTimeout()一次性定时器
    //   setTimeout(() => btn3.dispatchEvent(myclick), 2000);

    //   setInterval: 间歇式的定时器
    setInterval(() => btn3.dispatchEvent(myclick), 2000);
  </script>
</html>

上一篇： CSS 响应式布局及定位的使用方法学习

下一篇： vw+rem移动端响应式布局

dom 操作与事件

dom 操作与事件

获取表单元素

遍历 dom 树

自定义属性：dataset 对象

时间的添加与删除

vue-watch如何监听非DOM元素的事件

Yii框架操作cookie与session的方法实例详解

Python使用add_subplot与subplot画子图操作示例

浅谈javascript中onbeforeunload与onunload事件

HTML5之SVG 2D入门12—SVG DOM及DOM操作介绍

C#程序最小化到托盘图标操作步骤与实现代码

linux mysql 安装与操作

Python3.5文件读与写操作经典实例详解

PHP中的按位与和按位或操作示例

同域jQuery(跨)iframe操作DOM(示例代码)