js学习76-107

三池丶

已于 2023-01-12 21:17:23 修改

阅读量413

点赞数

文章标签： javascript 学习前端

于 2023-01-10 22:15:58 首次发布

本文链接：https://blog.csdn.net/qq_72343101/article/details/128627911

版权

文章目录

一. DOM
二.事件

一. DOM

DOM（Document Object Model）：文档对象模型
其实就是操作 html 中的标签的一些能力
我们可以操作哪些内容
- 获取一个元素
- 移除一个元素
- 创建一个元素
- 向页面里面添加一个元素
- 给元素绑定一些事件
- 获取元素的属性
- 给元素添加一些 css 样式
- …
DOM 的核心对象就是 docuemnt 对象
document 对象是浏览器内置的一个对象，里面存储着专门用来操作元素的各种方法
DOM：页面中的标签，我们通过 js 获取到以后，就把这个对象叫做 DOM 对象

获取一个元素

通过 js 代码来获取页面中的标签
获取到以后我们就可以操作这些标签了

非常规的标签获取

document.documentElement（获取html）
document.documentElement可以获取整个html

    <script>
        console.log(document.documentElement)
    </script>

在这里插入图片描述

document.head（获取head）

    <script>
        console.log(document.head)
    </script>

document.body（获取body）

    <script>
        console.log(document.body)
    </script>

getElementById(id获取)

getElementById 是通过标签的 id 名称来获取标签的

因为在一个页面中 id 是唯一的，所以获取到的就是一个元素

<body>
  <div id="box"></div>
  <script>
  	var box = document.getElementById('box')//字符串
  	console.log(box) // <div></div>
  </script>
</body>

获取到的就是页面中的那个 id 为 box 的 div 标签

getElementsByClassName(class获取)

getElementsByClassName 是用过标签的 class 名称来获取标签的
因为页面中可能有多个元素的 class 名称一样，所以获取到的是一组元素
哪怕你获取的 class 只有一个，那也是获取一组元素，只不过这一组中只有一个 DOM 元素而已
```
<body>
  <div calss="box"></div>
  <script>
  	var box = document.getElementsByClassName('box')
  	console.log(box) // [<div></div>]
    console.log(box[0]) // <div></div>
  </script>
</body>
```
- 获取到的是一组元素，是一个长得和数组一样的数据结构，但是不是数组，是 伪数组，有length的属性
- 这个一组数据也是按照索引排列的，所以我们想要准确的拿到这个 div，需要用索引来获取
- 即返回值是一个伪数组

可以利用Array的form属性来使伪数组转化为真数组

    <script>
    	var box = document.getElementsByClassName('box')
    	console.log(box) // [<div></div>]
        console.log(box[0]) // <div></div>
        var a=Array.from(box)
        console.log(a)
    </script>

getElementsByTagName(标签名获取)

getElementsByTagName 是用过标签的标签名称来获取标签的
因为页面中可能有多个元素的标签名称一样，所以获取到的是一组元素
哪怕真的只有一个这个标签名，那么也是获取一组元素，只不过这一组中只有一个 DOM 元素而已
```
<body>
  <div></div>
  <script>
  	var box = document.getElementsByTagName('div')
  	console.log(box) // [<div></div>]
    console.log(box[0]) // <div></div>
  </script>
</body>
```
- 和 getElementsByClassName 一样，获取到的是一个长得很像数组的元素
- 必须要用索引才能得到准确的 DOM 元素

getElementsByName(name属性获取)

一般只适用于input标签

querySelector(选择器获取，单个)

有兼容性问题，不过现在基本上没太大问题

querySelector 是按照选择器的方式来获取元素
也就是说，按照我们写 css 的时候的选择器来获取

这个方法只能获取到一个元素，并且是页面中第一个满足条件的元素

console.log(document.querySelector('div')) // 获取页面中的第一个 div 元素
console.log(docuemnt.querySelector('.box')) // 获取页面中第一个有 box 类名的元素
console.log(document.querySelector('#box')) // 获取页面中第一个 id 名为 box 的元素

querySelectorAll(选择器获取，所有满足条件)

有兼容性问题，不过现在基本上没太大问题

querySelectorAll 是按照选择器的方式来获取元素

这个方法能获取到所有满足条件的元素，以一个伪数组的形式返回

console.log(document.querySelectorAll('div')) // 获取页面中的所有的 div 元素
console.log(docuemnt.querySelectorAll('.box')) // 获取页面中所有有 box 类名的元素

获取到的是一组数据，也是需要用索引来获取到准确的每一个 DOM 元素

操作属性

通过我们各种获取元素的方式获取到页面中的标签以后
我们可以直接操作 DOM 元素的属性，就能直接把效果展示在页面上

操作原生属性

我们可以通过class或id来直接操作原生的属性

<!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>Document</title>
</head>
<body>
    <input type="text"  id="one" placeholder="????">
    <script>
        one.placeholder=1111
    </script>
</body>
</html>

在这里插入图片描述
placeholder属性的值由？？？？转化为了1111

自定义属性（还有dataset属性）

自定义属性起名规定，以data-开头，例如data-yibai，利用dataset属性可以获取和设置自定义属性

删除自定义属性

<!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>Document</title>
</head>
<body>
    <ul>
        <li>12</li>
        <li>23</li>
        <li>34</li>
    </ul>
    <script>
        var oitem=document.getElementsByTagName("li")
        for(var i=0;i<oitem.length;i++){
            oitem[i].dataset.yibai=i
        }
    </script>
</body>
</html>

显示为：
在这里插入图片描述

setAttribute添加自定义属性

在这里插入图片描述
第一个参数是属性名，第二个参数是属性值

getAttribute获取自定义属性

请添加图片描述
参数即为自定义属性名

