JS--DOM操作

js组成

JavaScript的组成

ECMAScript:
- 规定了js基础语法核心知识。
- 比如：变量、分支语句、循环语句、对象等等

Web APIs :
- DOM 文档对象模型，定义了一套操作HTML文档的API
- BOM 浏览器对象模型，定义了一套操作浏览器窗口的API

什么是API

API: 应用程序接口（Application Programming Interface）

接口：无需关心内部如何实现，程序员只需要调用就可以很方便实现某些功能

web APIs 作用： JavaScript 去操作页面文档和浏览器

DOM简介

DOM（Document Object Model——文档对象模型）。

作用：DOM用来操作网页文档，开发网页特效和实现用户交互

DOM的核心思想就是把网页内容当做对象来处理，通过对象的属性和方法对网页内容操作

document对象

是 DOM 里提供的一个对象，是DOM顶级对象作为网页内容的入口，所以它提供的属性和方都是用来访问和操作网页内容的。例：document.write()

获取DOM对象

利用css选择器来获取DOM元素

描述	属性/方法	效果
获取DOM对象	document.querySelector()	获取指定的第一个元素
document.querySelectorAll()	获取指定的所有元素
操作元素内容	元素.innerText	操作元素内容，不解析标签
元素.innerHTML	操作元素内容，解析标签
操作元素样式	元素.style.width	通过style操作样式
元素.className	通过类名操作样式
元素.classList.add()	增加类名
元素.classList.remove()	删除类名
元素.classList.toggle()	切换类名
间隔函数	setInterval(function() {}, 1000)	定时器，每隔指定时间重复执行

语法	实例	描述
getElementById	document.getElementById('box')	根据id获取元素，单个元素
getElementsByTagName	document.getElementsByTagName('li')	根据标签名获取元素，伪数组
getElementsByClassName	document.getElementsByClassName('one')	根据类名获取元素，伪数组
getElementsByName	document.getElementsByName('sex')	根据name属性值获取元素，伪数组

 // 1. getElementById   根据id获取
const box = document.getElementById('box')
console.log(box)
 
// 2. getElementsByClassName   根据类名获取  返回伪数组
const items = document.getElementsByClassName('item')
console.log(items)
 
// 3. getElementsByTagName  根据标签名获取 返回伪数组
const ps = document.getElementsByTagName('p')
console.log(ps)
 
// 4. getElementsByName  根据name属性获取 返回伪数组
const inputs = document.getElementsByName('username')
console.log(inputs)复制

参考文档：https://developer.mozilla.org/zh-CN/docs/Web/API/Document/querySelector

常用语法：

//document.querySelector('css选择器')，选择指定css选择器的第一个元素

const box=document.querySelector('div')

参数:包含一个或多个有效的CSS选择器字符串

返回值： CSS选择器匹配的第一个元素对象 ,如果没有匹配到，则返回 null。

例如：

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <!-- 
        dom是用来操作也能元素（标签）
        dom是将标签解析成dom对象--对象就有属性和方法--操作标签的
        dom顶级的对象是document对象
     -->
    <div class="box">我是盒子</div>
    <ul>
      <li>5646</li>
      <li>5646</li>
      <li>5</li>
    </ul>
    <ol>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ol>
    <script>
      // 1.3 如果获取不到则返回 null
      const p = document.querySelector('p')
      console.log(p)  // null
      //通过css选择器获取元素，document.querySelector('css选择器')
      //获取单个元素，匹配到的第一个元素
      const box = document.querySelector(".box");
      console.log(box); //只能单独输出内容
      console.dir(box); //用来输出对象格式数据
 
      //案例
      const ul = document.querySelector("ul li:nth-child(3)");
      console.dir(ul);// 只选择满足条件的第3个元素li
 
      //获取多个元素 document.querySelectorALL('css选择器')
      //All 方法获取到的是一个伪数组，具备数组的长度和索引
      //获取的都是数组形式
      //所以可以通过循环遍历的方式拿到每一个，但是不能使用数组的方法例如push()
      const lis = document.querySelectorAll("ol li");
      console.log(lis);// 只选择满足条件的第一个元素li
      for (let i = 0; i < lis.length; i++) {
        console.log(lis[i]);
      }
    </script>
  </body>
</html>复制

选择指定css选择器的所有元素

语法：const lis = document.querySelectorAll('.nav li')

参数:包含一个或多个有效的CSS选择器字符串

返回值：CSS选择器匹配的NodeList 伪数组

 // 2. document.querySelectorAll() 选择指定css选择器的所有元素
// 2.1 参数还是字符串的css选择器
const lis = document.querySelectorAll('.nav li')
 
// 2.2 返回值是一个伪数组里面包含了所有的dom对象 li
console.log(lis)
 
// 2.3 伪数组
// (1) 有长度和索引号
// (2) 没有数组的一些常用方法 比如 push  pop  splice等方法
// lis.push(1)
// console.log(lis)  // 因为lis是伪数组无法使用push方法所以报错
 
// 2.4 利用循环遍历伪数组得到里面的每一个元素对象
for (let i = 0; i < lis.length; i++) {
  console.log(lis[i]) // 里面的每一个元素对象
}
 
// 2.5 即使只有1个元素，我们querySelectorAll 获得的也是一个伪数组，里面只有1个元素而已
 
const boxs = document.querySelectorAll('.box')
console.log(boxs)复制

操作元素内容

DOM对象可以操作页面标签，所以本质上就是操作DOM对象（增删改查）

如果想要操作标签元素的内容，则可以使用如下2种方式：

对象.innerText 属性
对象.innerHTML 属性

innerText

innerText 将文本内容添加/更新到任意标签位置，但是文本中包含的标签不会被解析。

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div>sdfi</div>
    <script>
      //操作元素内容属性
      const box = document.querySelector("div");
      //1。innerText
      //获取内容  只会获取嵌套文本
      //查
      console.log(box.innerText);
      //修改内容
      box.innerText = "新值";
     // 1.3 增
      const box1 = document.querySelector('.box1')
      console.log(box1)
      box1.innerText='hdsfas'
      // 1.4 删  给空字符串可以删除内容
      box.innerText = ''
      box1.innerText = ''
      //不解析标签（不认识），原样输出
      box.innerText = "<b>加粗</b>";
    </script>
  </body>
</html>复制

innerHTML

innerHTML 将文本内容添加/更新到任意标签位置，文本中包含的标签会被解析。

 <script>
  // 2. 对象.innerHTML  会解析标签,获取嵌套里面的所有内容
  box.innerHTML = '<strong>hxm</strong>'
</script>复制

总结：如果文本内容中包含 html 标签时推荐使用 innerHTML，否则建议使用 innerText 属性。

常用属性修改

可以通过DOM操作元素属性，比如通过 src 更换图片地址，最常见的属性比如：href、title、src 等等

1，直接能过属性名修改，最简洁的语法

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div>
      <img src="" alt="" />
    </div>
    <script>
      const arr = [
        "./images/1.png",
        "./images/2.png",
        "./images/3.png",
        "./images/4.png",
      ];
      //设置常用属性 对象.属性=值
      const img = document.querySelector("img");
      //获取属性值
      //查
      console.log(img.src);
      //设置属性值
      //生成一个随机数
      //改
      const ran = Math.floor(Math.random() * arr.length);
      img.src = arr[ran];
      //增
      img.title = "你好";
      //删
      img.src = "";
    </script>
  </body>
</html>复制

操作样式属性

2，DOM对象修改标签元素的样式属性

比如通过轮播图小圆点自动更换颜色样式
点击按钮可以滚动图片，这是移动的的位置 translateX 等等

三种操作方式

1，通过 style 属性操作元素样式

语法：

 <script>
  // 通过style操作元素样式
  // 1. 先要获取这个box元素对象
  const box = document.querySelector('.box')
 
  // 2. 通过style来从操作样式
  box.style.width = '300px'
  box.style.marginTop = '50px'
  box.style.backgroundColor = 'orange'
 
  // 3. 注意事项
  // 3.1 给样式赋值的时候，千万不要忘了加单位比如 300px
  // 3.2 如果有-的样式，我们采取的是小驼峰命名法比如 marginTop
  // 3.3 一定不要忘了加 style 属性
</script>复制

2，操作类名(className) 操作CSS

