原生js操作dom

操作元素节点：

 1）.创建元素节点：
    document.createElement("ul");   创建一个ul元素节点
2）.插入元素节点
    appendChild();  body.appendChild(ul);
    insertBefore();   在DOM树上某个节点前面操作
3）.删除元素节点
    div.remove("ul");
4）.复制元素节点
    cloneNode();  深复制  和  浅复制
        深复制（深copy）：完全复制一个完整的元素节点
        浅复制（浅copy）：仅仅复制当前元素，不包含里面的任何东西
5）.替换（修改）元素节点
    replaceChild();

操作属性节点：

1）方式一：
    打点   div.title 
    例如：  div.title = "xx"
2）方式二：
    getAttribute()（获取元素节点）
    setAttribute()（设置元素节点）
    两种方式的不同：打点操作只能用于标签已定义好的属性，而方式二可以用于标签已定义好的属性和程序员自己写的属性。

操作文本节点：

获取文本节点：div.innerHTML;
设置文本节点：div.innerHTML = "hello jq";

学习DOM就学习四块内容：

1. 操作节点   你需要掌握10个API。
    操作元素节点
    操作属性节点
    操作文本节点
2. 操作CSS
    1)操作CSS类    className
        div.className = "xx"  // 设置一个新类
        div.className = ""  // 把div上的css类清空
        div.className  // 获取div上都有哪些类

        let div = { name:"wc" }
        div.name = "xq";  // 设置一个新值
        div.name = "";   // 设置（把属性值赋成空）
        div.name;   获取属性
    2)操作CSS行内样式：
       

       操作行内样式，就是操作style属性节点
       div.style.display = "block"
3. 事件
   在DOM中，事件绑定有三种形式：
    1）html级别的事件绑定  把事件当成了标签的属性
        点击
    2）dom0级别的事件绑定
        eye.onclick = function(){}   就是给onclick属性赋值
        后面再赋值就覆盖
        问DOM0级别事件绑定的原理：给属性赋值
    3）dom2级别的事件绑定   推荐使用它
        eye.addEventListener("click",function () {})
        基于事件池机制，可以给事件源绑定多个相同的事件
    ** 事件对象 **
      本质是一个对象。eg:.box.onclick=function(e){}
      上面的监听器当事件发生时，浏览器会帮我们调用这个函数，在调用时会进行参数的传递，浏览器会把一个对象传递到这个函数中，e是形参，e就接收了这个对象，这个对象就叫事件对象。
      事件对象中浏览器调用监听器传递的实参，e仅仅是形参，也就是说形参命名随便写，通常我们会写e,event,ev...
    **事件冒泡**
    有时候，我们不想事件冒泡：
    可以利用事件对象中的一个api，阻止事件冒泡。
    son.onclick = function (e) {
      e.cancelBubble = true
      console.log("son...")
    }
    box.onclick = function (e) {
      console.log("box...")
    }
4. 定时器
  1)一次性定时器：
    window.setTimeout(()=>{},1000);
    关闭：clearTimerout();
  2)循环定时器
   window.setInterval(()=>{},1000);
   关闭：clearInterval()
   每隔1s执行里面的回调函数循环定时器要产生很多EC，如果不用了，一定要关系定时器。

js操作盒子模型

1）client系列:
1. clientWidth: 获取box的内容区域width+左右padding （可视区域width的大小）
2. clientHeight:获取box的内容区域height+上下padding （可视区域height的大小）
3. clientTop:获取盒子的上边框大小
4. clientLeft:获取盒子的左边框大小

问：我要获取当前页面一屏的宽度（可视区）
答：1）document.body.clientWidth   2）document.documentElement.clientWidth

问：我要获取当前页面一屏的高度（可视区）
答：1）document.body.clientHeight   2）document.documentElement.clientHeight

注意：
    1）clientWidth,clientHeight,clientTop,clientLeft只能获取值，不能设置值
    2）获取的值，是一个数字，并没有单位
    3）获取的值是一个整数，不是小数，即使是小数，获取时，也给转化成整数
    4）client系列不官你的内容是否溢出，得到盒子的可视区域

2）offset系列
1. offsetWidth: box.offsetWidth 在clientWidth的基础上加了border
2. offsetHeight: box.offsetHeight 在clientHeight的基础上加了border
3. offsetTop: 放一下 获取一个绝对定位元素相对于参考点上面的距离
4. offsetLeft: 放一下 获取一个绝对定位元素相对于参考点左面的距离
5. offsetParent(***): 放一下 获取一个绝对定位元素的参考点
3）scroll系列:
1. scrollWidth:
在没有内容溢出的情况下：scrollWidth = clientWidth
在内容溢出的情况下：scrollWidth的值约等于真实内容的宽度，不同浏览器中得到的值可能不一样
overflow属性会影响scrollWidth。
只能获取值，不能设置值
2. scrollHeight:
在没有内容溢出的情况下：scrollHeight = clientHeight
在内容溢出的情况下：scrollHeight的值约等于真实内容的高度，不同浏览器中得到的值可能不一样
overflow属性会影响scrollHeight。
只能获取值，不能设置值

    问：我要获取当前页面真实内容的高度。
       答：1）document.body.scrollHeight   2）document.documentElement.scrollHeight
3. scrollTop:
    获取垂直滚动条滚动的距离（获取垂直滚动条卷去的高度）
    特殊：不只可以获取，也可以设置（可读可写）  重要

    问：我要获取当前页面卷上去高度。
       答：1）document.body.scrollTop   2）document.documentElement.scrollTop

    问：一张网页卷上去最大高度是多少？
       答：scrollHeight - clientHeight
4. scrollLeft:
    特殊：不只可以获取，也可以设置（可读可写）
    获取水平滚动条滚动的距离（获取水平滚动条卷去的距离）