removeAttribute删除自定义属性

在这里插入图片描述
参数即为自定义属性名

应用场景
可以给列表等进行排序

<!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>Document</title>
</head>
<body>
    <ul>
        <li>12</li>
        <li>23</li>
        <li>34</li>
    </ul>
    <script>
        var oitem=document.getElementsByTagName("li")
        for(var i=0;i<oitem.length;i++){
            oitem[i].setAttribute("yibai",i)
        }
    </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>Document</title>
</head>
<body>
    <input type="password" id="password">
    <button id="eyebtn">eye</button>
    <script>
        var passinput=document.getElementById("password")
        var eyebtn=document.querySelector("#eyebtn")
        eyebtn.onclick=function(){
            console.log(passinput.type)

            if(passinput.type=="password"){
                passinput.type="text"
            }else{
                passinput.type="password"
            }
        }
    </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>Document</title>
</head>
<body>
    <input type="checkbox" id="all">全选/全不选
    <hr>
    <ul class="xuan">
        <li>
            <input type="checkbox">商品1
        </li>
        <li>
            <input type="checkbox">商品2
        </li>
        <li>
            <input type="checkbox">商品3
        </li>
        <li>
            <input type="checkbox">商品4
        </li>
    </ul>
    <script>
        var all=document.querySelector("#all")
        var alll=document.querySelectorAll(".xuan input")
         all.onclick=function(){
            console.log(all.checked)
            for(var i=0;i<alll.length;i++){
                alll[i].checked=all.checked
            }
          }
          for(var i=0;i<alll.length;i++){
            alll[i].onclick=handlr
          }
          function handlr (){
                var count=0
                for(var i=0;alll.length;i++){
                    if(alll[i].checked)count++
                    // console.log(alll[i].checked)
                }
                if(count===alll.length){
                    all.checked=true
                }else{
                    all.checked=false
                }
          }
    </script>
</body>
</html>

操作元素文本内容

innerHTML

获取元素内部的 HTML 结构（所有内容）

<body>
  <div>
    <p>
      <span>hello</span>
    </p>
  </div>

  <script>
    var div = document.querySelector('div')
    console.log(div.innerHTML)
      /*获取的内容

          <p>
            <span>hello</span>
          </p>

	  */
  </script>
</body>

设置元素的内容

<body>
  <div></div>

  <script>
    var div = document.querySelector('div')
   	div.innerHTML = '<p>hello</p>'
  </script>
</body>

设置完以后，页面中的 div 元素里面就会嵌套一个 p 元素

innerText

获取元素内部的文本（只能获取到文本内容，获取不到 html 标签）

<body>
  <div>
    <p>
      <span>hello</span>
    </p>
  </div>

  <script>
    var div = document.querySelector('div')
    console.log(div.innerText) // 获得hello
  </script>
</body>

可以设置元素内部的文本

<body>
  <div></div>

  <script>
    var div = document.querySelector('div')
   	div.innerText = '<p>hello</p>'
  </script>
</body>

设置完毕以后，会把 <p>hello</p> 当作一个文本出现在 div 元素里面，而不会把 p 解析成标签

value

可以赋值
在这里插入图片描述
也可以读取

大多时候用于表单元素

案例-渲染页面

<!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>Document</title>
    <style>
        *{
            margin: 0 ;
            padding: 0;

        }
        ul{
            list-style: none;
        }
        li{
            overflow: hidden;
        }
        li img{
            float: left;
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
    <ul>
        <!-- <li>
            <img src="" alt="">
            <h3></h3>
            <p></p>
        </li> -->
    </ul>
    <script>
        var shuzu=[
            {
                url:"https://static.maizuo.com/pc/v5/usr/movie/fceeb41a1660d097d02fbcbda3191d8f.jpg?x-oss-process=image/quality,Q_70",
                title:"阿凡达：水之道",
                grade:"7.4",
            },
            {
                url:"https://static.maizuo.com/pc/v5/usr/movie/fceeb41a1660d097d02fbcbda3191d8f.jpg?x-oss-process=image/quality,Q_70",
                title:"1111,2222",
                grade:"7.4",
            },
            {
                url:"https://static.maizuo.com/pc/v5/usr/movie/fceeb41a1660d097d02fbcbda3191d8f.jpg?x-oss-process=image/quality,Q_70",
                title:"2222,3333",
                grade:"7.4",
            },
        ]
        var newzhuzu=shuzu.map(function(item){
            return `<li>
            <img src="${item.url}" alt="">
            <h3>${item.title}</h3>
            <p>${item.grade}</p>
        </li>`
        })
        console.log(newzhuzu.join(""))
        var acc=document.querySelector("ul")
        acc.innerHTML=newzhuzu.join("")
    </script>
</body>
</html>

操作元素样式

获取行间样式

在这里插入图片描述
可以进行读写，更改样式数值

专门用来给元素添加 css 样式的

添加的都是行内样式

<body>
  <div></div>

  <script>
    var div = document.querySelector('div')
   	div.style.width = "100px"
    div.style.height = "100px"
    div.style.backgroundColor = "pink"
    console.log(div)
    // <div style="width: 100px; height: 100px; background-color: pink;"></div>
  </script>
</body>

页面中的 div 就会变成一个宽高都是 100，背景颜色是粉色

访问复合样式时，不能使用常规的方法来获取
有以下两种方法

使用[] (中括号)
使用驼峰式命名法

<!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>Document</title>
    <style>
        div{
            width: 100px;
            color: black;
        }
    </style>
</head>
<body>
    <div style="background-color: yellow;" id="box">
        111111111
    </div>
    <script>
        console.log(box.style["background-color"])
        console.log(box.style.backgroundColor)
    </script>
</body>
</html>

在这里插入图片描述

获取的非行间样式

在这里插入图片描述
可以获取，但是不能更改样式，可以读取

我们在操作 DOM 的时候，很重要的一点就是要操作元素的 css 样式
那么在操作 css 样式的时候，我们避免不了就要获取元素的样式
之前我们说过可以用 元素.style.xxx 来获取

但是这个方法只能获取到元素 行间样式，也就是写在行内的样式

<style>
  div {
    width: 100px;
  }
</style>
<body>
  <div style="height: 100px;">
    <p>我是一个 p 标签</p>
  </div>

  <script>
    var oDiv = document.querySelector('div')
		console.log(oDiv.style.height) // 100px
    console.log(oDIv.style.width) // ''
  </script>
</body>

不管是外链式还是内嵌式，我们都获取不到该元素的样式
这里我们就要使用方法来获取了 getComputedStyle 和 currentStyle
这两个方法的作用是一样的，只不过一个在 非 IE 浏览器，一个在 IE 浏览器

<!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>Document</title>
    <style>
        #box{
            width: 100px;
            color: black;
        }
    </style>