如果修改的样式比较多，直接通过style属性修改比较繁琐，我们可以通过借助于css类名的形式。就是把多个样式放到css一个类中，然后把这个类添加到这个元素身上。

 <script>
  // 通过类名操作元素样式
  // 1. 获取box盒子
  const box = document.querySelector('.box')
  // 2. 利用类名操作元素样式
  // box.className = 'hxm'
  box.className = 'box hxm'
  // 3. 利用类名操作样式添加的新的类名会覆盖掉原先的类名
</script>复制

注意：

1.由于class是关键字, 所以使用className去代替

2.className是使用新值换旧值, 如果需要添加一个类,需要保留之前的类

3，通过 classList 操作类控制CSS

为了解决className 容易覆盖以前的类名，我们可以通过classList方式追加和删除类名。

案例：

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* .box {
        width: 200px;
        height: 200px;
        color: #8df;
        border: 1px solid red;
      } */
      .nav {
        width: 300px;
        height: 300px;
        background-color: #8df;
        color: red;
      }
      .box {
        font-size: 30px;
        text-align: center;
        line-height: 300px;
        border: 10px solid pink;
      }
    </style>
  </head>
  <body>
    <!-- <div>文字</div>
    <script>
      //通过类名操作元素样式
      //通过className属性的形式设置样式
      const box = document.querySelector("div");
      box.className = "box";
      //问题：用新值换旧值
      //场景：获取类名，但是用的不多
      console.log(box.className);
    </script> -->
 
    <div class="nav">文字描述</div>
    <script>
      //需求：利用classList追加 删除 切换类名
      const ds = document.querySelector("div");
      //1，追加类名  在原类名的基础上，追加新类名
      ds.classList.add("box");
      //2，删除类名
      ds.classList.remove("nav");
      //3，切换类名  有则删除，没有则添加
      ds.classList.toggle("nav");
      //判断是否存在某个类名，存在返回true，否则false
      console.log(ds.classList.contains("zcb"));
      console.log(ds.classList.contains("nav"));
    </script>
  </body>
</html>复制

轮播图案例

 <!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>
    <style>
      * {
        box-sizing: border-box;
      }
 
      .slider {
        width: 560px;
        height: 400px;
        overflow: hidden;
      }
 
      .slider-wrapper {
        width: 100%;
        height: 320px;
      }
 
      .slider-wrapper img {
        width: 100%;
        height: 100%;
        display: block;
      }
 
      .slider-footer {
        height: 80px;
        background-color: rgb(100, 67, 68);
        padding: 12px 12px 0 12px;
        position: relative;
      }
 
      .slider-footer .toggle {
        position: absolute;
        right: 0;
        top: 12px;
        display: flex;
      }
 
      .slider-footer .toggle button {
        margin-right: 12px;
        width: 28px;
        height: 28px;
        appearance: none;
        border: none;
        background: rgba(255, 255, 255, 0.1);
        color: #fff;
        border-radius: 4px;
        cursor: pointer;
      }
 
      .slider-footer .toggle button:hover {
        background: rgba(255, 255, 255, 0.2);
      }
 
      .slider-footer p {
        margin: 0;
        color: #fff;
        font-size: 18px;
        margin-bottom: 10px;
      }
 
      .slider-indicator {
        margin: 0;
        padding: 0;
        list-style: none;
        display: flex;
        align-items: center;
      }
 
      .slider-indicator li {
        width: 8px;
        height: 8px;
        margin: 4px;
        border-radius: 50%;
        background: #fff;
        opacity: 0.4;
        cursor: pointer;
      }
 
      .slider-indicator li.active {
        width: 12px;
        height: 12px;
        opacity: 1;
      }
    </style>
  </head>
 
  <body>
    <div class="slider">
      <div class="slider-wrapper">
        <img src="./images/slider01.jpg" alt="" />
      </div>
      <!-- 颜色，文字内容 -->
      <div class="slider-footer">
        <p>对人类来说会不会太超前了？</p>
        <ul class="slider-indicator">
          <li class="active"></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
        <div class="toggle">
          <button class="prev">&lt;</button>
          <button class="next">&gt;</button>
        </div>
      </div>
    </div>
    <script>
      // 1. 初始数据
      const sliderData = [
        {
          url: "./images/slider01.jpg",
          title: "对人类来说会不会太超前了？",
          color: "rgb(100, 67, 68)",
        },
        {
          url: "./images/slider02.jpg",
          title: "开启剑与雪的黑暗传说！",
          color: "rgb(43, 35, 26)",
        },
        {
          url: "./images/slider03.jpg",
          title: "真正的jo厨出现了！",
          color: "rgb(36, 31, 33)",
        },
        {
          url: "./images/slider04.jpg",
          title: "李玉刚：让世界通过B站看到东方大国文化",
          color: "rgb(139, 98, 66)",
        },
        {
          url: "./images/slider05.jpg",
          title: "快来分享你的寒假日常吧~",
          color: "rgb(67, 90, 92)",
        },
        {
          url: "./images/slider06.jpg",
          title: "哔哩哔哩小年YEAH",
          color: "rgb(166, 131, 143)",
        },
        {
          url: "./images/slider07.jpg",
          title: "一站式解决你的电脑配置问题！！！",
          color: "rgb(53, 29, 25)",
        },
        {
          url: "./images/slider08.jpg",
          title: "谁不想和小猫咪贴贴呢！",
          color: "rgb(99, 72, 114)",
        },
      ];
      //生成随机数，为数组的索引
      const sum = Math.floor(Math.random() * sliderData.length);
      console.log(sum);
      //根据随机数获取数组对象
      console.log(sliderData[sum]);
      //根据这个对象修改页面图片,文字，背景颜色
      const img = document.querySelector(".slider-wrapper img");
      console.log(img);
      img.src = sliderData[sum].url;
 
      //改变文字
      //获取p标签
      const p = document.querySelector(".slider-footer p");
      console.log(p);
      //更换内容
      p.innerHTML = sliderData[sum].title;
 
      //颜色
      const footer = document.querySelector(".slider-footer");
      //操作样式 背景色可以用style
      footer.style.backgroundColor = sliderData[sum].color;
        //小圆点改变
      //移除以前的高亮效果
      const a = document.querySelector(".active");
      a.classList.remove("active");
      //给当前添加高亮效果
      const li = document.querySelector(
        `.slider-indicator li:nth-child(${sum + 1})`
      );
      li.classList.add("active");
    </script>
  </body>
</html>复制

操作表单元素属性

表单很多情况，也需要修改属性，比如点击眼睛，可以看到密码，本质是把表单类型转换为文本框，正常的有属性有取值的跟其他的标签属性没有任何区别

获取: DOM对象.属性

设置: DOM对象.属性= 新值

表单属性中添加就有效果，移除就没有效果，一律使用布尔值表示，比如实现禁用按钮，勾选按钮等，如果为 true 代表添加了该属性，如果是 false 代表移除了该属性，比如： disabled、checked、selected。

语法：

 <script>
  // 操作表单属性
  // 1. 操作表单 type 和 value 属性
  // 1.1 修改type属性
  const username = document.querySelector('[name=username]')
  console.log(username)
  // username.type = 'password'
 
  // 1.2 操作表单的 value 属性
  // console.log(username.value)  // 查
  // username.value = '用户名试试'  // 增
  // username.value = '请输入用户名' // 改
  // username.value = ''  // 删
 
  // 2. 禁用按钮或者是勾选复选框  布尔型
  // 2.1 禁用按钮  
  const button = document.querySelector('button')
  // button.disabled = true  // true 是禁用
  button.disabled = false  // false 是不禁用
 
  // 2.2 勾选复选框
  const agree = document.querySelector('[name=agree]')
  console.log(agree)
  // agree.checked = true // true 是选中复选框
  agree.checked = false // flase 是不选中复选框
</script>复制

案例：

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input type="text" value="" />
    <br />
    <input type="password" value="23" />
    <br />
    <input type="radio" />男
    <br />
    <button>按钮</button>
    <br />
 
    <select name="" id="">
      <option value="">海南</option>
      <option value="" selected>湖南</option>
    </select>
    <script>
      //value属性 收集用户输入的值
      const uname = document.querySelector('[type="text"]');
      //获取 对象.value
      //设置 对象的value属性 对象.value=值
      // uname.value = "xiaod";
      console.log(uname);
      //type属性，规定input的类型
      const pwd = document.querySelector('[type="password"]');
      console.log(pwd.type); //查看属性类型
      pwd.type = "text"; //更改属性类型
 
      //修改单选或复选按钮的选中 --checked
      const radio = document.querySelector('[type="radio"]');
      //获取
      console.log(radio.checked);
      //设置false表示不选中，true表示选中
      radio.checked = true;
 
      //禁止使用表单--按钮类 对象.disabled
      const btn = document.querySelector("button");
      //获取
      console.log(btn.disabled);
      //设置true表示禁用。false表示启用
      btn.disabled = true;
 
      //使用selected设置和获取选中项判断是否被选中,选中为true否则为false
      const option = document.querySelector("select option:last-child");
      console.log(option.selected);
    </script>
  </body>
