1、DOM 文档对象模型

    JS 运行到HTML 文档中，由 HTML 文件提供了 DOM 的能力
    DOM 的 核心  document
        document 是 JS 内置的一个对象，内部 提供了 很多的属性和方法 ，帮助我们便捷的 操作页面标签

2、获取标签

    语法1 document.querySelector('想写CSS选择器一样书写标签')
    返回值为 符合条件的第一个标签
    
    语法2 document.querySelectorArr('想写css选择器一样书写标签')
    返回值 返回一个符合条件的标签组成的 伪数组
        
        伪数组  长得很像数组，但好多数组的方法都不具备
    
    获取的标签/元素 用变量存储中，方便后边使用

3、获取样式

    元素/标签.style
        能够拿到 行内样式，或者给添加一个行内样式
        
    getComputedStyle('要查询样式的标签').要查询的样式名
        能够获取到元素的样式（行内和非行内部都可）
        但是获取的内容是只读的，只允许查询，不允许修改

4、 操作元素类名

    元素/标签.className   =>  能够得到元素目前的类名
                                还可以给这个属性从新赋值，然后修改当前标签的类名
        不管前边有多少属性，只要用 .className = '类名' 就会覆盖前边的 类名
    元素/标签.classList
         返回值为 伪数组
             数组内下表对应的是我们的每一个类名
             value 对应的是我们完整类名的字符串
             向这个标签的 后面追加 类名 ，原本的类名还存在
         .classList.add('类名') 添加一个类名
         .classList.remove('类名') 删除一个类名

5、 设置标签属性

    box.setAttribute('属性','属性值')
    
    
    H5 新增自定义属性
        H5 自定义属性在书写的时候有一个 固定的开头 就是 data-
            语法 data-属性=属性值
            
        获取
            元素/标签.dataset.属性名（属性名不要带data-）
            
        注意： 在设置的时候 不要采用 驼峰 ，全小写，因为哪怕你大写了，浏览器也会转为小写

6、 DOM 尺寸

    1、获取元素的参考父级
        .offsetParent
        返回一个指向最近的（指包含层级上的最近）包含该元素的定位元素或者最近的 table，td
        th, body 元素。当元素的 displsy 设置为 "none" 时，offsetParent 返回 null

    2、获取元素的偏移量
        .offsetTop/ .offsetLeft
        针对于参考父级 的 顶部 与 左侧 的距离
        获取元素的 偏移量为 一个数字 没有单位

    3、获取元素的尺寸
        .offsetWidth/ .offsetHeight  元素的内容 + border + padding
        .clientWidth / .clientHeight  元素的内容 + padding

    4、获取浏览器的  窗口尺寸
        window.innerWidth / window.innerHeight   包含滚动条
        document.documentElement.clientWidth / document.documentElement.clientHeight / 不包含滚动条