</head>
<body>
    <div style="background-color: yellow;" id="box">
        111111111
    </div>
    <script>
        console.log(box.style["background-color"])
        console.log(box.style.backgroundColor)
        console.log(getComputedStyle(document.getElementById("box")).width)//这条代码时行外样式
    </script>
</body>
</html>

在这里插入图片描述
同理，使用这种方法获取复合样式时也是与上面的style一样的

操作元素类名（class）

.className

className属性，可以用来读取和赋值html里的class值

专门用来操作元素的 类名的（class）

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

  <script>
    var div = document.querySelector('div')
   	console.log(div.className) // box
  </script>
</body>

也可以设置元素的类名，不过是全覆盖式的操作

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

  <script>
    var div = document.querySelector('div')
   	div.className = 'test'
    console.log(div) // <div class="test"></div>
  </script>
</body>

在设置的时候，不管之前有没有类名，都会全部被设置的值覆盖

.classList

可以用来读取和赋值html里的class值，但是是以伪数组的形式来读取或修改

<!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>Document</title>
    <style>
        #box{
            width: 100px;
            color: black;
        }
    </style>
</head>
<body>
    <div style="background-color: yellow;" id="box" class="box1 box2 box3 box4">
        111111111
    </div>
    <script>
        console.log(box.classList)
    </script>
</body>
</html>

在这里插入图片描述

- .add()增加class值,不会添加相同的class值，一次只能添加一个值

<!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>Document</title>
    <style>
        #box{
            width: 100px;
            color: black;
        }
    </style>
</head>
<body>
    <div style="background-color: yellow;" id="box" class="box1 box2 box3 box4">
        111111111
    </div>
    <script>
        console.log(box.classList)
        box.classList.add("box5")
    </script>
</body>
</html>

在这里插入图片描述

- .remove()删除class值

<!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>Document</title>
    <style>
        #box{
            width: 100px;
            color: black;
        }
    </style>
</head>
<body>
    <div style="background-color: yellow;" id="box" class="box1 box2 box3 box4">
        111111111
    </div>
    <script>
        console.log(box.classList)
        box.classList.remove("box1")
    </script>
</body>
</html>

在这里插入图片描述

- 如果原本有这个class值，就会删除这个class值，如果没有，就会添加上这个class值

<!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>Document</title>
    <style>
        .box1{
            color: black;
            height: 100px;
            width: 100px;
            background-color: aqua;
        }
    </style>
</head>
<body>
    <div class="box1" id="box">
        111111111
    </div>
    <button id="btn">
        222
    </button>
    <script>
        btn.onclick=function(){
            box.classList.toggle("box1")
        }
    </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>Document</title>
   <style>
       *{
           margin: 0;
           padding: 0;
       }
       ul{
           display: flex;
           list-style: none;
       }
       li{
           height: 50px;
           line-height: 50px;
           text-align: center;
           flex: 1;
       }

       .active{
           color: red;
           border-bottom: 1px solid red;
       }
   </style>
</head>
<body>
   <ul>
       <li class="active" id="item1">正在上映</li>
       <li id="item2">即将上映</li>
   </ul>
   <script>
       item1.onclick=function(){
           item1.classList.add("active")
           item2.classList.remove("active")
       }
       item2.onclick=function(){
           item1.classList.remove("active")
           item2.classList.add("active")
       }
   </script>
</body>
</html>

在这里插入图片描述

这里由于单线程和人的手速没有这么快，导致for循环执行的比onclick这个事件快，进而i就会变成4，就有点像异步执行

<!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>Document</title>
    <style>
        *{
            margin: 0 ;
            padding: 0;
        }
        ul{
            list-style: none;
        }
        .header{
            display: flex;
            width: 500px;
        }
        .header li{
            flex: 1;
            height: 50px;
            line-height: 50px;
            text-align: center;
            border: 1px solid black;
        }
        .box{
            position: relative;
        }
        .box li{
            position: absolute;
            left: 0;
            top: 0;
            width: 500px;
            height: 200px;
            background-color: yellow;
            display: none;
        }
        .header .active{
            background-color: red;
        }
        .box .active{
            display: block;
        }
    </style>
</head>
<body>
    <ul class="header">
        <li class="active">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <ul class="box">
        <li class="active">1111</li>
        <li>2222</li>
        <li>3333</li>
        <li>4444</li>
    </ul>
    <script>
        var oheaderitem=document.querySelectorAll(".header li")
        var oboxitem=document.querySelectorAll(".box li")
        for(var i=0;i<oheaderitem.length;i++){
            oheaderitem[i].dataset.index=i
            oheaderitem[i].onclick=handlr
        }
        function handlr(){
            // console.log(11)
            // console.log(this.dataset.index)
            var index=this.dataset.index
            for(var n=0;n<oheaderitem.length;n++){
                oheaderitem[n].classList.remove("active")
                oboxitem[n].classList.remove("active")
            }
            oheaderitem[index].classList.add("active")
            oboxitem[index].classList.add("active")
        }
    </script>