</html>复制

自定义属性

标准属性: 标签天生自带的属性比如class、id、title等, 可以直接使用点语法操作比如：对象.title 。

自定义属性：

在html5中推出来了专门的data-自定义属性
使用场景：通过自定义属性可以存储数据，后期可以使用这个数据
在标签上一律以data-开头
在DOM对象上一律以dataset对象方式获取

语法：

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div data-index="0" data-id="oyyy"></div>
    <!-- 语法：在标签里 data-自定义属性=值 
    作用：保存某些数据，后续使用
    获取  对象.dataset  对象集合
    对象.属性名 能获取到属性值
    -->
    <script>
      const div = document.querySelector("div");
      console.log(div.dataset); //获取的数据{index：0，id：'oyyy'}
      console.log(div.dataset.id); //获取属性值
      console.log(div.dataset.index); //获取属性值
    </script>
  </body>
</html>复制

定时器-间隔函数

网页中经常会需要一种功能：每隔一段时间需要自动执行一段代码，不需要我们手动去触发，例如：网页中的倒计时 ，定时器函数有两种: 间隔函数和延迟函数

setInterval 是 JavaScript 中内置的函数，它的作用是间隔固定的时间自动重复执行另一个函数，也叫定时器函数。

开启定时器:

语法：

<script>
setInterval(function () {
console.log('我是1秒钟执行一次')
}, 1000)
</script>

作用：每隔一段时间调用这个函数

注意：间隔时间单位是毫秒

关闭定时器

需要定时器变量名来关闭，返回的是一个唯一的数字 。

<script>
let timer = setInterval(repeat, 1000) // 注意调用的时候直接写函数名字不需要写小括号
console.log(timer) // 1
let timer1 = setInterval(repeat, 1000) // 注意调用的时候直接写函数名字不需要写小括号
console.log(timer1) // 2
// 2. 关闭定时器
clearInterval(timer)

</script>

案例：

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- setInterval(函数，间隔时间) 
    作用：每隔一段时间调用这个函数，间隔时间单位是毫秒，可以每隔指定时间自动重复执行某些代码
    -->
    <script>
      //   function setName() {
      //     console.log("xiao");
      //   }
      //   //setInterval(函数，间隔时间)
      //   setInterval(setName, 1000);
 
      //   //方法2
      //   setInterval(function () {
      //     console.log("xiao");
      //   }, 1000);
 
      //   //开启定时器
      //   //输出的每一个数为定时器的Id
      //   const timeId = setInterval(function () {
      //     console.log("xiao");
      //   }, 1000);
      //   console.log(timeId);
 
      //关闭定时器
      // let 变量名=setInterval(函数，间隔时间)
      // clearInterval(变量名)
      //一般不是开启就清除，有一个条件限制
      let num = 1;
      function setName() {
        num++;
        console.log("hi");
        //限制条件
        if (num === 4) clearInterval(timeId);
      }
      let timeId = setInterval(setName, 1000);
    </script>
  </body>
</html>复制

事件监听

以前写的代码都是自动执行的，我们希望一段代码在某个特定的时机才去执行，比如

点击按钮可以弹出警示框
比如鼠标经过显示下拉菜单等等
所以通过事件监听可以解决这个问题

事件

事件是程序在运行的时候，发生的特定动作或者特定的事情，比如，点击按钮，鼠标经过等等。

事件监听

事件发生后，想要执行的代码写到事件处理函数里面

当触发指定的事件时，则事件处理函数就会被执行
事件监听是将事件处理函数注册到元素对象身上
事件监听也称为: 事件注册、事件绑定

语法： 元素对象.addEventListener('事件类型', 事件处理函数)

事件监听三要素

事件源(谁被触发了)
事件类型 (什么情况下触发，点击还是鼠标经过等)
事件处理函数（要做什么事情）

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button>按钮</button>
    <script>
      //点击按钮弹出警示框
      const but = document.querySelector("button");
      //   事件三要素=>事件源.addEventListener('事件类型',事件处理函数)
      but.addEventListener("click", function () {
        alert("点击后执行");
      });
    </script>
  </body>
</html>复制

注意：

1.事件类型要加引号，小写

2.函数是点击之后再去执行，每次点击都会执行一次

回调函数

回调函数:当一个函数当做参数来传递给另外一个函数的时候，这个函数就是回调函数（回头调用的函数）

作用：完成某些特定任务

 <script>
  // 1. 定时器间隔函数，里面第一个参数又是函数，这个匿名函数就是回调函数
  setInterval(function () {
    console.log('我是回调函数')
  }, 1000)
 
  // 2. addEventListener 函数的第二个参数也是函数，这个匿名函数也是回调函数
  btn.addEventListener('click', function () {
    console.log('我是回调函数')
  })
</script>复制

事件监听版本

1，DOM0 事件，事件源.on事件类型 = function() { }

btn.onclick = function () {
alert('我是弹窗1')
}

2， DOM 2事件，事件源.addEventListener(事件类型，事件处理函数)

btn.addEventListener('click', function () {
console.log('我是回调函数')
})

区别：

on 方式同名事件会被覆盖，addEventListener则不会，同时拥有事件更多特性，推荐使用

事件类型

将众多的事件类型分类可分为：鼠标事件、键盘事件、表单事件、焦点事件等，我们逐一展开学习。事件类型的大小写敏感的字符串，统一用小写字母

1，鼠标事件

鼠标事件是指跟鼠标操作相关的事件，如单击、经过等。

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        width: 300px;
        height: 300px;
        background-color: #8df;
        text-align: center;
        line-height: 300px;
        color: orange;
        font-size: 30px;
        margin: 100px auto;
      }
    </style>
  </head>
  <body>
    <div>九四</div>
    <script>
      //鼠标事件，
      const div = document.querySelector("div");
      //点击，表示点击后执行语句
      div.addEventListener("click", function () {
        alert("oyyy");
      });
      //鼠标经过/鼠标进入，表示点击后执行
      div.addEventListener("mouseenter", function () {
        alert("oy");
      });
      //鼠标离开，表示点击后执行
      div.addEventListener("mouseleave", function () {
        alert("hxm");
      });
    </script>
  </body>
</html>复制

焦点事件

主要是针对于表单是否获得光标的事件，获得焦点 focus 、失去焦点 blur。

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input type="text" class="one" />
    <br />
    <input type="text" class="two" />
    <script>
      //焦点===文本框，作用域
      const one = document.querySelector(".one");
      //获取元素,获得焦点
      //当文本域获取焦点后执行函数
      one.addEventListener("focus", function () {
        console.log("666");
      });
 
      one.addEventListener("blur", function () {
        console.log("999");
      });
      // 2. 拓展 自动获得焦点 focus()    自动失去焦点 blur()
      //默认让two盒子自动获取焦点
      const two = document.querySelector(".two");
      two.focus();
    </script>
  </body>
</html>复制

键盘事件和 input事件

事件	触发时机	得到表单值
keydown	按下键盘时触发	不带最后一次按键值 ab
keyup	弹起键盘时触发	输入内容 abc
input	表单value发生变化时触发	输入内容 abc

 <!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>input事件和键盘事件</title>
  <style>
    textarea {
      width: 300px;
      height: 30px;
      padding: 10px;
      border-color: transparent;
      outline: none;
      resize: none;
      background: #f5f5f5;
      border-radius: 4px;
    }
  </style>
</head>
 
<body>
  <textarea id="tx" placeholder="发一条友善的评论" rows="2"></textarea>
  <script>
    // 获取元素
    const tx = document.querySelector('#tx')
 
    // 1. 键盘事件 
    // 1.1 键盘按下事件  keydown  当我们按下键盘的时候就触发
    tx.addEventListener('keydown', function () {
      console.log('我是keydown事件' + tx.value)
    })
 
    // 1.2 键盘弹起事件  keyup 当我们键盘弹起的时候就触发
    tx.addEventListener('keyup', function () {
      console.log('我是keyup事件' + tx.value)
    })
 
    // 2. 用户输入事件 input ，是表单value的值发生变化的时候触发
    tx.addEventListener('input', function () {
      console.log('我是input事件' + tx.value)
    })
    // 3. 注意事项
    // 3.1 执行顺序  keydown →  input   →  keyup
    // 3.2 keydown 获取值的时候得不到最后一次按键的值， keyup和input可以得到用户输入内容
  </script>
