DOM学习-CSDN博客

本文链接：https://blog.csdn.net/m0_73936682/article/details/130268239

本文详细介绍了DOM的基本概念，如DOM树、元素获取以及通过ID、标签名和CSS选择器获取元素的方法。接着，文章讨论了事件的基础知识，包括事件源、事件类型和事件处理程序，以及如何使用JavaScript操作元素内容、属性和样式。此外，还涵盖了事件监听、事件流、事件捕获与冒泡、阻止默认行为等内容。最后，文章提供了一些实际案例，如密码框切换和背景图片变化等，展示了DOM和事件在实际应用中的运用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

WebAPI
DOM简介
- DOM树
DOM对象
获取元素
- 通过CSS选择器获取DOM属性
- 通过ID获取
- 通过标签名获取
- 获取
- 获取特殊标签
事件基础
- 执行事件的步骤
- 鼠标事件
操作元素
- 改变元素内容
- 常见元素的属性操作
- 操作元素样式属性
- 表单元素的属性操作
- - 案例点击按钮将密码框切换成文本框，并可以查看
- 样式属性操作
- 自定义属性
定时器-间歇函数
事件监听
- 执行事件的步骤
- 事件类型
- 事件对象
- - 获取事件对象
- 环境对象
- 回调函数
事件流
- 事件捕获
- 事件冒泡
- 阻止冒泡
- 解绑事件
- 事件委托
- - 阻止默认行为
- 其它事件
日期对象
- 实例化
- 日期对象方法
- 事件戳
节点操作
- 节点
- 查找节点
- 增加节点
- 删除节点
M端事件

WebAPI

在这里插入图片描述

地址不变，数组没变
        const arr=['pink','blue']
        arr.push('green')
        console.log(arr);
        arr=[1,2,3]//又开辟新数组，对象变化报错

在这里插入图片描述

作用
使用JS操作HTML和浏览器

DOM简介

(Dcument Object Model)文档对象模型，W3组织推荐处理可扩展标记语言的标准编程接口
通过接口可以改变接口可以改变网页内容、样式和结构
操作网页内容

开发网页内容特效和实现用户交互

DOM树

将HTML文档以树状结构直观表现出来，称为DOM树
作用：直观体现标签与标签之间的关系

. 文档：一个页面就是一个文档，用document表示
. 元素:所有标签都是元素，用element表示
. 节点：网页中所有内容都是节点（标签、属性、文本、注释），用node表示

在这里插入图片描述

DOM对象

创建：浏览器根据HTML标签生成的JS对象
在这里插入图片描述

获取元素

通过CSS选择器获取DOM属性

1.选择匹配的第一个元素一个对象（可以直接修改样式）
2.多个，数组不能直接修改

document.querySelecter('CSS选择器')

<div class="box">123</div>
    <div class="box">ABC</div>
    <script>
        // 里面必须加引号
        const box=document.querySelector('.box')//得到123
        // 一样
        const box=document.querySelector('div')//得到123
        </script>

<ul>
        <il>1</il>
        <il>2</il>
        <il>3</il>
        <il>4</il>
    </ul>
    <script>
        const li=document.querySelector('ul li:first-child')
        const lis=document.querySelectorAll('ul li')
        console.log(lis);//[ li, li, li, li ]
    </script>

querySelectorAll得到的是伪数组，有长度有索引号，没有pop()/push()等数组方法

<ul class="nav">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <script>
        const lis=document.querySelectorAll('.nav li')
        console.log(lis);
        for(let i;i<lis.length;i++){
            console.log(lis[i]);
        }//只有一个元素，也是数组，可以用对象[0]
    </script>

通过ID获取

使用getElementByld()方法
（get获得element元素by通过驼峰命名法）获取带有ID的元素对象
. 返回匹配ID的元素，起一个id名选中
. id是大小写敏感的字符串，代表所要查找的元素的唯一ID

返回值

返回一个匹配到ID的DOM Element对象，若在当前页面没找到，则返回null。

因为文档页面从上往下加载，所以先有标签，所以script写到标签下面