</body>
</html>

DOM节点

DOM 的节点我们一般分为常用的三大类 元素节点 / 文本节点 / 属性节点
什么是分类，比如我们在获取元素的时候，通过各种方法获取到的我们叫做元素节点（标签节点）
比如我们标签里面写的文字，那么就是文本节点
写在每一个标签上的属性，就是属性节点

元素节点

在这里插入图片描述

我们通过 getElementBy... 获取到的都是元素节点，

在这里插入图片描述

属性节点

在这里插入图片描述

我们通过 getAttribute 获取的就是元素的属性节点

没有父子关系

文本节点

在这里插入图片描述

我们通过 innerText 获取到的就是元素的文本节点

注释节点

在这里插入图片描述

节点案例

在这里插入图片描述
短短三行代码居然有5个节点，666

获取节点

childNodes

childNodes：获取某一个节点下 所有的子一级节点

<body>
  <div>
    <p>hello</p>
  </div>
  
  <script>
    // 这个 oDiv 获取的是页面中的 div 元素，就是一个元素节点
  	var oDiv = document.querySelector('div')
    
    console.log(oDiv.childNodes) 
    /*
    	NodeList(3) [text, p, text]
      0: text
      1: p
      2: text
      length: 3
      __proto__: NodeList
    */
  </script>
</body>

我们会发现，拿到以后是一个伪数组，里面有三个节点
一个 text：从 <div> 一直到 <p> 中间有一个换行和一堆空格，这个是第一个节点，是一个文本节点
一个 p：这个 p 标签就是第二个节点，这个是一个元素节点
一个 text：从 </p> 一直到 </div> 中间有一个换行和一堆空格，这个是第三个节点，是一个文本节点
这个时候就能看到我们有不同的节点类型了

children

children ：获取某一节点下所有的子一级 元素节点

<body>
  <div>
    <p>hello</p>
  </div>
  
  <script>
    // 这个 oDiv 获取的是页面中的 div 元素，就是一个元素节点
  	var oDiv = document.querySelector('div')
    
    console.log(oDiv.children) 
    /*
    	HTMLCollection [p]
      0: p
      length: 1
      __proto__: HTMLCollection
    */
  </script>
</body>

我们发现只有一个节点了，因为 children 只要元素节点
div 下面又只有一个元素节点，就是 p
所以就只有一个，虽然只有一个，但是也是一个 伪数组

firstChild

firstChild：获取某一节点下子一级的 第一个节点

<body>
  <div>
    <p>hello</p>
  </div>
  
  <script>
    // 这个 oDiv 获取的是页面中的 div 元素，就是一个元素节点
  	var oDiv = document.querySelector('div')
    
    console.log(oDiv.firstChild) // #text 
  </script>
</body>

这个是只获取一个节点，不再是伪数组了
获取的是第一个
第一个就是 <div> 一直到 <p> 的那个换行和空格，是个文本节点

lastChild

lastChild：获取某一节点下子一级的 最后一个节点

<body>
  <div>
    <p>hello</p>
  </div>
  
  <script>
    // 这个 oDiv 获取的是页面中的 div 元素，就是一个元素节点
  	var oDiv = document.querySelector('div')
    
    console.log(oDiv.lastChild) // #text 
  </script>
</body>

只获取一个节点，不再是伪数组
获取的是最后一个
最后一个就是 </p> 一直到 </div> 之间的换行和空格，是个文本节点

firstElementChild

firstElementChild：获取某一节点下子一级 第一个元素节点

<body>
  <div>
    <p>hello</p>
  </div>
  
  <script>
    // 这个 oDiv 获取的是页面中的 div 元素，就是一个元素节点
  	var oDiv = document.querySelector('div')
    
    console.log(oDiv.firstElementChild) // <p>hello</p>
  </script>
</body>

只获取一个节点，不在是伪数组
获取的是第一个 元素节点
第一个元素节点就是 p 标签，是一个元素节点

lastElementChild

lastElementChild：获取某一节点下子一级 最后一个元素节点

<body>
  <div>
    <p>hello</p>
    <p>world</p>
  </div>
  
  <script>
    // 这个 oDiv 获取的是页面中的 div 元素，就是一个元素节点
  	var oDiv = document.querySelector('div')
    
    console.log(oDiv.lastElementChild) // <p>world</p>
  </script>
</body>

只获取一个节点，不在是伪数组
获取的是最后一个 元素节点
最后一个元素节点是 <p>world</p>，是一个元素节点

nextSibling

nextSibling：获取某一个节点的 下一个兄弟节点

<body>
  <ul>
    <li id="a">hello</li>
    <li id="b">world</li>
    <li id="c">!!!</li>
  </ul>
  
  <script>
    // 这个 oLi 获取的是页面中的 li 元素，就是一个元素节点
  	var oLi = document.querySelector('#b')
    
    console.log(oLi.nextSibling) // #text
  </script>
</body>

只获取一个节点，不在是伪数组
获取的是 id="b" 这个 li 的下一个兄弟节点
因为 id="b" 的下一个节点，是两个 li 标签之间的换行和空格，所以是一个文本节点

previousSibling

previousSibling：获取某一个节点的 上一个兄弟节点

<body>
  <ul>
    <li id="a">hello</li>
    <li id="b">world</li>
    <li id="c">!!!</li>
  </ul>
  
  <script>
    // 这个 oLi 获取的是页面中的 li 元素，就是一个元素节点
  	var oLi = document.querySelector('#b')
    
    console.log(oLi.previousSibling) // #text
  </script>