</body>
 
</html>复制

案例：搜索框显示和隐藏

 <!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>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
 
      ul {
        list-style: none;
      }
 
      .mi {
        position: relative;
        width: 223px;
        margin: 100px auto;
      }
 
      .mi .search-text {
        width: 223px;
        height: 48px;
        padding: 0 10px;
        font-size: 14px;
        line-height: 48px;
        border: 1px solid #e0e0e0;
        outline: none;
      }
 
      /* 搜索框边框颜色 */
      .mi .search {
        border: 1px solid #ff6700;
      }
 
      /* 下拉菜单 */
      .result-list {
        display: none;
        position: absolute;
        left: 0;
        top: 48px;
        width: 223px;
        border: 1px solid #ff6700;
        border-top: 0;
        background: #fff;
      }
 
      .result-list a {
        display: block;
        padding: 6px 15px;
        font-size: 12px;
        color: #424242;
        text-decoration: none;
      }
 
      .result-list a:hover {
        background-color: #eee;
      }
    </style>
  </head>
 
  <body>
    <div class="mi">
      <input type="search" placeholder="小米笔记本" class="search-text" />
      <ul class="result-list">
        <li><a href="#">全部商品</a></li>
        <li><a href="#">小米11</a></li>
        <li><a href="#">小米10S</a></li>
        <li><a href="#">小米笔记本</a></li>
        <li><a href="#">小米手机</a></li>
        <li><a href="#">黑鲨4</a></li>
        <li><a href="#">空调</a></li>
      </ul>
    </div>
    <script>
      //需求：表单获取焦点显示下拉菜单并且改变边框样式(类名，search)，当表单失去焦点
      //，隐藏下拉菜单，取消边框样式
      //1隐藏下拉菜单
      //2给菜单绑定获取焦点事件
      const search = document.querySelector(".search-text");
      const li = document.querySelector(".result-list");
      search.addEventListener("focus", function () {
        //表单有变框颜色
        //通过添加类
        search.classList.add("search");
        //下拉菜单显示
        li.style.display = "block";
      });
 
      //给表单绑定失去焦点事件
      search.addEventListener("blur", function () {
        //失去边框
        search.classList.remove("search");
        //隐藏下拉菜单
        li.style.display = "none";
      });
    </script>
  </body>
</html>复制

案例2：评论区按回车和点击回车发布

 <!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>
    <style>
      .wrapper {
        min-width: 400px;
        max-width: 800px;
        display: flex;
        justify-content: flex-end;
      }
 
      .avatar {
        overflow: hidden;
        width: 48px;
        height: 48px;
        margin-right: 20px;
        border-radius: 50%;
        background: url(./images/avatar.jpg) no-repeat center / cover;
      }
 
      .wrapper textarea {
        flex: 1;
        height: 30px;
        padding: 10px;
        border-color: transparent;
        outline: none;
        resize: none;
        background: #f5f5f5;
        border-radius: 4px;
        transition: all 0.5s;
      }
 
      .wrapper textarea:focus {
        height: 50px;
        border-color: #e4e4e4;
        background: #fff;
      }
 
      .wrapper button {
        width: 70px;
        margin-left: 10px;
        border: none;
        color: #fff;
        background: #00aeec;
        border-radius: 4px;
        cursor: pointer;
      }
 
      .wrapper .total {
        margin-right: 80px;
        margin-top: 5px;
        color: #999;
        opacity: 0;
        transition: all 0.5s;
      }
 
      .list {
        display: flex;
        min-width: 400px;
        max-width: 800px;
      }
 
      .list .item {
        display: flex;
        width: 100%;
      }
 
      .list .item .info {
        flex: 1;
        border-bottom: 1px dashed #e4e4e4;
        padding-bottom: 10px;
      }
 
      .list .item p {
        margin: 0;
      }
 
      .list .item .name {
        color: #fb7299;
        font-size: 14px;
        font-weight: bold;
      }
 
      .list .item .text {
        padding: 10px 0;
        color: #333;
        font-size: 13px;
      }
 
      .list .item .time {
        color: #999;
        font-size: 12px;
      }
    </style>
  </head>
 
  <body>
    <div class="wrapper">
      <i class="avatar"></i>
      <textarea
        id="tx"
        placeholder="发一条友善的评论"
        rows="2"
        maxlength="200"
      ></textarea>
      <button>发布</button>
    </div>
    <div class="wrapper">
      <span class="total">0/200字</span>
    </div>
    <div class="list">
      <div class="item" style="display: none">
        <i class="avatar"></i>
        <div class="info">
          <p class="name">清风徐来</p>
          <p class="text">
            大家都辛苦啦，感谢各位大大的努力，能圆满完成真是太好了[笑哭][支持]
          </p>
          <p class="time">2099-10-10 20:29:21</p>
        </div>
      </div>
    </div>
    <script>
      //获取元素
      const tx = document.querySelector("#tx");
      const total = document.querySelector(".total");
      //获取文本域元素
      const li = document.querySelector(".item");
      //获取text元素替换文字
      const text = document.querySelector(".text");
      //给元素注册事件，获取焦点事件
      tx.addEventListener("focus", function () {
        total.style.opacity = 1;
      });
      //失去焦点事件
      tx.addEventListener("blur", function () {
        total.style.opacity = 0;
      });
      //统计字数
      tx.addEventListener("input", function () {
        //改变字数的数据
        // console.log(tx.value);
        //trim()方法可以去除字符串两边的空格
        total.innerHTML = `${tx.value.trim().length}/200字`;
      });
 
      //回车发布评论,获取键盘事件
      tx.addEventListener("keyup", function (e) {
        // // console.log("6");
        // //当按下回车键时输出文本域内容
        // if (e.key === "Enter") {
        //   li.style.display = "flex";
        //   // tx.value获取用户输入的内容
        //   text.innerHTML = tx.value.trim();
        //   //清空文本域内容和计数消除
        //   tx.value = "";
        //   total.innerHTML = "0/200字";
        //   tx.blur(); //调用隐藏文字
        // }
 
        //方法2 调用click函数
        if (e.key === "Enter") {
          button.click();
        }
      });
      //点击按钮也可以发布
      const button = document.querySelector("button");
      button.addEventListener("click", function () {
        // console.log("6");
        //当按下回车键时输出文本域内容
 
        li.style.display = "flex";
        // tx.value获取用户输入的内容
        text.innerHTML = tx.value.trim();
        //清空文本域内容和计数消除
        tx.value = "";
        total.innerHTML = "0/200字";
        tx.blur(); //调用隐藏文字
      });
    </script>
  </body>
</html>复制

事件对象

概念：事件对象也是个对象，这个对象里有事件触发时的相关信息，包含属性和方法，例如：鼠标点击事件中，事件对象就存了鼠标点在哪个位置等信息

使用场景 ：可以判断用户按下哪个键，比如按下回车键可以发布新闻，可以判断鼠标点击了哪个元素，从而做相应的操作

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input type="text" />
    <script>
      const inp = document.querySelector("input");
      //key属性  键盘事件，事件对象携带的属性
      inp.addEventListener("keydown", function (e) {
        console.log(e.key); //获取当前按下的按键名称
        //e.key  判断按下了哪一个键
        if (e.key === "Enter") {
          console.log("666");
        }
 
        //e.targte  表示得到触发事件的元素
        console.log(e.targte);
      });
    </script>
  </body>
</html>复制

事件回调函数的第一个参数即所谓的事件对象，通常习惯性的将这个对数命名为event，ev

环境对象

作用：弄清楚this的指向，可以让我们代码更简洁，能够分析判断函数运行在不同环境中 this 所指代的对象。

函数的调用方式不同，this 指代的对象也不同
【谁调用， this 就是谁】是判断 this 指向的粗略规则
直接调用函数，其实相当于是 window.函数，所以 this 指代 window

