浅浅地聊聊js是如何获得dom从而控制html和css的

例子：控制视频播放速度

成果展示

1. 先生成页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <div id="wrapper">
        <video width="765" height="430" src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" controls class="flex"> </video>
        <div class="speed">
            <div class="speed-bar">
                1X
            </div>
        </div>
    </div>
    <script src="./index.js"></script>
</body>
</html>

2. 插入css

    *{
    margin: 0;
    padding: 0;
}

body{
    min-height: 100vh;
    background:   url('./t5.jpg')#4c4c4c ; 
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
}

#wrapper{
    width: 850px;
    display: flex;/* ===>>>>.flex, .speed{
    display: inline-block;
} */
}
.speed{
    margin: 10px;
    flex: 1;
    background:#fff;
    border-radius: 50px;
    display: flex;
    overflow: hidden;
    align-items: flex-start;
}
.speed-bar{
    width: 100%;
    height: 16.3%;
    background: linear-gradient(-170deg,#2376ae 0%,#c16ecf 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    cursor: pointer;
}

由于今天的主角是js，所以html和css部分就不给予讲解，直接看效果：

3. 编写js代码

那么在写js代码前，我们肯定得考虑这几个问题：

3.1. js如何拿到要操作的dom?

请看代码：

var speed=document.querySelector('.speed')
var speedbar=document.querySelector('.speed-bar')
var video=document.querySelector('.flex')

这样就得到了？document.querySelector又是什么？

关于document.querySelector的解释是这样的文档对象模型Document引用的querySelector()方法返回文档中与指定选择器或选择器组匹配的第一个 HTMLElement对象。如果找不到匹配项，则返回null。

var speed=document.querySelector('.speed')
//说明 speed通过文档对象模型Document引用的querySelector()方法返回得到了HTML中class="speed"的dom对象。
.....//以此类推

3.2. js如何取到鼠标在该dom上滑动的距离？

要通过控制鼠标在dom上滑动的距离来控制视频的播放倍数，那我们要怎样才能知道鼠标到底滑动了东西。

得监听鼠标滑动的事件

speed.addEventListener('mousemove');

监听后返回值

speed.addEventListener('mousemove',function(e){//addEventListener 监听事件
    console.log(e)
})

鼠标在dom移动就能得到鼠标的具体位置

由于鼠标是通过竖直方向（Y轴）的移动来控制播放速度的，所以：

speed.addEventListener('mousemove',function(e){
    //声明变量Y为此时鼠标到dom顶端的距离
    //offsetTop是获取某个dom结构到浏览器的距离
    //offsetHeight是获取某个dom结构自身的高度
    //声明变量percent为鼠标当前位置占整个dom自身的比例
    var Y = e.pageY-speed.offsetTop
    var percent=Y/speed.offsetHeight
    
    var min=0.4 //最小播放速度
    var max=4   //最大播放速度
    //播放速度的最值是可以自行设置的
    
    //Math.round()函数返回一个数字四舍五入后最接近的整数。
    var height=Math.round(percent * 100)+'%'
    
    //playbackRate是播放速度
    var playbackRate=percent*(max-min)+min
    
    //设置speedbar的高度随鼠标的移动而变化且大小为鼠标当前位置的高度
    speedbar.style.height=height
    
    //speedbar中显示内容等于playbackRate
    //toFixed(2)方法可把 Number 四舍五入为指定小数位数2位的数字
    speedbar.textContent=playbackRate.toFixed(2)+'X'
    
    //video自带属性playbackRate 播放速度，令播放速度等于我们可控制的playbackRate
    video.playbackRate=playbackRate
})

这样就能得到效果啦！

结束语：前端初学者，请各位大佬多多指教！！！🙏