</body>

只获取一个节点，不在是伪数组
获取的是 id="b" 这个 li 的上一个兄弟节点
因为 id="b" 的上一个节点，是两个 li 标签之间的换行和空格，所以是一个文本节点

nextElementSibling

nextElementSibling：获取某一个节点的 下一个元素节点

<body>
  <ul>
    <li id="a">hello</li>
    <li id="b">world</li>
    <li id="c">!!!</li>
  </ul>
  
  <script>
    // 这个 oLi 获取的是页面中的 li 元素，就是一个元素节点
  	var oLi = document.querySelector('#b')
    
    console.log(oLi.nextElementSibling) // <li id="c">!!!</li>
  </script>
</body>

只获取一个节点，不在是伪数组
获取的是 id="b" 这个 li 的下一个兄弟元素节点
因为 id="b" 的下一个兄弟元素节点就是 id="c" 的 li，是一个元素节点

previousElementSibling

previousElementSibling：获取某一个节点的 上一个元素节点

<body>
  <ul>
    <li id="a">hello</li>
    <li id="b">world</li>
    <li id="c">!!!</li>
  </ul>
  
  <script>
    // 这个 oLi 获取的是页面中的 li 元素，就是一个元素节点
  	var oLi = document.querySelector('#b')
    
    console.log(oLi.previousElementSibling) // <li id="a">hello</li>
  </script>
</body>

只获取一个节点，不在是伪数组
获取的是 id="b" 这个 li 的上一个兄弟元素节点
因为 id="b" 的上一个兄弟元素节点就是 id="a" 的 li，是一个元素节点

parentNode

parentNode：获取某一个节点的 父节点

<body>
  <ul>
    <li id="a">hello</li>
    <li id="b">world</li>
    <li id="c">!!!</li>
  </ul>
  
  <script>
    // 这个 oLi 获取的是页面中的 li 元素，就是一个元素节点
  	var oLi = document.querySelector('#b')
    
    console.log(oLi.parentNode) // <ul>...</ul>
  </script>
</body>

只获取一个节点，不在是伪数组
获取的是当前这个 li 的父元素节点
因为这个 li 的父亲就是 ul，所以获取到的就是 ul，是一个元素节点

attributes

attributes：获取某一个 元素节点 的所有 属性节点

<body>
  <ul>
    <li id="a" a="100" test="test">hello</li>
  </ul>
  
  <script>
    // 这个 oLi 获取的是页面中的 li 元素，就是一个元素节点
  	var oLi = document.querySelector('#a')
    
    console.log(oLi.attributes) 
    /*
    	NamedNodeMap {0: id, 1: a, 2: test, id: id, a: a, test: test, length: 3}
      0: id
      1: a
      2: test
      length: 3
      a: a
      id: id
      test: test
      __proto__: NamedNodeMap
    
    */
  </script>
</body>

获取的是一组数据，是该元素的所有属性，也是一个伪数组
这个 li 有三个属性，id / a / test 三个，所以就获取到了这三个

操作节点

我们所说的操作无非就是 增删改查
创建一个节点（因为向页面中增加之前，我们需要先创建一个节点出来）
向页面中增加一个节点
删除页面中的某一个节点
修改页面中的某一个节点
获取页面中的某一个节点

创建一个节点

createElement：用于创建一个元素节点

// 创建一个 div 元素节点
var oDiv = document.createElement('div')

console.log(oDiv) // <div></div>

创建出来的就是一个可以使用的 div 元素

createTextNode：用于创建一个文本节点

// 创建一个文本节点
var oText = document.createTextNode('我是一个文本')

console.log(oText) // "我是一个文本"

向页面中加入一个节点

appendChild：是向一个元素节点的末尾追加一个节点

语法： 父节点.appendChild(要插入的子节点)

// 创建一个 div 元素节点
var oDiv = document.createElement('div')
var oText = document.createTextNode('我是一个文本')

// 向 div 中追加一个文本节点
oDiv.appendChild(oText)

console.log(oDiv) // <div>我是一个文本</div>

insertBefore：向某一个节点前插入一个节点

语法： 父节点.insertBefore(要插入的节点，插入在哪一个节点的前面)

<body>
  <div>
    <p>我是一个 p 标签</p>
  </div>
  
  <script>
  	var oDiv = document.querySelector('div')
    var oP = oDiv.querySelector('p')
    
    // 创建一个元素节点
    var oSpan = document.createElement('span')
    
    // 将这个元素节点添加到 div 下的 p 的前面
    oDiv.insertBefore(oSpan, oP)
    
    console.log(oDiv)
    /*
    	<div>
    		<span></span>
    		<p>我是一个 p 标签</p>
    	</div>
    */
  </script>
</body>

删除页面中的某一个节点

removeChild：移除某一节点下的某一个节点

语法：父节点.removeChild(要移除的字节点)

<body>
  <div>
    <p>我是一个 p 标签</p>
  </div>
  
  <script>
  	var oDiv = document.querySelector('div')
    var oP = oDiv.querySelector('p')
    
    // 移除 div 下面的 p 标签
    oDiv.removeChild(oP)
    
    console.log(oDiv) // <div></div>
  </script>
</body>

修改页面中的某一个节点

replaceChild：将页面中的某一个节点替换掉

语法： 父节点.replaceChild(新节点，旧节点)