环境对象：指的是函数内部特殊的 this, 它指向一个对象，并且受当前环境影响

 <body>
  <button>点击</button>
  <script>
    // 环境对象 this   粗略规则： 谁调用函数，this就指向谁
 
    // 1. 全局环境
    // console.log(this)  // this 指向 window 全局对象
 
    // 2. 普通函数和间歇函数
      setInterval(function(){
          console.log(this)
      },1000)
      
    function fn() {
      console.log(this)  // this 指向 window 全局对象
    }
    window.fn()
 
    // 3. 对象方法
    const obj = {
      uname: '佩奇',
      sing: function () {
        console.log(this)  // this 指向 obj对象
      }
    }
    obj.sing()
 
    // 4. 事件
    const btn1 = document.querySelector('button')
    btn1.addEventListener('click', function () {
      // console.log(this)  // this 指向 btn 这个对象
      // btn1.style.backgroundColor = 'pink'
      this.style.backgroundColor = 'pink'
    })
  </script>
</body>复制

排他思想

是一种思路，目的是突出显示某个元素，比如，有多个元素，当鼠标经过时，只有当前元素会添加高亮样式，其余的元素移除样式。

目标：排除其它人，保留自己

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .active {
        background-color: #8df;
      }
    </style>
  </head>
  <body>
    <button class="active">1</button>
    <button>2</button>
    <button>3</button>
    <button>4</button>
    <button>5</button>
    <script>
      //要求，鼠标经过每一个小盒子，当前盒子亮度显示
      //先获取全部小盒子，给每一个盒子添加事件
      const bttu = document.querySelectorAll("button");
      //先打印
      for (let i = 0; i < bttu.length; i++) {
        // console.log(bttu[i]);
        bttu[i].addEventListener("click", function () {
          for (let j = 0; j < bttu.length; j++) {
            //先 清除所样式
            bttu[j].classList.remove("active");
          }
          //再给当前点击添加样式
          bttu[i].classList.add("active");
        });
      }
    </script>
  </body>
</html>复制

事件流

事件流指的是事件完整执行过程中的流动路径 ，当触发事件时，会经历两个阶段，分别是捕获阶段、冒泡阶段 。

事件捕获

概念：当一个元素的事件被触发时，会从DOM的根元素开始依次调用同名事件 (从外到里)

语法：元素.addEventListener('click', 回调函数，是否使用捕获)

 <body>
  <div class="father">
    父盒子
    <div class="son">子盒子</div>
  </div>
  <script>
    // 事件流
    const father = document.querySelector('.father')
    const son = document.querySelector('.son')
    // 1. 事件捕获
    // // 点击父盒子
     father.addEventListener('click', function () {
       alert('我是爸爸')
     }, true)  // 事件捕获
     // 点击子盒子
     son.addEventListener('click', function () {
       alert('我是儿子')
     }, true) // 事件捕获
  </script>
</body>复制

注意：

addEventListener第三个参数传入 true 代表是捕获阶段触发（很少使用）

若传入false代表冒泡阶段触发，默认就是 false

事件冒泡

概念：当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发。这一过程被称为事件冒泡

简单理解：当一个元素触发事件后，会依次向上调用所有父级元素的 同名事件
事件冒泡是默认存在的，或者第三个参数传入 false 都是冒泡
实际工作都是使用事件冒泡为主

 <body>
  <div class="father">
    父盒子
    <div class="son">子盒子</div>
  </div>
  <script>
    // 事件流
    const father = document.querySelector('.father')
    const son = document.querySelector('.son')
    // 2. 事件冒泡
    // 点击父盒子
    father.addEventListener('click', function () {
      alert('我是爸爸')
    })
    // 点击子盒子
    son.addEventListener('click', function () {
      alert('我是儿子')
    }, false) 
  </script>
</body>复制

阻止冒泡

问题：因为默认就有冒泡阶段的存在，所以容易导致事件影响到父级元素（祖先元素）

需求：若想把事件就限制在当前元素内，就需要阻止事件冒泡

前提： 阻止事件冒泡需要拿到事件对象

 <body>
  <div class="father">
    父盒子
    <div class="son">子盒子</div>
  </div>
  <script>
    // 事件流
    const father = document.querySelector('.father')
    const son = document.querySelector('.son')
    // 1. 事件冒泡
    // 点击父盒子
    father.addEventListener('click', function () {
      alert('我是爸爸')
    })
    // 点击子盒子
    son.addEventListener('click', function (e) {
      alert('我是儿子')
      // 1.1 先获取事件对象
      // 1.2 事件对象.stopPropagation()  注意是个方法 
      e.stopPropagation()
    }) 
  </script>
</body>复制

结论：事件对象中的 ev.stopPropagation 方法，专门用来阻止事件冒泡（事件传播）

鼠标经过事件：

mouseover 和 mouseout 会有冒泡效果

mouseenter 和 mouseleave 没有冒泡效果 (推荐)

事件捕获和事件冒泡案例：

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .father {
        position: relative;
        width: 400px;
        height: 400px;
        background-color: pink;
        margin: 100px auto;
        text-align: center;
      }
      .son {
        position: absolute;
        top: 100px;
        left: 100px;
        width: 200px;
        height: 200px;
        background-color: blue;
        text-align: center;
        line-height: 200px;
        /* margin: 80px auto; */
      }
    </style>
  </head>
  <body>
    <div class="father">
      父盒子
      <div class="son">子盒子</div>
    </div>
    <script>
      //事件流
      const father = document.querySelector(".father");
      const son = document.querySelector(".son");
      //默认是冒泡事件流
      father.addEventListener("click", function () {
        alert("666666");
      });
      son.addEventListener("click", function (e) {
        //事件对象.stopPropagation()   阻止事件冒泡和捕获方法
        e.stopPropagation();
        alert("666");
      });
    </script>
  </body>
</html>复制

事件委托

事件委托(EventDelegation)：是JavaScript中注册事件的常用技巧，也称为事件委派、事件代理，简单理解：原本需要注册在子元素的事件委托给父元素，让父元素担当事件监听的职务

可以解决的问题

如果同时给多个元素注册事件，不需要利用循环多次注册事件
减少了大量的事件监听的性能

事件委托是利用事件流的特征解决一些开发需求的知识技巧

优点：减少注册次数，可以提高程序性能
原理：事件委托其实是利用事件冒泡的特点
- 给父元素注册事件，当我们触发子元素的时候，会冒泡到父元素身上，从而触发父元素的事件

利用事件委托方式如何得到当前点击的元素呢？

实现：事件对象.target. tagName 可以获得真正触发事件的元素

案例：

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <ul>
      <li>第1个li</li>
      <li>第2个li</li>
      <li>第3个li</li>
      <li>第4个li</li>
      <li>第5个li</li>
    </ul>
    <script>
      //事件委托
      //事件绑定给父级，父级触发事件
      const ul = document.querySelector("ul");
      ul.addEventListener("click", function (e) {
        // console.log("4");
        // this.style.color = "#8df";
        //通过事件对象，得到事件源e.target
        // console.log(e.target);
        //通过e.target.tagName得到事件源的标签名
        // console.log(e.target.tagName);
        if (e.target.tagName === "LI") {
          e.target.style.color = "#8df";
        }
      });
    </script>
  </body>
</html>复制

阻止默认行为

阻止元素发生默认的行为，例如：当点击提交按钮时阻止对表单的提交，还有阻止链接的跳转等等

语法： 事件对象.preventDefault()

 <body>
  <form action="">
    姓名: <input type="text" name="username">
    <button>提交</button>
  </form>
  <a href="http://www.baidu.com">点击跳转</a>
  <script>
    // 阻止默认行为
    const form = document.querySelector('form')
    const input = document.querySelector('[name=username]')
    form.addEventListener('submit', function (e) {
      // 如果input表单的值为空则不允许提交
      if (input.value === '') {
        // return 无法阻止提交事件
        e.preventDefault()  // 阻止提交事件
      }
    })
 
    document.querySelector('a').addEventListener('click', function (e) {
      e.preventDefault()
    })
  </script>
</body>复制

事件解绑

移除事件处理函数，也称为解绑事件。

 <body>
  <button class="l2">移除L2事件监听</button>
  <button class="l0">移除L0事件监听</button>
  <script>
    // 需求：按钮就点击一次，然后移除点击事件
 
    // 1. l2事件监听
    const l2 = document.querySelector('.l2')
 
    l2.addEventListener('click', fn)
    function fn() {
      alert('我点击了')
      // 移除事件监听
      l2.removeEventListener('click', fn)
    }
 
    // 2. l0事件监听
    const l0 = document.querySelector('.l0')
    l0.onclick = function () {
      alert('我点击了')
      // 移除事件监听
      l0.onclick = null
    }
  </script>
</body>复制

其他事件

页面加载事件

加载外部资源（如图片、外联CSS和JavaScript等）加载完毕时触发的事件，

为什么要学？