<body>
    <div id="name">2-2-3</div>
    <script>
        var timer=document.getElementById('name');//id是大小写敏感的字符串
        console.log(timer);
    </script>
</body>

在这里插入图片描述
返回了一个对象

 console.log(typeof timer);

在这里插入图片描述

通过标签名获取

使用getElementsByTagName()方法返回带有指定标签名的对象的集合
get+Elements+By+Tagname

<body>
    <ul>
      <li>只够</li>
      <li>只够</li>
      <li>只够</li>
      <li>只够</li>
    </ul>
    <script>
      var lis=document.getElementsByTagName('li')//也要加引号
      console.log(lis);
    </script>
  </body>

在这里插入图片描述

<body>
    <ul>
      <li>只够</li>
      <li>只够hahahah</li>
      <li>只够</li>
      <li>只够</li>
    </ul>
    <script>
        //返回的是对象集合，以伪数组形式存储
      var lis=document.getElementsByTagName('li')//也要加引号
      for(var i=0;i<lis.length;i++)
      console.log(lis[i]);
    </script>
  </body>

在这里插入图片描述

. 得到元素对象是动态的
. 如果页面只有一个li ，返回还是伪数组的形式
. 如果页面没有，返回还是空的伪数组的形式
如果是不同标签中的某一个的li
获取某个元素（父元素）内部所有指定标签的子元素
. 用element.getElementByTagName('标签名‘);’
. 指定一个id名

父元素必须是单个对象（必须指明是哪个元素对象）。获取时候不包括父元素自己
ol是伪数组，不能作为父元素

 <body>
    <ul>
      <li>只够</li>
      <li>只够hahahah</li>
      <li>只够</li>
      <li>只够</li>
    </ul>
    <ol>
      <li>只够</li>
      <li>只够hahahah</li>
      <li>只够</li>
      <li>只够</li>
    </ol>
    <script>
      var ol = document.getElementsByTagName('ol'); 
      console.log(ol.getElementsByTagName('li'));//这样就不行，ol是伪数组，不是元素
      console.log(ol[0].getElementsByTagName('li'));//这个是可以的
    </script>
  </body>

<body>
    <ul>
      <li>只够</li>
      <li>只够hahahah</li>
      <li>只够</li>
      <li>只够</li>
    </ul>
    <ol id="ol">
      <li>xxc</li>
      <li>xxchahahah</li>
      <li>xxc</li>
      <li>xxc</li>
    </ol>
    <script>
    var ol=document.getElementById('ol');
    console.log(ol.getElementsByTagName('li'));
    </script>
  </body>

获取

document.getElementsByClassName（‘类名’）;//根据类名返回元素对象集合

 <body>
    <div class="box">黑子</div>
    <div class="box">黑子</div>
    <ul>
        <li>首页</li>
        <li>产品</li>
    </ul>
    <script>
    var boxs=document.getElementsByClassName('box');
    console.log(boxs);
    </script>
  </body>

在这里插入图片描述
新增
document.querySelector（‘选择器’）；//根据指定选择器返回第一个元素对象

<body>
    <div class="box">黑子1</div>
    <div class="box">黑子2</div>
    <ul id="nav">
        <li>首页</li>
        <li>产品</li>
    </ul>
    <script>
    var firstbox=document.querySelector('.box');//加个点判断是类选择器
    console.log(firstbox);
    var nav=document.querySelector('#nav');//同.
    console.log(nav);
    var li=document.querySelector('li');
    </script>
  </body>

问题：
在这里插入图片描述
==document:querySelectorAll(‘选择器’）;==根据指定选择器返回所有元素对象

获取特殊标签

 <body>
    <script>
      var bodyEle = document.body;
      console.log(bodyEle);
      console.dir(bodyEle);
      //获取html元素
      var htmlEle = document.documentElement;
      console.log(htmlEle);
    </script>
  </body>
</html>

在这里插入图片描述

事件基础

触发响应机制

事件由三部分组成：事件源+事件类型+事件处理程序
事件源：事件被触发的对象、谁、按钮
事件类型：如何触发什么事件鼠标点击（onclick）
事件处理程序通过函数赋值方式完成

<body>
   <button id="btn">xxc</button>
   <script>
    // 事件源
    var btn=document.getElementById('btn');
    btn.onclick=function(){
        alert('aichina')
    }
   </script>
  </body>

在这里插入图片描述

执行事件的步骤

获取事件源
注册事件（绑定事件）
添加事件处理程序

<body>
    <div>123</div>
   <script>
    var div=document.querySelector('div');
    div.onclick=function() {
        console.log('xuah');
    }
   </script>
  </body>

在这里插入图片描述

鼠标事件

在这里插入图片描述

操作元素

改变元素内容

element:innerText
从起始位置到终止位置的内容，除去了html标签，同时空格和换行也会去掉（不识别）
element:innerHTML
起始位置到终止位置的全部内容，包括html标签和空格和换行

    <div class="box">xxx</div>
    <script>
      const box = document.querySelector(".box");
      console.log(box.innerText); //获取文字内容
      box.innerText = "hhh"; //修改内容
     </script>

 <body>
    <button>显示事件</button>
    <div>某个事件</div>
    <script>
      //获取元素，需要两个
      var btn = document.querySelector("button");
      var div = document.querySelector("div");
      //注册事件
      btn.onclick = function () {
        div.innerText = "2019";
      };
    </script>
  </body>

点击后div内容发生变化

这两个元素是可以读写的，可以获取元素里面的内容

 div.innerHTML='<strong>经</strong>停';

常见元素的属性操作

innerText、innerHTML改变元素内容
src、href
id、alt、title

点击后换图片

 <body>
    <button id="zha">炸</button>
    <button id="cong">从</button>
    <img src="t019635d530d843807a.jpg" alt="" title=zha />
    <script>
      var zha = document.getElementById("zha");
      var cong = document.getElementById("cong");
      var img = document.querySelector("img");
      zha.onclick = function () {
        img.src = "t019635d530d843807a.jpg";
      }
      cong.onclick = function () {
        img.src = "user.png";
        img.title='cong';
      }
    </script>
  </body>

例子：
innerText、innerHTML改变元素内容

<span id="one">消息称</span>
    <script>
      const arr = ["xxc", "xc", "ssd", "sd"];
      const random1 = Math.floor(Math.random() * arr.length);
      //获取元素，修改
      const one = document.querySelector("#one");
      one.innerHTML = arr[random1];
      arr.aplice(random1, 1);
    </script>

==通过JS设置/修改标签元素属性

对象.属性=值

操作元素样式属性

通过style
操作类名className
通过classList

对象.style.样式属性='值'
//有短横线的,用驼峰命名法
box.style.backgroundColor='pink'
box.style.marginTop='15px

classList

//追加一个类
元素.classList.add('类名')
//删除一个类
元素.classList.remove('类名')
//切换一个类，有就删，没有就加上
元素.classList.toggle('类名')

 <style>
        .box {
            width: 200px;
            height: 200px;
            color: black;
        }
        .active {
            color: red;
            background-color: pink;
        }
    </style>
  </head>
  <body>
    <div class="box">wenzi</div>
    <script>
      const box=document.querySelector('div')
      box.classList.add('active')//追加，，类名不加点
    </script>

表单元素的属性操作

操作下面表单属性：type、value、checked、selected、disabled

如果表单被禁用，不能再点击 disabled，让这个按钮被禁用
表单值通过value值来修改、

 <body>
    <button>按钮</button>
    <input type="text" placeholder="输入内容">
    <script>
     var btn=document.querySelector('button');
     var input=document.querySelector('input');
     btn.onclick=function() {
        input.innerHTML='dianji'//普通盒子，比如div标签里面内容，这里不能改变
        // 表单值通过value值来修改、
        input.value='dianji';
        // 如果表单被禁用，不能再点击 disabled，让这个按钮被禁用
        btn.disabled=true;//也可以 this.disabled=true;this指向事件函数（btn）的调用者，禁用。
     }
    </script>
  </body>

在这里插入图片描述

案例点击按钮将密码框切换成文本框，并可以查看

密码明文

核心思路：点击按钮，将密码框类型改成文本框就可以看见密码
一个按钮两个状态，点击一次，切换文本框/密码框
利用flag，判断flag的值，1切换为文本框，flag变为0；0切换为密码框

先用CSS将结构和样式写完

 <style>
      .box {
        position: relative;
        width: 400px;
        border-bottom:1px solid #ccc;
        margin: 0 auto;
      }
      .box input {
        width: 370px;
        height: 30px;
        /* 取消开始的边框 */
        border:0;
        /* 取消点击后的边框 */
        outline: none;
      }
      .box img {
        position: absolute;
        top: 2px;
        right: 2px;
        width: 24px;
      }
    </style>
   
  </head>
  <body>
    <div class="box">
      <label for="">
        <!-- 点击图片使之在密码框和文本框切换 -->
        <img src="t019635d530d843807a.jpg" alt="" id="eye">
      </label>
      <input type="password" id="password">
    </div>
    <script>
      var eye=document.getElementById('eye');
      var pwd=document.getElementById('password');
      var flag=0;
      eye.onclick=function() {
        if(flag==0)
        pwd.type='text';
        else
        pwd.type='password';
        flag=1-flag;
      }
    </script>
  </body>

在这里插入图片描述

样式属性操作

通过JS修改元素大小、颜色、位置等样式

element.style 行内样式操作
element.className 类名样式操作

属性采取驼峰命名法
JS修改style样式，产生行内样式，权重高

<style>
      div {
        width: 200px;
        height: 200px;
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <div></div>
    <script>
      var div=document.querySelector('div');
      div.onclick=function() {
        // 属性采取驼峰命名法
        this.style.backgroundColor='purple';
        this.style.width='110px';
      }
    </script>
  </body>

在这里插入图片描述

###案例关闭二维码

利用样式显示和隐藏元素，display:none隐藏元素，display:block显示元素

 <body>
    <div class="box">
      <img src="" alt="" />
    </div>
    <i class="colse-btn"></i>
    <script>
      var btn = document.querySelector(".close.btn");
      var box = document.querySelector(".box");
      btn.onclick = function () {
        box.style.display = "none";
      }
    </script>
  </body>

如果样式修改比较多，className修改，点击后添加claaName=’ ';

<style>
      div {
        width: 200px;
        height: 200px;
        background-color: pink;
      }
      /* 首先声明这个类 */
      .change {
        background-color: #fff;
        width: 100px;
        height: 100px;
      }
    </style>
  </head>
  <body>
    <div></div>    
    <script>
      var btn = document.querySelector('div');
      btn.onclick = function () {
        this.className= "change";//不加点
      }
    </script>
  </body>

如果div原先有类名，那么会直接覆盖
如果想要保留

案例：提示密码错误

判断表单失去焦点

在这里插入图片描述

<style>
      div {
        width: 600px;
        margin: 100px auto;
      }
      .message {
        display: inline-block;
        font-size: 12px;
        color: #999;
        background: url(学习\练习\t019635d530d843807a.jpg) no-repeat left center;
        padding-left: 20px;
      }
      .w {
        color:red;
        /* 换个图片 */
        background-image: url();
      }
      .right {
        color:green;
        background-image: url();
      }
    </style>
  </head>
  <body>
      <div class="register">
        <input type="password" class="ipt">
        <p class="message">请输入6~16密码</p>
      </div>
    <script>
     var ipt=document.querySelector('.ipt');
     var message=document.querySelector('.message');
     ipt.onblur=function(){
      if(ipt.value.length<6||ipt.value.length>16)
      {message.className='message w';
      message.innerHTML='位数不对';}
      else
      {
        message.className='message right';
      message.innerHTML='位数正确';
      }
     }
    </script>
  </body>

在这里插入图片描述

<body>
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <button>按钮5</button>
    <script>
      var btn=document.getElementsByTagName('button');
      for(var i=0;i<btn.length;i++)
      {
        btn[i].onclick=function(){
          console.log(11);
        }
      }
    </script>
  </body>

效果，点击某一个都是11

只让自己变样式，排他

<body>
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <button>按钮5</button>
    <script>
      var btn = document.getElementsByTagName("button");
      for (var i = 0; i < btn.length; i++) {
        btn[i].onclick = function () {
          // 先把所有按钮背景颜色去掉，然后再设置背景颜色为pink
          for (var i = 0; i < btn.length; i++) {
            btn[i].style.backgroundColor = "";
          }
          this.style.backgroundColor = "pink";
        };
      }
    </script>
  </body>
</html>

在这里插入图片描述

案例：变化背景图片

 <ul class="bj">
      <li><img src="b7fbfd4da75ac18f5a98688589099cd0.jpeg" alt=""></li>
      <li><img src="t019635d530d843807a.jpg" alt=""></li>
      <li><img src="user.png" alt=""></li>
    </ul>
    <script>
      var btn = document.querySelector('.bj').querySelectorAll('img');
      for (var i = 0; i < btn.length; i++) {
        btn[i].onclick = function () {
        document.body.style.backgroundImage='url('+this.src+')';
      }
    }
    </script>
  </body>

千万不要乱加中文啊，否则真的一直看不出错误

案例：表格隔行变色

鼠标经过onmourseover,鼠标离开onmourseout

<script>
      var btn = document.querySelector('tbody').querySelectorAll('tr');
      for (var i = 0; i < btn.length; i++) {
        btn[i].onmouseover = function () {
        this.classNmae='bg';
      }
      btn[i].onmourseout=function() {
        this.className='';//空，没有类名
      }
    }
    </script>

自定义属性

标准属性：标签自带的属性，比如class id title
自定义属性：

专门data-自定义属性
在DOM对象上一律以dataset对象方式获取

  <body>
    //div{$}*5
    <div data-id="1" data-spm="xxx">1</div>
    <div data-id="2">2</div>
    <div data-id="3">3</div>
    <div data-id="4">4</div>
    <div data-id="5">5</div>
    <script>
      const one = document.querySelector("div");
      console.log(one.dataset); //得到一个集合DOMStringMap { id → "1", spm → "xxx" }
      console.log(one.dataset.id); //1
    </script>
  </body>

定时器-间歇函数

每隔一段时间自动执行一段代码
1.开启定时器

setInterval(函数，间隔时间)

每隔一段时间，调用这个函数
函数名旁边不加（），否则会被直接调用；如果加了（），就加引号
定时器返回的是一个id数字
2.关闭定时器

let 变量名=setInterval(函数，间隔时间）
clearInterval(变量名)

例子，倒计时

<body>
    <textarea name="" id="" cols="30" rows="10">hhhhhh</textarea>
    <button class="btn" disabled>我已经阅读(5S)</button>
    <script>
      const btn = document.querySelector(".btn");
      console.log(btn.innerHTML); //button双标签，比较特殊，不是用表单value获取
      let i = 5;
      let n = setInterval(function () {
        i--;
        btn.innerHTML = `我已经阅读(${i}S)`;
        if (i == 0) {
          clearInterval(n);
          btn.disabled = false; //能点击
        }
      }, 1000);
    </script>
  </body>

轮播图定时器
在这里插入图片描述

<ul class="slider-indicater">
        <li class="active"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <script>
      const img=document.querySelector(' img')
      const p=document.querySelector(' p')
      let i=0
      setInterval(function(){
        i++
        if(i>=4)
        i=0//0开始没展现
        console.log(slid[i]);
        img.src=slid[i].url
        p.innerHTML=slid[i].title
        // 小圆点，把以前active的删掉，当前添加
        document.querySelector('.slid-indicater .active').classList.remove('active')
        document.querySelector(`.slid-indicater li:nth-child(${i+1})`).classList.add('active')
      },1000)
    </script>

事件监听

元素对象.addEventListener('事件类型'，要执行的函数)

触发响应机制

事件监听由三要素：事件源+事件类型+事件调用的函数
事件源：事件被触发的对象、谁、按钮
事件类型：如何触发什么事件鼠标点击（onclick）
事件调用的函数通过函数赋值方式完成

<button></button>
    <script>
      const btn=document.querySelector('button')
      btn.addEventListener('click',function(){
        alert('xxc')
      })
    </script>

<style>
    .box1{
        margin: 0 auto;
        position: absolute;
        width: 200px;
        height: 200px;
        background-color: pink;
    }
    .close {
        position: relative;
        width: 50px;
        height: 50px;
        right: 20px;
        top: 20px;
        text-align: center;
        line-height: 50px;
        cursor: pointer;
        /* 靠近鼠标变成小手 */
        background-color: aqua;
    }
  </style>
  <body>
    <div class="box1">
        <div class="close">X</div>
    </div>
    <script>
        const box1=document.querySelector('.box1')
        const close=document.querySelector('.close')
        close.addEventListener('click',function(){
            box1.style.display='none'
        })
    </script>

<body>
   <button id="btn">xxc</button>
   <script>
    // 事件源
    var btn=document.getElementById('btn');
    btn.onclick=function(){
        alert('aichina')
    }
   </script>
  </body>

在这里插入图片描述

执行事件的步骤

获取事件源
注册事件（绑定事件）
添加事件处理程序

<body>
    <div>123</div>
   <script>
    var div=document.querySelector('div');
    div.onclick=function() {
        console.log('xuah');
    }
   </script>
  </body>

在这里插入图片描述

<body>
    <h1>随机点名</h1>
    <div class="box">
      <span>名字是</span>
      <div class="qs">hhhh</div>
    </div>
    <div class="btn">
      <button class="star">开始</button>
      <button class="end">结束</button>
    </div>
    <script>
      let timeId=0
      let random=0//随机号要全局变量
      const arr = ["xxc", "dd", "sd","xxdf"];
      const star = document.querySelector(".star");
      const qs = document.querySelector(".qs");
      const end = document.querySelector(".end");
      //添加点击实际
      star.addEventListener("click", function () {
        //timeId,random随机号要全局变量
        timeId= setInterval(function () {
          //这let时作用域只在函数内部，可以在外部用let
          random = parseInt(Math.random() * arr.length);
          qs.innerHTML = arr[random];
        }, 35);
      });
      if(arr.length===1)
      {
        star.disabled=true
        end.disabled=true
      }
      end.addEventListener("click", function () {
        clearInterval(timeId);
        arr.splice(random,1)//注意，这个要写下标
        console.log(arr);
      });
      
    </script>
  </body>

事件监听里写const

<body>
    <button>dianji</button>
    <script>
      const num = 10;
      const btn = document.querySelector("button");
      btn.addEventListener("click", function () {
        const num = Math.random(); //不会报错，和外面作用域不同，但是，下面不可以
        num = Math.random();
        console.log(num);
      }); //函数执行完，将函数内部全部清理
    </script>
  </body>

在这里插入图片描述

事件类型

在这里插入图片描述

在这里插入图片描述
点击开始按钮，名字变化；结束，抽取停止
96
焦点事件

事件对象

在这里插入图片描述

获取事件对象

在这里插入图片描述

常用属性

元素.addEventListener('click',function(e){}

检测按下回车键

<body>
    <input type="text" />
    <script>
      const input = document.querySelector("input");
      input.addEventListener("keyup", function (e) {
        if (e.key === "Enter") {
          console.log("按下了回车键");
        }
      });
    </script>
  </body>

环境对象

指的是函数内部特殊的变量this,它代表当前函数运行所处环境

每个函数里面都有this 环境对象

 //put函数this指向window
      function fn(){
        console.log(this);
      }
      fn()
      const btn=document.addEventListener('button')
      btn.addEventListener('click',function(){
        console.log(this);//指向函数的调用者,btn
      })

谁调用就指向谁

回调函数

函数A将参数传递给B，函数A为回调函数，当做参数使用
在这里插入图片描述

事件流

事件完整执行过程中的流动路径，两个阶段
在这里插入图片描述

事件捕获

从DOM根元素开始去执行对应的事件（从外到里）
代码

DOM.addEventListener（事件类型，事件处理函数，是否使用捕获机制）

在这里插入图片描述

事件冒泡

一个元素事件被触发是，同样事件将在还元素的所有祖先元素中被触发

当一个元素触发事件后，会依次向上调用所有父级元素的同名事件
true代表捕获阶段
false代表冒泡阶段触发（默认）

在这里插入图片描述

阻止冒泡

前提：拿到事件对象

事件对象.stopPropagation()

在这里插入图片描述
阻止事件流动传播，在冒泡和捕获都有效

解绑事件

1.on事件，直接用null

const btn = document.addEventListener("button");
      btn.onclick = function () {
        alert("dianji");
      }

2.target.removeEventListener(type,listener[,options]); target.removeEventListener(type,listener[,userCapture])
加中括号表示里面可以省略

      function fn() {
        alert("xxc");
      }
      btn.onclick = null; //null空对象
      btn.addEventListener("click", fn);
      btn.removeEventListener("click", fn);//匿名函数无法解绑

mouseover,mourseout存在冒泡
mouseenter,mourseleave不存在

 <div class="dad">
      <div class="b"></div>
    </div>
    <script>
      const dad = document.querySelector(".dad");
      const bw = document.querySelector(".bw");
      dad.addEventListener("mourseover", function () {
        console.log("鼠标经过");
      });
      dad.addEventListener("mourseout", function () {
        console.log("鼠标离开");
      });
    </script>

经过子盒子时，没有点击事件，向上冒泡，‘鼠标离开，鼠标经过’’

<body>
    <div class="dad">
      <div class="bw"></div>
    </div>
    <script>
      const dad = document.querySelector(".dad");
      const bw = document.querySelector(".bw");
      dad.addEventListener("mourseenter", function () {
        console.log("鼠标经过");
      });
      dad.addEventListener("mourseleave", function () {
        console.log("鼠标离开");
      });
    </script>
  </body>

经过子盒子只会出现‘鼠标经过’

事件委托

优点：减少注册次数，提高程序性能
原理：利用事件冒泡
给父元素注册事件，触发子元素是，会冒泡到父元素上，从而触发父元素的事件

<ul>
      <li>第1个孩子</li>
      <li>第2个孩子</li>
      <li>第3个孩子</li>
      <li>第4个孩子</li>
      <li>第5个孩子</li>
      <p>hhhhhh</p>
    </ul>
    <script>
      // 点击li，文字变色
      const ul=document.querySelector('ul')
      ul.addEventListener('click',function(e){
        console.log(e);//e对象中有target知道点击li，e.target就是点击的对象
        //只要点击li有效果，通过tagName
        if(e.target.tagName=='LI'){
          e.target.style.color='red'
        }
      })
    </script>

在这里插入图片描述
利用自定义属性

阻止默认行为

e.preventDefault()

<body>
    <form action="">
      <input type="submit" value="免费注册" />
    </form>
    <a href="http://www.baidu.com"></a>
    <script>
      const form = document.querySelector("form");
      form.addEventListener("click", function (e) {
        e.preventDefault();
      });
      const a = document.querySelector("a");
      a.addEventListener("click", function (e) {
        //阻止跳转
        e.preventDefault();
      });
    </script>
  </body>

在这里插入图片描述

其它事件

页面加载事件

加载外部资源，加载完毕后触发的事件
1、监听页面所有资源加载完毕事件名load
给window添加load事件

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

也可以针对某个资源绑定load事件

img.addEventListener('load',function(){
      
    })

2、初始HTML文档被完全加载和解析完成后，DOMContentLoaded事件被触发，无需等待样式表、图像完全加载
事件名DOMContentLoaded，给document添加

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

元素滚动事件

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

事件名：scroll
给window加或者document加

window.addEventListener('scroll',function(){
      console.log('滚动');
    })

在这里插入图片描述

获得HTML标签

    console.log(document.documentElement);

得到页面滚动

 window.addEventListener('scroll',function(){
      console.log(document.documentElement.scrollTop);
    })

页面滚动，盒子显示

 <style>
      body {
        height: 3000px;
      }
      div {
        margin: 400px auto;
        width: 200px;
        height: 200px;
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <div></div>
    <script>
      const div = document.querySelector("div");
      window.addEventListener("scroll", function () {
        const n = document.documentElement.scrollTop;//得到数字型，不带单位
        if (n >= 300) {
          div.style.display = "block";
        } else {
          div.style.display = "none";
        }
      });
    </script>

在这里插入图片描述
赋值直接跳转

页面尺寸事件

会在页面窗口尺寸改变时触发事件

 window.addEventListener('resize',function(){
        
      })

检测元素宽度
在这里插入图片描述
元素的尺寸与位置

从下往上找有定位的

日期对象

实例化

代码中发现new关键字，一般把这个操作称为实例化
创建一个事件对象并获取时间
获得当前事件

const date=new Date()
      console.log(date);

返回指定时间

const date1=new Date('2022-5-1 08:30：00')
      console.log(date1);

日期对象方法

在这里插入图片描述

const date=new Date()//实例化日期对象
      console.log(date.getMonth()+1);
      console.log(data.getDay);//0表示星期天

表示日期

 <style>
      div {
        width: 300px;
        height: 40px;
        text-align: center;
        line-height:40px;
      }
    </style>
  </head>
  <body>
    <div></div>
    <script>
      const div=document.querySelector('div')
      function getMyDate() {
        const date = new Date(); //实例化日期对象
        let hour =
          date.getHours() > 10 ? date.getHours() : "0" + date.getHours();
        let minute =
          date.getMinutes() > 10 ? date.getMinutes() : "0" + date.getMinutes();
        return`${date.getFullYear()}-${ date.getMonth() + 1 }-${date.getDate()} ${hour}:${minute }`; }
      //刚开始是空的，先写一个
      div.innerHTML = getMyDate();
      setInterval(function () {
        div.innerHTML = getMyDate();
      },1000);
    </script>

在这里插入图片描述

事件戳

在这里插入图片描述

节点操作

节点

DOM树里面每一个内容都称为节点

元素节点，如body/div/html（根节点）
属性节点，如href
文本节点，标签里面的文字
其它

查找节点

主要通过关系

父节点
子节点
兄弟节点

父节点查找：
parentNode属性
返回最近一级的父节点，找不到返回为null

子元素.parentNode

<div class="dad">
      <div class="baby"></div>
    </div>
    <script>
      const baby=document.querySelector('.baby')
      console.log(baby.parentNode);//返回父节点对象
      console.log(baby.parentNode.parentNode);//返回爷爷节点对象，没有，为null
    </script>
  </body>

点击关闭例子
在这里插入图片描述
优点，多个关闭盒子，按关闭键，只关闭对应父级盒子
子节点查找
childNodes获得所有子节点，包括文本节点（空格、换行）、注释节点等
children属性
只获得所有元素节点，返回的还是一个伪数组

父元素.children

兄弟节点

下一个兄弟节点
nextElementSibling属性
上一个兄弟节点
previousElementSibling属性

增加节点

1.创建节点
创建一个新的网页元素

document.createElement（''）

2.追加节点
插入大父元素的最后一个子元素

父元素.appendChild（要插入的元素）

<body>
    <ul>
      <li>xixixix</li>
    </ul>
    </div>
    <script>
      const ul=document.querySelector('ul')
      //创建节点
      const li=document.createElement('li')
      li.innerHTML='hhhh'
      //追加节点
      ul.appendChild(li)
    </script>
  </body>

插入到父元素中某个子元素的前面

父元素.insertBefore（要插入的元素，在哪个元素的前面）

    <ul>
      <li>xixixix</li>
    </ul>
    </div>
    <script>
      const ul=document.querySelector('ul')
      //创建节点
      const li=document.createElement('li')
      li.innerHTML='hhhh'
      // ul.children得到所有孩子的伪数组
      //追加节点
      ul.insertBefore(li,ul.children[0])//保证每次放入都在最前面

在这里插入图片描述
克隆节点

元素.cloneNode(true)

 <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>
    <script>
      const ul = document.querySelector("ul");
      //克隆节点
      const li1 = ul.children[0].cloneNode(true);
      ul.appendChild(li1);
     //等同于
      ul.appendChild(ul.children[0].cloneNode(true))
    </script>

删除节点

若某节点在页面不需要，可以删除它
删除元素，从父元素删除

 <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>
    <script>
    const ul=document.querySelector('ul')
    ul.removeChild(ul.children[0])