<body>
  <div>
    <p>我是一个 p 标签</p>
  </div>
  
  <script>
  	var oDiv = document.querySelector('div')
    var oP = oDiv.querySelector('p')
    
    // 创建一个 span 节点
    var oSpan = document.createElement('span')
    // 向 span 元素中加点文字
    oSpan.innerHTML = '我是新创建的 span 标签'
    
   	// 用创建的 span 标签替换原先 div 下的 p 标签
    oDiv.replaceChild(oSpan, oP)
    
    console.log(oDiv)
    /*
    	<div>
    		<span>我是新创建的 span 标签</span>
    	</div>
    */
  </script>
</body>

案例-动态删除

<!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>Document</title>
</head>
<body>
    <ul id="list"> 

    </ul>
    <script>
        var arr=["111","2222","333"]
        for(var i=0;i<arr.length;i++){
            var oli=document.createElement("li")
            
            oli.innerHTML=arr[i]
            var obutton=document.createElement("button")
            obutton.innerHTML="delate"
            obutton.onclick=handlr
            oli.appendChild(obutton)
            list.appendChild(oli)
        }
        function handlr(){
            this.parentNode.remove()
        }
    </script>
</body>
</html>

节点属性

节点会分成很多种，而且我们也能获取到各种不同的节点
下面就是各种节点之间属性的区别

根据这段代码

<body>
  <ul test="我是 ul 的一个属性">
    <li>hello</li>
  </ul>

  <script>
    // 先获取 ul
    var oUl = document.querySelector('ul')
    
    // 获取到 ul 下的第一个子元素节点，是一个元素节点
    var eleNode = oUl.firstElementChild
    
    // 获取到 ul 的属性节点组合，因为是个组合，我们要拿到节点的话要用索引
    var attrNode = oUl.attributes[0]

    // 获取到 ul 下的第一个子节点，是一个文本节点
    var textNode = oUl.firstChild
  </script>
</body>

nodeType

nodeType：获取节点的节点类型，用数字表示
```
console.log(eleNode.nodeType) // 1
console.log(attrNode.nodeType) // 2
console.log(textNode.nodeType) // 3
```
- nodeType === 1 就表示该节点是一个 元素节点
- nodeType === 2 就表示该节点是一个 属性节点
- nodeType === 3 就表示该节点是一个 注释节点

nodeName

nodeName：获取节点的节点名称
```
console.log(eleNode.nodeName) // LI
console.log(attrNode.nodeName) // test
console.log(textNode.nodeName) // #text
```
- 元素节点的 nodeName 就是 大写标签名
- 属性节点的 nodeName 就是 属性名
- 文本节点的 nodeName 都是 #text

nodeValue

nodeValue：获取节点的值

console.log(eleNode.nodeValue) // null
console.log(attrNode.nodeValue) // 我是 ul 的一个属性
console.log(textNode.nodeValue) // 换行 + 空格

元素节点没有 nodeValue
属性节点的 nodeValue 就是 属性值
文本节点的 nodeValue 就是 文本内容

总结

-	nodeType	nodeName	nodeValue
元素节点	1	大写标签名	null
属性节点	2	属性名	属性值
文本节点	3	#text	文本内容

获取元素尺寸

就是获取元素的 “占地面积”，而不是元素的大小
可以实现懒加载的效果（像京东的商品栏）

offsetWith 和 offsetHeight

在这里插入图片描述

offsetWidth ：获取的是元素内容 + padding + border 的宽度
offsetHeight ：获取的是元素内容 + padding + border 的高度

clientWidth 和 clientHeight

在这里插入图片描述

clientWidth ：获取的是元素内容 + padding 的宽度
clientHeight ：获取的是元素内容 + padding 的高度

注意:

获取到的尺寸是没有单位的数字
不会对box-sizing有影响
当元素在页面中不占位置的时候，获取到的是 0
- display: none; 元素在页面不占位
- visibility: hidden; 元素在页面占位

获取元素的偏移量

就是元素在页面上相对于参考父级的左边和上边的距离

offsetParent

获取元素的偏移量参考父级
其实就是假设你要给一个元素 绝对定位 的时候
它是根据谁来进行定位的
那么这个元素的偏移量参考父级就是谁

offsetLeft 和 offsetTop

获取的是元素左边的偏移量和上边的偏移量
offsetLeft ：该元素相对于参考父级的左侧偏移量
offsetTop ：该元素相对于参考父级的上侧偏移量

获取浏览器窗口尺寸

前面学过一个 innerWidth 和 innerHeight
他们获取到的是窗口包含滚动条的尺寸
下面学习两个不包含滚动条的尺寸获取方式
document.documentElement.clientWidth ：可视窗口的宽度
document.documentElement.clientHeight ：可视窗口的高度

<!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>Document</title>
    <style>
        div{
            width: 3000px;
            height: 100px;
            padding: 10px;
            border: 5px solid red;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div id="box">

    </div>
    <script>
        console.log(document.documentElement.clientWidth)
        console.log(document.documentElement.clientHeight)
    </script>
</body>
</html>

在这里插入图片描述

案例-懒加载

不懂时就看96集

<!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>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            height: 100%;
        }
        ul li{
            overflow: hidden;
            height: 150px;
        }
        ul li img{
            float: left;
            width: 80px;
        }
    </style>