有些时候需要等页面资源全部处理完了做一些事情
老代码喜欢把 script 写在 head 中，这时候直接找 dom 元素找不到

语法：事件名：load

监听页面所有资源加载完毕：

window.addEventListener('load', function() {
// xxxxx
})

当初始的 HTML 文档被完全加载和解析完成之后就触发，而无需等待样式表、图像等完全加载

语法：事件名：DOMContentLoaded

document.addEventListener('DOMContentLoaded', function() {
// xxxxx
})

案例：

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script>
      //页面加载事件，当所有的资源加载完毕后，触发这个事件
      // window.addEventListener('load',function(){
      //     const div=document.querySelector('div')
      //     div.innerHTML='hd'
      // })
 
      //HTML元素加载事件--DOMContentLoaded
      //只要HTML标签加载完成了。机会触发这个事件。它不会等待Css，JS，图片视频等执行完成再执行
      document.addEventListener("DOMContentLoaded", function () {
        const div = document.querySelector("div");
        div.innerHTML = "hd";
      });
    </script>
  </head>
  <body>
    <div>文本</div>
  </body>
</html>复制

元素滚动事件

滚动条在滚动的时候持续触发的事件，

学习原因:很多网页需要检测用户把页面滚动到某个区域后做一些处理，比如固定导航栏，比如返回顶部

语法：事件名：scroll

监听整个页面滚动：

window.addEventListener('scroll', function() {
// xxxxx
})

//document.documentElement 获取html标签
const top=document.documentElement.scrollTop//表示页面滚去多少像素，可以获取滚动的距离

scrollTop / scrollLeft, 被卷去的头部或者左侧，可以读取，也可以修改（赋值）

案例：

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        min-height: 3000px;
      }
      div {
        width: 300px;
        height: 100px;
        overflow: auto;
      }
    </style>
  </head>
  <body>
    <!-- <div>
      1
      <br />
      1
      <br />
      1
      <br />
      1
      <br />
      1
      <br />
      1
      <br />
      1
      <br />
      1
      <br />
      1
      <br />
      1
      <br />
    </div> -->
    <script>
      //页面滚动事件
      window.addEventListener("scroll", function () {
        console.log("666");
        //document.documentElement--获取html标签
        const top = document.documentElement.scrollTop;
        console.log(top);
      });
      //元素添加滚动事件
      const div = document.querySelector("div");
      div.addEventListener("scroll", function () {
        console.log(2);
      });
    </script>
  </body>
</html>复制

页面尺寸事件

会在窗口尺寸改变的时候触发事件：

window.addEventListener('resize', function() {
// xxxxx
//获取body的宽度
console.log(document.body.clientWidth)
console.log(document.body.clientHeight)
})

clientWidth和clientHeight，获取元素的可见部分宽高（不包含border，margin，滚动条等）

案例：

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      window.addEventListener("resize", function () {
        // console.log(2);
        //获取body的宽度
        console.log(document.body.clientWidth);
        //获取body的高度
        console.log(document.body.clientHeight);
      });
    </script>
  </body>
</html>复制

元素尺寸与位置

获取元素的自身宽高、包含元素自身设置的宽高、padding、border

日期对象

日期对象：用来表示日期和时间的对象，

作用：可以得到当前系统日期和时间

Date是JavaScript内置对象，日期对象使用必须先实例化：创建一个日期对象并获取时间，在代码中发现了 new 关键字时，一般将这个操作称为实例化

实例化

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      //实例化日期 new Date()
      //获取当前日期
      const dateNow = new Date();
      document.write(dateNow);
      //获取指定日期
      const da = new Date("2024-4-8");
      document.write(da);
    </script>
  </body>
</html>复制

格式化日期对象

方法	作用	说明
getFullYear()	获得年份	获取四位年份
getMonth()	获得月份	取值为 0 ~ 11
getDate()	获取月份中的每一天	不同月份取值也不相同
getDay()	获取星期	取值为 0 ~ 6
getHours()	获取小时	取值为 0 ~ 23
getMinutes()	获取分钟	取值为 0 ~ 59
getSeconds()	获取秒	取值为 0 ~ 59

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      //1,实例化日期对象
      const da = new Date();
      //2对日期对象进行格式化
      // 获取年份
      console.log(da.getFullYear());
      //获取月份
      console.log(da.getMonth() + 1); //因为月份从0开始记
      //获取日期
      console.log(da.getDate());
      //获取星期
      console.log(da.getDay());
      //获取小时
      console.log(da.getHours());
      //获取分钟
      console.log(da.getMinutes());
      //获取秒钟
      console.log(da.getSeconds());
    </script>
  </body>
</html>复制

格式化日期对象另外方法

方法	作用	说明
toLocaleString()	返回该日期对象的字符串（包含日期和时间）	2099/9/20 18:30:43
toLocaleDateString()	返回日期对象日期部分的字符串	2099/9/20
toLocaleTimeString()	返回日期对象时间部分的字符串	18:30:43

 <body>
  <div class="box"></div>
  <script>
 
    const date = new Date()
    console.log(date.toLocaleString())  // 2023/1/27 23:19:20
    console.log(date.toLocaleDateString())  // 2023/1/27 
    console.log(date.toLocaleTimeString())  // 23:19:20
 
    // 1. 封装一个 getDateTime函数，里面格式化时间对象
    function getDateTime() {
      const date = new Date()
 
      return date.toLocaleString()
    }
    // 注意： 先写上这句话，防止盒子有1秒的空白期
    document.querySelector('.box').innerText = getDateTime()
    // 3. 显示到box盒子里面，并且添加定时器
    setInterval(function () {
      document.querySelector('.box').innerText = getDateTime()
    }, 1000)
  </script>
</body>复制

案例：页面显示当前日期

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div>2024年4月6号 21：30：50</div>
    <script>
      const div = document.querySelector("div");
      //实例化日期
      function getDateTime() {
        const date = new Date();
        const year = date.getFullYear();
        const month = date.getMonth() + 1;
        const day = date.getDate();
        //格式化时间
        const hours =
          date.getHours() >= 10 ? date.getHours() : "0" + date.getHours();
        const minutes =
          date.getMinutes() >= 10 ? date.getMinutes() : "0" + date.getMinutes();
        const second =
          date.getSeconds() >= 10 ? date.getSeconds() : "0" + date.getSeconds();
        return `${year}年${month}月${day}日${hours}:${minutes}:${second}`;
      }
      const result = getDateTime();
      div.innerHTML = getDateTime();
      //   document.write(result);
      //定时执行函数
      setInterval(function () {
        div.innerHTML = getDateTime();
      }, 1000);
      //   console.log(result);
    </script>
  </body>
</html>复制

时间戳

概念;是指1970年01月01日00时00分00秒起至现在的总毫秒数(数字型)，它是一种特殊的计量时间的方式

使用场景： 计算倒计时效果，需要借助于时间戳完成

算法：

将来的时间戳 - 现在的时间戳 = 剩余时间毫秒数
剩余时间毫秒数转换为年月日时分秒就是倒计时时间

获取时间戳的方法，分别为 getTime 和 Date.now 和 +new Date()

     // 1. 实例化
  const date = new Date()
  // 2. 获取时间戳
  console.log(date.getTime())
// 还有一种获取时间戳的方法
  console.log(+new Date())
  // 还有一种获取时间戳的方法
  console.log(Date.now())复制

DOM 节点

DOM树：DOM 将 HTML文档以树状结构直观的表现出来，我们称之为 DOM 树或者节点树

节点（Node）是DOM树(节点树)中的单个点。包括文档本身、元素、文本以及注释都属于是节点。

元素节点（重点）
- 所有的标签比如 body、 div
- html 是根节点
属性节点
- 所有的属性比如 href
文本节点
- 所有的文本

查找节点

利用节点关系查找节点，返回的都是对象

父节点
子节点
兄弟节点

有了查找节点可以使我们选择元素更加方便

父节点

语法：元素.parentNode

 <!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>
    <style>
      .pop {
        display: block;
        visibility: visible;
        position: fixed;
        z-index: 9999;
        left: 50%;
        top: 50%;
        width: 530px;
        height: 254px;
        margin-top: -127px;
        margin-left: -265px;
        background: url(./images1/login.webp) no-repeat;
      }
 
      .close {
        position: absolute;
        right: 0;
        top: 0;
        width: 40px;
        height: 40px;
      }
    </style>
  </head>
 
  <body>
    <div class="pop">
      <a href="javascript:;" class="close"></a>
    </div>
    <script>
      const a = document.querySelector(".close");
      //   console.log(a.parentNode);
      const p = a.parentNode;
      a.addEventListener("click", function () {
        p.style.display = "none";
      });
    </script>
  </body>
