将HTML结构以DOM树形式表现，document是最外层对象，其他标签是其子对象， 可以利用这些JS对象实现特效或与用户交互
上图：白色的是元素节点，比如div（主要是操作这个）、绿色是属性节点，比如href、黄色是文本节点，就是文字

只获取对应匹配的第一个

获取多个对应匹配生成的NodeList对象集合（伪数组）

在下面追加DOM元素

在兄弟的上面追加DOM元素

克隆 DOM元素.cloneNode(布尔值)
删除 DOM元素.removeChild(要删的元素)

DOM的属性

格式化 HTML标签的文字

添加CSS属性（ 有带" - "的属性规定用小驼峰抓取 ）

获取HTML滑轮滑度有多少px（可以=赋值和修改）

获取盒子的长宽

HTML上给标签自定义选择器data-uname、sth等，DOM元素对象获取自定义的属性

<li data-lili="自定义属性">列表3</li>
const obj = document.querySelector('li:nth-child(3)')
console.log(obj.dataset.lili); `返回：自定义属性`
DOM的方法
给标签添加、替换、删除类属性，(前提是CSS上已经设置了该标签的CSS属性)
追加一个类，元素.classList.add('不用加.的类名')
切换一个类，元素.classList.toggle('不用加.的类名')
删除有一个类，元素.classList.remove('不用加.的类名')
- 上述三个是新特性，旧的标签变化只有属性使用 => div.className = '.类名' `新的class覆盖旧的，想要加多一个用className = '.nav .box'`
classList.add()的运用场景 轮播图上的小圆点亮灯，li是用nth-child(random)随机选取的，每取一次就可以用元素.classList.add()添加一次
找DOM对象的亲戚 document.getElementById()
返回<li> 元素父节点: document.getElementById("item1").parentNode
事件监听 addEventListener
就是HTML标签受到鼠标点击后、经过后、点击输入文字后等操作之后能触发函数功能的操作
增加事件： DOM对象.addEventListener('事件类型'，function(e){}，默认false冒泡)

解绑事件：DOM对象.removeEventListener('事件类型'，函数名(要先自己定义变量）)
传统on语法：
增加事件： ul.onclick = function (e) {}

解绑事件：  DOM对象.onclick = null
addEventListener事件类型不会覆盖会依次执行，可设置是否冒泡
传统on会覆盖事件，只能用冒泡流
注意区分事件解绑和： 阻止元素默认行为是阻止a标签的点击默认跳转，在函数体里 e.preventDefault()
三步： DOM对象、事件类型、触发函数
DOM 事件类型
鼠标事件：
鼠标点击 'click'
鼠标经过 'mouseenter'  旧版本mouseover会有冒泡效果，不建议使用
鼠标离开 'mouseleave'  旧版本mouseout会有冒泡效果，不建议使用
焦点事件(搜索光标）：
点击光标后 'focus'
失去光标后 'blur'
键盘按下后 'keydown'
键盘弹起来后 'keyup'
文本输入事件
文本输入的文字，输入就有触发并且能拿到文字  'input'  console.log(input.value)就能拿到文字
M端(手机)事件
手指触摸DOM时 'touchstart'
手指上滑DOM时 'touchmove'
手指上滑离开时 'touchend'
函数就是赋值了给事件类型的名字  click就是里面定义的匿名函数的名字
window事件类型
'load', 让html先加载事件（在script上设置 ）
<script>
// 让HTML先加载
  window.addEventListener('load',function(){  
      const co = document.querySelector('.nav')
      co.style.backgroundColor = 'red'
  </script>
scroll 滑动轮滑检测事件
window.addEventListener('scroll',function(){  
    // 查看HTML(documentElement)的滑动高度scrollTop, 滑动右度scrollLeft
    const top = document.documentElement.scrollTop
    console.log(top);
document.documentElement.scrollTop 可以用=赋值也可以修改
e 事件对象
事件监听发生后 会产生一些数据，用一个对象把这些数据存放起来，这个对象叫事件对象

事件对象的一般常用属性
获取当前事件类型 e.type
获取光标相对于浏览器在再上角的位置 e.clientX/clientY
获取光标相对于当前DOM元素左上角的位置 e.offsetX/offsetY
用户按下键盘后的值是什么 e.key
事件对象中的 e.key属性的使用场景
冒泡和捕获
在html里有父级标签 和 子集标签，假设两个标签都有设置鼠标点击事件，
如果点击子级触发了效果之后，父级也触发了效果 就叫冒泡
如果点击父级触发了效果之后，子级也触发了效果 就叫捕获
阻止冒泡的方法用 事件对象e方法 e.stopPropagation() 
<style>
.par {
    width: 200px;
    height: 200px;
    background-color: pink;
.son {
    width: 50px;
    height: 50px;
    background-color: green;
</style>
    <div class="par">
        <div class="son">
    <script>
        const par = document.querySelector('.par')
        const son = document.querySelector('.son')
        document.addEventListener('click', function () {
            alert('我是爷爷')
        },false)  // 这里默认是false， 改成true就会变成捕获流
        par.addEventListener('click', function (e) {
            alert('我是爸')
            e.stopPropagation()  // ⭐⭐⭐阻止冒泡的e方法
        },false)  // 这里默认是false， 改成true就会变成捕获流
        son.addEventListener('click', function () {
            alert('我是儿')
        },false)  // 这里默认是false， 改成true就会变成捕获流
    </script>
</body>
利用冒泡原理，解决同个父级标签下子级标签点击后都会到父级上触发的技巧

减少事件监听注册次数，提高性能
e.target  获得冒泡源对象（即刚刚点击的子级DOM对象）
e.target.tagName  获得冒泡源的标签名 （如 OL、UL、LI 是大写的标签名）
HTML上自定义id <li data-id="2">  ,  js 上拿到id const i = e.target.dataset.id 
tab 用时间委托实现
<style>
        width: 300px;
        height: 300px;
        border: 1px solid black;
    .select {
        color: pink;
</style>
    <ul class="nav">
        <li data-id="0">第一个</li>
        <li data-id="1">第二个</li>
        <li data-id="2">第三个</li>
    <script>
        const ul = document.querySelector('ul')
        ul.onclick = function (e) {
            if(document.querySelector('ul .select')){
                document.querySelector('ul .select').classList.remove('select')
            e.target.classList.add('select')
            console.log(e.target.dataset.id);
    </script>
</body>