</head>
<body>
    <h1>标题</h1>
    <ul id="list">
        <!-- <li>
            <img src="https://static.maizuo.com/pc/v5/usr/movie/495ff91096e9de224acc3746ec42d002.jpg?x-oss-process=image/quality,Q_70" alt="">
            <h3>绝望主夫</h3>
        </li> -->
    </ul>
    <script>
        var arr1=[
            {
                name:"绝望主夫",
                url:"https://static.maizuo.com/pc/v5/usr/movie/495ff91096e9de224acc3746ec42d002.jpg?x-oss-process=image/quality,Q_70"
            },
            {
                name:"绝望主夫",
                url:"https://static.maizuo.com/pc/v5/usr/movie/495ff91096e9de224acc3746ec42d002.jpg?x-oss-process=image/quality,Q_70"
            },
            {
                name:"绝望主夫",
                url:"https://static.maizuo.com/pc/v5/usr/movie/495ff91096e9de224acc3746ec42d002.jpg?x-oss-process=image/quality,Q_70"
            },
            {
                name:"绝望主夫",
                url:"https://static.maizuo.com/pc/v5/usr/movie/495ff91096e9de224acc3746ec42d002.jpg?x-oss-process=image/quality,Q_70"
            },
            {
                name:"绝望主夫",
                url:"https://static.maizuo.com/pc/v5/usr/movie/495ff91096e9de224acc3746ec42d002.jpg?x-oss-process=image/quality,Q_70"
         
            },
        ]
        var arr2=[
            {
                name:"绝望主夫",
                url:"https://static.maizuo.com/pc/v5/usr/movie/495ff91096e9de224acc3746ec42d002.jpg?x-oss-process=image/quality,Q_70"
            },
            {
                name:"绝望主夫",
                url:"https://static.maizuo.com/pc/v5/usr/movie/495ff91096e9de224acc3746ec42d002.jpg?x-oss-process=image/quality,Q_70"
            },
            {
                name:"绝望主夫",
                url:"https://static.maizuo.com/pc/v5/usr/movie/495ff91096e9de224acc3746ec42d002.jpg?x-oss-process=image/quality,Q_70"
            },
            {
                name:"绝望主夫",
                url:"https://static.maizuo.com/pc/v5/usr/movie/495ff91096e9de224acc3746ec42d002.jpg?x-oss-process=image/quality,Q_70"
            },
            {
                name:"绝望主夫",
                url:"https://static.maizuo.com/pc/v5/usr/movie/495ff91096e9de224acc3746ec42d002.jpg?x-oss-process=image/quality,Q_70"
            },
        ]
        renderHTML(arr1)
        function renderHTML(arr){
            // list.innerHTML+=arr.map(function(item){
            //     return `<li></li>`
            // }).join("")
            for(var i=0;i<arr.length;i++){
            var oli =document.createElement("li")
            oli.innerHTML=`<img src="${arr[i].url}" alt="">
            <h3>${arr[i].name}</h3>`
            list.appendChild(oli)
        }            
        }
        
        var a=false
        window.onscroll=function(){
            var listheight=list.offsetHeight
            var listTop=list.offsetTop
            // console.log(listTop+listheight)
            var scrollTop=document.documentElement.scrollTop||document.body.scrollTop
            var windowHright=document.documentElement.clientHeight
            if(a)return
            if((listheight+listTop)-Math.round(windowHright+scrollTop+1)<100){
                console.log("1`111")
                a=true
                //渲染下一页数据
                setTimeout(function(){
                    renderHTML(arr2)

                    a=false//下一次到底事件再次触发
                },1000)
            }
        }
        
        
    </script>
</body>
</html>

二.事件

一个事件由什么东西组成

触发谁的事件：事件源
触发什么事件：事件类型
触发以后做什么：事件处理函数

var oDiv = document.querySelector('div')

oDiv.onclick = function () {}
// 谁来触发事件 => oDiv => 这个事件的事件源就是 oDiv
// 触发什么事件 => onclick => 这个事件类型就是 click
// 触发之后做什么 => function () {} => 这个事件的处理函数

我们想要在点击 div 以后做什么事情，就把我们要做的事情写在事件处理函数里面

var oDiv = document.querySelector('div')

oDiv.onclick = function () {
  console.log('你点击了 div')
}

当我们点击 div 的时候，就会执行事件处理函数内部的代码
每点击一次，就会执行一次事件处理函数

事件的绑定方式

我们现在给一个注册事件都是使用 onxxx 的方式
但是这个方式不是很好，只能给一个元素注册一个事件

一旦写了第二个事件，那么第一个就被覆盖了

oDiv.onclick = function () {
  console.log('我是第一个事件')
}

oDiv.onclick = function () {
  console.log('我是第二个事件')
}

当你点击的时候，只会执行第二个，第一个就没有了

我们还有一种事件监听的方式去给元素绑定事件
使用 addEventListener 的方式添加
- 这个方法不兼容，在 IE 里面要使用 attachEvent
addEventListener : 非 IE 7 8 下使用
语法： 元素.addEventListener('事件类型'，事件处理函数，冒泡还是捕获)
```
oDiv.addEventListener('click', function () {
  console.log('我是第一个事件')
}, false)

oDiv.addEventListener('click', function () {
  console.log('我是第二个事件')
}, false)
```
- 当你点击 div 的时候，两个函数都会执行，并且会按照你注册的顺序执行
- 先打印 我是第一个事件 再打印 我是第二个事件
- 注意： 事件类型的时候不要写 on，点击事件就是 click，不是 onclick
attachEvent ：IE 7 8 下使用（不推荐）
语法： 元素.attachEvent('事件类型'，事件处理函数)
```
oDiv.attachEvent('onclick', function () {
  console.log('我是第一个事件')
})

oDiv.attachEvent('onclick', function () {
  console.log('我是第二个事件')
})
```
- 当你点击 div 的时候，两个函数都会执行，并且会按照你注册的顺序倒叙执行
- 先打印 我是第二个事件 再打印 我是第一个事件
- 注意： 事件类型的时候要写 on，点击事件就写 onclick

两个方式的区别

注册事件的时候事件类型参数的书写
- addEventListener ：不用写 on
- attachEvent ：要写 on
参数个数
- addEventListener ：一般是三个常用参数
- attachEvent ：两个参数
执行顺序
- addEventListener ：顺序注册，顺序执行
- attachEvent ：顺序注册，倒叙执行
适用浏览器
- addEventListener ：非 IE 7 8 的浏览器
- attachEvent ： IE 7 8 浏览器