</html>复制

子节点

语法：父元素.children

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <ul>
      <li>第1个li</li>
      <li>第2个li</li>
      <li>第3个li</li>
      <li>第4个li</li>
      <li>第5个li</li>
    </ul>
    <script>
      //获取子节点元素
      const ul = document.querySelector("ul");
      //   console.log(ul.children);
      //   console.log(ul.children[2]);
      //   console.log(ul.children[2].innerHTML);
      //获取兄弟节点
      const li3 = ul.children[2];
      console.log(li3.previousElementSibling.innerHTML);
      console.log(li3.nextElementSibling.innerHTML);
    </script>
  </body>
</html>复制

兄弟节点

 <body>
  <ul>
    <li>我是第1个孩子</li>
    <li>我是第2个孩子</li>
    <li>我是第3个孩子</li>
    <li>我是第4个孩子</li>
  </ul>
  <script>
    // 2. 查询兄弟节点
    const li2 = document.querySelector('ul li:nth-child(2)')
    // console.log(li2)
    console.log(li2.previousElementSibling) // 上一个兄弟
    console.log(li2.nextElementSibling)  // 下一个兄弟
    console.log(ul.children[0]) // 第一个孩子
    console.log(ul.children[2]) // 第三个孩子
  </script>
</body>复制

增加节点

很多情况下，我们需要在页面中增加元素

比如，点击发布按钮，可以新增一条信息

一般情况下，我们新增节点，按照如下操作：

创建一个新的节点
把创建的新的节点放入到指定的元素内部

父元素最后一个子节点之后，插入节点元素，element代表元素

element.append()

2，父元素第一个子元素的之前，插入节点元素

element.prepend()

例如:

 <body>
  <ul>
    <li>我是小li</li>
  </ul>
  <script>
    // 1. 创建节点
    const li = document.createElement('li')
    li.innerHTML = '我是放到后面的'
    console.log(li)
 
    // 2. 追加给父元素
    const ul = document.querySelector('ul')
    // 2.1 append 放到ul 的最后面 类似css的 after伪元素
    ul.append(li)
    // 2.2 prepend放到 ul 的最前面 类似css的 before伪元素
    const firstli = document.createElement('li')
    firstli.innerHTML = '我是放到前面的'
    ul.prepend(firstli)
  </script>
</body>复制

案例：

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div></div>
    <script>
      //增加节点
      //1创建节点
      const span = document.createElement("span");
      span.innerHTML = "666";
      //追加节点
      //元素后面追加
      const div = document.querySelector("div");
      //   div.append(span);
      div.prepend(span);
    </script>
  </body>
</html>复制

删除节点

语法： element.remove()

把对象从它所属的 DOM 树中删除
删除节点和隐藏节点（display:none）有区别的：隐藏节点还是存在的，但是删除，则从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>删除节点</title>
  </head>
 
  <body>
    <div class="remove">我要删除</div>
    <div class="none">我要隐藏</div>
    <script>
      // 1. 删除节点, remove 会从dom树中删除这个元素
      const remove = document.querySelector('.remove')
      remove.remove()
 
      // 2. display:none 隐藏元素，页面看不见，但是dom树中还存在这个标签
      const none = document.querySelector('.none')
      none.style.display = 'none'
    </script>
  </body>
 
</html>复制

M端事件

M端(移动端)有自己独特的地方。比如触屏事件 touch（也称触摸事件），Android 和 IOS都有。

touch 对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔。触屏事件可响应用户手指（或触控笔）对屏幕或者触控板操作。

常见的触屏事件如下：

 <body>
  <div class="box"></div>
  <script>
    // 触摸事件
    const box = document.querySelector('.box')
    // 1. 手指触屏开始事件 touchstart
    box.addEventListener('touchstart', function () {
      console.log('我开始摸了')
    })
    // 2. 手指触屏滑动事件 touchmove
    box.addEventListener('touchmove', function () {
      console.log('我一直摸')
    })
 
    // 3. 手指触屏结束事件  touchend
    box.addEventListener('touchend', function () {
      console.log('我摸完了')
    })
  </script>
</body>复制

案例：

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        width: 300px;
        height: 300px;
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <div></div>
    <script>
      const div = document.querySelector("div");
      div.addEventListener("touchstart", function () {
        console.log("666");
      });
      div.addEventListener("touchmove", function () {
        console.log("6");
      });
      div.addEventListener("touchend", function () {
        console.log("666666");
      });
    </script>
  </body>
</html>复制

JS插件

插件: 就是别人写好的一些代码,我们只需要复制对应的代码,就可以直接实现对应的效果，

学习插件的思路：

1.看官网。了解这个插件可以完成什么需求 Swiper中文网-轮播图幻灯片js插件,H5页面前端开发

2.查看基本使用流程。 Swiper使用方法 - Swiper中文网

3.写个小demo。看在线演示,找到符合自己需求的demo Swiper演示 - Swiper中文网

4.应用的开发中。

AlloyFinger

AlloyFinger 是腾讯 AlloyTeam 团队开源的超轻量级 Web 手势插件，为元素注册各种手势事件

github地址：GitHub - AlloyTeam/AlloyFinger: Super tiny size multi-touch gestures library for the web. 　　　You can touch this →Super tiny size multi-touch gestures library for the web. 　　　You can touch this → - AlloyTeam/AlloyFingerhttps://github.com/AlloyTeam/AlloyFinger

使用步骤：

下载js库：http://alloyteam.github.io/AlloyFinger/alloy_finger.js
将AlloyFinger库引入当前文件：<scriptsrc="alloy_finger.js"></script>

或者使用在线地址：<script src="<https://unpkg.com/alloyfinger@0.1.16/alloy_finger.js>"></script>

3，配置

new AlloyFinger(element, { // element 是给哪个元素做滑动事件
swipe: function (e) {
// 滑动的时候要做的事情 e.direction 可以判断上下左右滑动 Left Right 等
}
})

	// 1. getElementById 根据id获取
	const box = document.getElementById('box')
	console.log(box)

	// 2. getElementsByClassName 根据类名获取返回伪数组
	const items = document.getElementsByClassName('item')
	console.log(items)

	// 3. getElementsByTagName 根据标签名获取返回伪数组
	const ps = document.getElementsByTagName('p')
	console.log(ps)

	// 4. getElementsByName 根据name属性获取返回伪数组
	const inputs = document.getElementsByName('username')
	console.log(inputs)

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>
	<style>
	.box {
	background-color: pink;
	}
	</style>
	</head>
	<body>
	<!--
	dom是用来操作也能元素（标签）
	dom是将标签解析成dom对象--对象就有属性和方法--操作标签的
	dom顶级的对象是document对象
	-->
	<div class="box">我是盒子</div>
	<ul>
	<li>5646</li>
	<li>5646</li>
	<li>5</li>
	</ul>
	<ol>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	</ol>
	<script>
	// 1.3 如果获取不到则返回 null
	const p = document.querySelector('p')
	console.log(p) // null
	//通过css选择器获取元素，document.querySelector('css选择器')
	//获取单个元素，匹配到的第一个元素
	const box = document.querySelector(".box");
	console.log(box); //只能单独输出内容
	console.dir(box); //用来输出对象格式数据

	//案例
	const ul = document.querySelector("ul li:nth-child(3)");
	console.dir(ul);// 只选择满足条件的第3个元素li

	//获取多个元素 document.querySelectorALL('css选择器')
	//All 方法获取到的是一个伪数组，具备数组的长度和索引
	//获取的都是数组形式
	//所以可以通过循环遍历的方式拿到每一个，但是不能使用数组的方法例如push()
	const lis = document.querySelectorAll("ol li");
	console.log(lis);// 只选择满足条件的第一个元素li
	for (let i = 0; i < lis.length; i++) {
	console.log(lis[i]);
	}
	</script>
	</body>
	</html>

	// 2. document.querySelectorAll() 选择指定css选择器的所有元素
	// 2.1 参数还是字符串的css选择器
	const lis = document.querySelectorAll('.nav li')

	// 2.2 返回值是一个伪数组里面包含了所有的dom对象 li
	console.log(lis)

	// 2.3 伪数组
	// (1) 有长度和索引号
	// (2) 没有数组的一些常用方法比如 push pop splice等方法
	// lis.push(1)
	// console.log(lis) // 因为lis是伪数组无法使用push方法所以报错

	// 2.4 利用循环遍历伪数组得到里面的每一个元素对象
	for (let i = 0; i < lis.length; i++) {
	console.log(lis[i]) // 里面的每一个元素对象
	}

	// 2.5 即使只有1个元素，我们querySelectorAll 获得的也是一个伪数组，里面只有1个元素而已

	const boxs = document.querySelectorAll('.box')
	console.log(boxs)

	<script>
	// 2. 对象.innerHTML 会解析标签,获取嵌套里面的所有内容
	box.innerHTML = '<strong>hxm</strong>'
	</script>

	<script>
	// 通过style操作元素样式
	// 1. 先要获取这个box元素对象
	const box = document.querySelector('.box')

	// 2. 通过style来从操作样式
	box.style.width = '300px'
	box.style.marginTop = '50px'
	box.style.backgroundColor = 'orange'

	// 3. 注意事项
	// 3.1 给样式赋值的时候，千万不要忘了加单位比如 300px
	// 3.2 如果有-的样式，我们采取的是小驼峰命名法比如 marginTop
	// 3.3 一定不要忘了加 style 属性
	</script>

	<script>
	// 通过类名操作元素样式
	// 1. 获取box盒子
	const box = document.querySelector('.box')
	// 2. 利用类名操作元素样式
	// box.className = 'hxm'
	box.className = 'box hxm'
	// 3. 利用类名操作样式添加的新的类名会覆盖掉原先的类名
	</script>

	<script>
	// 操作表单属性
	// 1. 操作表单 type 和 value 属性
	// 1.1 修改type属性
	const username = document.querySelector('[name=username]')
	console.log(username)
	// username.type = 'password'

	// 1.2 操作表单的 value 属性
	// console.log(username.value) // 查
	// username.value = '用户名试试' // 增
	// username.value = '请输入用户名' // 改
	// username.value = '' // 删

	// 2. 禁用按钮或者是勾选复选框布尔型
	// 2.1 禁用按钮
	const button = document.querySelector('button')
	// button.disabled = true // true 是禁用
	button.disabled = false // false 是不禁用

	// 2.2 勾选复选框
	const agree = document.querySelector('[name=agree]')
	console.log(agree)
	// agree.checked = true // true 是选中复选框
	agree.checked = false // flase 是不选中复选框
	</script>

	<script>
	// 1. 定时器间隔函数，里面第一个参数又是函数，这个匿名函数就是回调函数
	setInterval(function () {
	console.log('我是回调函数')
	}, 1000)

	// 2. addEventListener 函数的第二个参数也是函数，这个匿名函数也是回调函数
	btn.addEventListener('click', function () {
	console.log('我是回调函数')
	})
	</script>

	<body>
	<button>点击</button>
	<script>
	// 环境对象 this 粗略规则：谁调用函数，this就指向谁

	// 1. 全局环境
	// console.log(this) // this 指向 window 全局对象

	// 2. 普通函数和间歇函数
	setInterval(function(){
	console.log(this)
	},1000)

	function fn() {
	console.log(this) // this 指向 window 全局对象
	}
	window.fn()

	// 3. 对象方法
	const obj = {
	uname: '佩奇',
	sing: function () {
	console.log(this) // this 指向 obj对象
	}
	}
	obj.sing()

	// 4. 事件
	const btn1 = document.querySelector('button')
	btn1.addEventListener('click', function () {
	// console.log(this) // this 指向 btn 这个对象
	// btn1.style.backgroundColor = 'pink'
	this.style.backgroundColor = 'pink'
	})
	</script>
	</body>

	<body>
	<div class="father">
	父盒子
	<div class="son">子盒子</div>
	</div>
	<script>
	// 事件流
	const father = document.querySelector('.father')
	const son = document.querySelector('.son')
	// 1. 事件捕获
	// // 点击父盒子
	father.addEventListener('click', function () {
	alert('我是爸爸')
	}, true) // 事件捕获
	// 点击子盒子
	son.addEventListener('click', function () {
	alert('我是儿子')
	}, true) // 事件捕获
	</script>
	</body>

	<body>
	<form action="">
	姓名: <input type="text" name="username">
	<button>提交</button>
	</form>
	<a href="http://www.baidu.com">点击跳转</a>
	<script>
	// 阻止默认行为
	const form = document.querySelector('form')
	const input = document.querySelector('[name=username]')
	form.addEventListener('submit', function (e) {
	// 如果input表单的值为空则不允许提交
	if (input.value === '') {
	// return 无法阻止提交事件
	e.preventDefault() // 阻止提交事件
	}
	})

	document.querySelector('a').addEventListener('click', function (e) {
	e.preventDefault()
	})
	</script>
	</body>

	<body>
	<button class="l2">移除L2事件监听</button>
	<button class="l0">移除L0事件监听</button>
	<script>
	// 需求：按钮就点击一次，然后移除点击事件

	// 1. l2事件监听
	const l2 = document.querySelector('.l2')

	l2.addEventListener('click', fn)
	function fn() {
	alert('我点击了')
	// 移除事件监听
	l2.removeEventListener('click', fn)
	}

	// 2. l0事件监听
	const l0 = document.querySelector('.l0')
	l0.onclick = function () {
	alert('我点击了')
	// 移除事件监听
	l0.onclick = null
	}
	</script>
	</body>

	<body>
	<div class="box"></div>
	<script>

	const date = new Date()
	console.log(date.toLocaleString()) // 2023/1/27 23:19:20
	console.log(date.toLocaleDateString()) // 2023/1/27
	console.log(date.toLocaleTimeString()) // 23:19:20

	// 1. 封装一个 getDateTime函数，里面格式化时间对象
	function getDateTime() {
	const date = new Date()

	return date.toLocaleString()
	}
	// 注意：先写上这句话，防止盒子有1秒的空白期
	document.querySelector('.box').innerText = getDateTime()
	// 3. 显示到box盒子里面，并且添加定时器
	setInterval(function () {
	document.querySelector('.box').innerText = getDateTime()
	}, 1000)
	</script>
	</body>

	// 1. 实例化
	const date = new Date()
	// 2. 获取时间戳
	console.log(date.getTime())
	// 还有一种获取时间戳的方法
	console.log(+new Date())
	// 还有一种获取时间戳的方法
	console.log(Date.now())

	<body>
	<ul>
	<li>我是第1个孩子</li>
	<li>我是第2个孩子</li>
	<li>我是第3个孩子</li>
	<li>我是第4个孩子</li>
	</ul>
	<script>
	// 2. 查询兄弟节点
	const li2 = document.querySelector('ul li:nth-child(2)')
	// console.log(li2)
	console.log(li2.previousElementSibling) // 上一个兄弟
	console.log(li2.nextElementSibling) // 下一个兄弟
	console.log(ul.children[0]) // 第一个孩子
	console.log(ul.children[2]) // 第三个孩子
	</script>
	</body>

	<body>
	<ul>
	<li>我是小li</li>
	</ul>
	<script>
	// 1. 创建节点
	const li = document.createElement('li')
	li.innerHTML = '我是放到后面的'
	console.log(li)

	// 2. 追加给父元素
	const ul = document.querySelector('ul')
	// 2.1 append 放到ul 的最后面类似css的 after伪元素
	ul.append(li)
	// 2.2 prepend放到 ul 的最前面类似css的 before伪元素
	const firstli = document.createElement('li')
	firstli.innerHTML = '我是放到前面的'
	ul.prepend(firstli)
	</script>
	</body>

JS--DOM操作

js组成

什么是API

DOM简介

document对象

获取DOM对象

利用css选择器来获取DOM元素

选择指定css选择器的所有元素

操作元素内容

常用属性修改

操作样式属性

1，通过 style 属性操作元素样式

2，操作类名(className) 操作CSS

3，通过 classList 操作类控制CSS

操作表单元素属性

自定义属性

定时器-间隔函数

开启定时器:

关闭定时器

事件监听

事件

事件监听

回调函数

事件监听版本

事件类型

1，鼠标事件

焦点事件

键盘事件和 input事件

事件对象

环境对象

排他思想

事件流

事件捕获

事件冒泡

阻止冒泡

事件委托

阻止默认行为

事件解绑

其他事件

页面加载事件

页面尺寸事件

元素尺寸与位置

日期对象

实例化

格式化日期对象

格式化日期对象另外方法

时间戳

DOM 节点

查找节点

父节点

子节点

兄弟节点

增加节点

删除节点

M端事件

JS插件

AlloyFinger

微信扫一扫：分享