事件的解绑

事件禁用的源码
在这里插入图片描述

解绑方法1，赋值为空

    <button id="btn">11111</button>
    <script>
        btn.onclick=function(){
            console.log("11111122222")
            this.onclick=null
        }
    </script>

显示为：
在这里插入图片描述

解绑方法2，removeEventListener
对同一对象使用removeEventListener值,需要用到 addEventListener 的方式添加事件

<!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>Document</title>
    <style>
    </style>
</head>
<body>
    <button id="btn">11111</button>
    <script>
        function handlr(){
            console.log("111111222222")
            this.removeEventListener("click",handlr)
        }
        btn.addEventListener("click",handlr)
    </script>
</body>
</html>

常见的事件

我们在写页面的时候经常用到的一些事件
大致分为几类，浏览器事件 / 鼠标事件 / 键盘事件 / 表单事件 / 触摸事件
不需要都记住，但是大概要知道

浏览器事件

load ：页面全部资源加载完毕
scroll ：浏览器滚动的时候触发
…

鼠标事件

click ：点击事件
dblclick ：双击事件
contextmenu ：右键单击事件
mousedown ：鼠标左键按下事件
mouseup ：鼠标左键抬起事件
mousemove ：鼠标移动
mouseover ：鼠标移入事件
mouseout ：鼠标移出事件
mouseenter ：鼠标移入事件
mouseleave ：鼠标移出事件

键盘事件

keyup ：键盘抬起事件
keydown ：键盘按下事件
keypress ：键盘按下再抬起事件

表单事件

change : 表单内容改变事件
input : 表单内容输入事件
submit : 表单提交事件

触摸事件(移动端)

touchstart ：触摸开始事件
touchend ：触摸结束事件
touchmove ：触摸移动事件

事件对象

什么是事件对象？
就是当你触发了一个事件以后，对该事件的一些描述信息
例如：
- 你触发一个点击事件的时候，你点在哪个位置了，坐标是多少
- 你触发一个键盘事件的时候，你按的是哪个按钮
每一个事件都会有一个对应的对象来描述这些信息，我们就把这个对象叫做 事件对象
浏览器给了我们一个 黑盒子，叫做 window.event，就是对事件信息的所有描述
- 比如点击事件
- 你点在了 0，0 位置，那么你得到的这个事件对象里面对应的就会有这个点位的属性
- 你点在了 10, 10 位置，那么你得到的这个事件对象里面对应的就会有这个点位的属性
```
oDiv.onclick = function () {
  console.log(window.event.X轴坐标点信息)
  console.log(window.event.Y轴坐标点信息)
}
```
这个玩意很好用，但是一般来说，好用的东西就会有 兼容性问题
在 IE低版本 里面这个东西好用，但是在 高版本IE 和 Chrome 里面不好使了
我们就得用另一种方式来获取 事件对象

在每一个事件处理函数的行参位置，默认第一个就是 事件对象

oDiv.onclick = function (e) {
  // e 就是和 IE 的 window.event 一样的东西
  console.log(e.X轴坐标点信息)
  console.log(e.Y轴坐标点信息)
}

综上所述，我们以后在每一个事件里面，想获取事件对象的时候，都用兼容写法

oDiv.onclick = function (e) {
  e = e || window.event
  console.log(e.X轴坐标点信息)
  console.log(e.Y轴坐标点信息)
}

鼠标事件

clientX和clientY

相对于可视窗口
这里的可视窗口就是窗口的大小

<!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>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 100px;
            height: 100px;
            background-color: skyblue;
            margin: 100px;
        }
    </style>
</head>
<body>
    <div id="box">

    </div>
    <script>
        box.onclick=function(evt){
            console.log(evt.clientX,evt.clientY)
        }
    </script>
</body>
</html>

显示为：
在这里插入图片描述

pageX和pageY

相对于整个文档的x和y
在这里插入图片描述

<!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>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 100px;
            height: 100px;
            background-color: skyblue;
            margin: 100px;
        }
    </style>
</head>
<body>
    <div id="box">

    </div>
    <script>
        box.onclick=function(evt){
            console.log(evt.clientX,evt.clientY)
            console.log(evt.pageX,evt.pageY)
        }
    </script>
</body>
</html>

点击一次
在这里插入图片描述

offsetX和offsetY

即相对点击盒子左上角的位置
若大盒子包裹小盒子，点击小盒子，就会显示距离小盒子左上角的距离

<!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>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 100px;
            height: 100px;
            background-color: skyblue;
            margin: 100px;
        }
    </style>
</head>
<body>
    <div id="box">

    </div>
    <script>
        box.onclick=function(evt){
            console.log(evt.clientX,evt.clientY)
            console.log(evt.pageX,evt.pageY)
            console.log(evt.offsetX,evt.offsetY)
        }
    </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>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 200px;
            height: 50px;
            background-color: yellow;
            position: relative;

            margin: 100px;
        }
        div p{
            width: 300px;
            height: 200px;
            background-color: red;
            position: absolute;
            left: 100px;
            top: 100px;
            display: none;

            pointer-events: none;
            z-index: 100;
        }
    </style>
</head>
<body>
    <div id="box">
        头像
        <p>
            介绍
        </p>
    </div>
    <div>11111</div>
    <script>
        box.onmouseover=function(){
            this.firstElementChild.style.display="block"
        }
        box.onmouseout=function(){
            this.firstElementChild.style.display="none"
        }
        box.onmousemove=function(evt){
            this.firstElementChild.style.left=evt.offsetX+"px"
            this.firstElementChild.style.top=evt.offsetY+"px"
        }
    </script>
</body>
</html>