BOM进阶

1.创建节点:createElement

只会在内存中显示，不会在页面中显示
var oBtn = document.getElementById("btn");
oBtn.onclick = function(){
    var newLi = document.creatElement("li");
    console.log(newLi)
}

2.节点添加内容:createTextNode

给节点添加内容：
      - 创建文本节点 并插入到元素节点中
      - document.createTextNode("文本内容");
      var oBtn = document.getElementById('btn');
      oBtn.onclick = function () {
  //创建一个元素，这个元素对象会存放在内存中，并不会在页面中出现
      var newLi = document.createElement("li");
      console.log(newLi)
      //创建一个文本节点  保存在内存中  需要插入到元素中
      var newLiCon = document.createTextNode("新的li");
      console.log(newLiCon)
        }

3.插入节点: A.appendChild(B)

A.appendChild(B)
     -在A元素内部的末尾 添加节点B
A.insertBefore(new,old);
     -new和old都是A的子节点
     -把new插入到old的前边
     -new和old是兄弟关系
把已经存在的元素插入到父元素的最下边，会产生覆盖，其实和调换位置一样

4.复制节点:A.cloneNode()

A.cloneNode();  复制的A节点
cloneNode参数：
      -true：深复制当前节点 及内部子节点
      -false：浅复制当前节点 不会复制内容子节点

5.删除节点

A.removeChild(B);  在A中 删除元素B   B是A的子元素
B.remove();  直接删除B节点    

6.替换节点

A.replaceChild(new,old)
A是new和old的父级
把new来替代old

7.元素内容操作（innerHTML…)

innerHTML：设置和获取元素内容
    - 设置的时候:可以把标签解析，并且覆盖原来内容(可以进行加标签)
    - 获取的时候:可以把标签都获取出来
innerText：设置和获取元素内容
    - 设置的时候:不会解析标签，把标签当做普通字符串(加不了标签)
   	- 获取的时候:不会获取到标签
textContent：设置和获取元素内容（IE9+）
  	- 设置的时候:和innerText一致
  	- 获取的时候：和innerText一致，获取的时候可以获取到空格换行等
outerHTML:
  	-设置：把当前元素直接替换  其他和innerHTML一致
  	-获取：也可以获取到当前的标签  其他和innerHTML一致
outerText:
  	-设置：替换当前元素 不解析标签
  	-获取：获取当前元素 只获取内容 和innerText结果一致

8.元素属性分类

元素的属性分类：
    - 自有属性：元素自带的一些属性
    - 设置和获取的时候：元素.属性名
    - 当有的属性名和js的关键字保留字冲突的时候，需要适当的修改，比如class，当获取和设置的时候使用className
    - 自定义属性：
    - 不能直接通过 元素.属性名 来操作
    - 可以设置成功，但是是把元素当做了一个对象 设置了属性或方法，并没有设置给DOM节点上

9.元素自定义属性

自定义属性的添加 删除 获取 修改
            添加：
                setAttribute(key,value);
            获取：
                getAttribute(key)
            删除：
                removeAttribute(key);
            修改：
                直接设置覆盖即可

10.HTML5自定义属性

首先html5规定，自定义属性需要用data-*为前缀
   使用html5规定设置自定义属性的时候，也会自动添加data-*前缀
   每一个元素都有一个dataset属性，这个属性是一个对象，包含了当前元素所有的自定义属性的key-value值
   只要对元素的dataset属性操作，则就可以对当前元素的自定义属性操作了

11.事件流

W3C事件流分三个阶段执行：
1. 捕获阶段，元素从最不精确的元素 相继执行到 最精确的目标元素
2. 目标阶段，执行目标元素的事件
3. 冒泡阶段，元素从最精确的元素 相继执行到 最不精确的元素
4. W3C提供了新的事件模型，我们可以规定元素的事件在哪一个阶段执行

12.基本事件模型特点

动态绑定：把一个函数赋值给了事件属性，并且当事件发生的时候，函数自动执行，也就是我们常用的on事件
oBtn.onclick = function(){};
静态绑定：
function fn(){
	alert(1);
}
基本事件模型的特点：
1.对同一个元素绑定事件多次，则会覆盖 
oCon.onclick = function () {
            alert(1);
        }
oCon.onclick = function () {
            alert(2);
        }//只输出 2 
2.默认冒泡
<div id="outer">
        outer
        <div id="inner">
            inner
            <div id="con">con</div>
        </div>
</div>
oCon.onclick = function () {
            alert(1);
        }
        oInner.onclick = function () {
            alert(2);
        }
        oOuter.onclick = function () {
            alert(3);
        }

13.DOM2S事件模型

DOM2事件模型：（注册事件，事件监听）(IE9+)
     - 使用 Ele.addEventListener();
     - 参数1：事件名（不带on）
     - 参数2：事件函数
     - 参数3：布尔值 代表捕获或者冒泡（true捕获 false冒泡）
特点：
     - 可以给同一个元素绑定多次事件
     - 可以控制冒泡和捕获
     - DOM2也提供了一些事件，只能通过DOM2的方式绑定事件 比如DOMContentLoaded事件
移除DOM2事件：
     - removeEventListener()
     - 参数1:移除的是哪一个事件
     - 参数2：移除的是当前事件的哪一个事件函数

14.IE事件模型

绑定事件：attachEvent();只支持冒泡
    - 参数1:on+事件名
    - 参数2:事件函数
    
移除事件detachEvent():
    - 参数1：on+事件名
    - 参数2：事件函数

15.DOMContentLoaded事件

onload:当节点及所有的资源全部加载完成以后触发
DOMContentLoaded事件：
    当节点加载完成以后触发 不需要等待资源加载
    <div id="outer">
        <img src="../images/01.jpg" alt="">
    </div>
window.onload = function () {
    var oImg = document.querySelector('#outer img');
            console.log(oImg)
            console.log("*************")
            console.log(oImg.offsetWidth)
        }
window.addEventListener("DOMContentLoaded", function () {
     var oImg = document.querySelector('#outer img');
            console.log(oImg)
            console.log("----------")
            console.log(oImg.offsetWidth)

16.event事件模型

event事件对象：
    - event对象由事件自动创建,记录了当前事件的状态
	//由even获取的标签名全部为大写，包括如果你要使用抓取元素名，也得大写比如
    //if(e.target.nodeName === "LI")
    //(e.target.nodeName.toLowrCase() === "li"

获取event事件对象：
    - W3C规定，在事件发生的时候，会自动的向事件函数传递一个实参，这个实参是event事件对象
    - IE8以下：直接把事件对象放在了window对象上，在事件中获取window.event即可获取
    - event对象中有一个target属性，代表当前事件发生的目标元素
  var oBox = document.getElementById('box');
  //直接在事件函数中书写一个形参，就可以接受到event事件对象
        oBox.onclick = function (e) {
            // console.log(e);
            // console.log(window.event);

            //兼容性：
            var e = e || window.event;
            console.log(e);
        }

17.even事件对象属性

clientX:  获取事件发生位置 到 视口的 距离  
offsetX:  获取事件发生位置 到 精确的目标元素边缘的距离
pageX:  获取事件发生位置 到 文档边缘的距离
screenX: 获取事件发生位置 到 电脑屏幕边缘的距离
//直接在事件函数中书写一个形参，就可以接受到event事件对象
        oBox.onclick = function (e) {
             console.log(e.clientY);
             console.log(e.offsetX);
             console.log(e.pageY);
             console.log(e.screenY);

18.图片随鼠标移动案例

 <style>
        img {
            width: 30px;
            height: 40px;
            position: fixed;
            left: 0;
            top: 0;
        }
    </style>
</head>
    <img src="../img/x1.jpg" alt="">
    <script>
        var oImg = document.querySelector('img');
        document.onmousemove = function (e) {
            oImg.style.left = e.clientX + "px";
            oImg.style.top = e.clientY + "px";
        }
    </script>

19.阻止冒泡

event.stopPropagation()

20.阻止传播

主流浏览器：e.stopPropagation();
低版本IE：e.cancelBubble = true
<div id="outer">
        <div id="inner"></div>
</div>
var oInner = document.getElementById('inner')
var oOuter =document.getElementById('outer')
        oOuter.onclick = function(){            
            console.log("1");
        }
        oInner.onclick = function(e){
            e.stopPropagation();
        }

21.阻止默认事件

默认事件：
   - 表单默认提交
   - 右键菜单
   - 选中文字
在有的时候还不需要这些默认事件，则需要阻止默认事件
    主流：e.preventDefault();
    IE：e.returnValue = false;
还有一个简单粗暴的阻止默认事件：
    return false;
但是必须写在最后一行，否则return就会立即退出函数
var oForm = document.getElementById('form');
        oForm.onsubmit = function(e){
            return false;//表单不会被提交
        }

22.键盘事件的event

keyCode可以拿到键码，上下左右键码：38.40.37.39
document.onkeydown = function (e) {
            if (e.keyCode === 39) {
				alert(1)
            }
        }

23.事件委托

事件委托、事件代理、事件托管：
    -什么叫事件委托：
    -事件就是绑定的普通事件，委托就是不绑定给目标元素，而是绑定给父元素或祖辈元素
    -event对象中有一个target属性，代表当前事件发生的目标元素
事件委托的原理：
	-冒泡
事件委托的优点：    
    - 减少for循环，提高效率
    - 可以给未来的元素绑定事件
利用事件委托其实是为了规避冒泡，防止点击子元素的时候，父元素也激活点击效果

24.滚轮事件

谷歌/ie：
    onmousewheel事件
        上滚：wheelDelta:120
        下滚：wheelDelta:-120
火狐：
    DOMMouseScroll事件
        上滚：detail -3
        下滚：detail 3
兼容性书写
 var oBox = document.getElementById('box');
        var boxWidth = 100;
        function scrollFn(e) {
            //特征检测法 检测是什么浏览器
            if (e.wheelDelta) {
                //谷歌浏览器
                if (e.wheelDelta > 0) {
                    boxWidth++;
                } else {
                    boxWidth--;
                }
            } else {
                //火狐浏览器
                if (e.detail < 0) {
                    boxWidth++;
                } else {
                    boxWidth--;
                }
            }
            oBox.style.width = boxWidth + "px";
        }
        oBox.addEventListener("DOMMouseScroll", scrollFn, false)
        oBox.onmousewheel = scrollFn;

25.创建文档碎片节点

 /* 
重绘重排：
 		重排（回流）：当render tree中的一部分或者是全部，因为元素的尺寸、布局、隐藏等等改变引起页面的重新渲染，这个过程称作为重排
        重绘：当render tree（渲染树）中更新的属性只会影响元素的外观、风格，不会影响元素的布局的时候，浏览器需要重新绘制当前元素的样式，被称作为重绘。
重绘不会引起重排，但重排一定会引起重绘

文档碎片节点：
     - DocumentFragment是一个虚拟的节点类型，仅仅存在于内存中，没有添加到文档树中，所以看不到渲染效果
     - 使用文档碎片的好处，就是减少浏览器多次渲染和占用资源
     - 当文档片段设计完善后，再使用js一次性添加到文档树中显示出来，提高效率，减少页面重绘的次数。解决大量添加节点时候的性能问题
*/
<button id="btn">点击</button>
    <ul id="outer"></ul>
    <script>
        //文档碎片节点：documentFragment是一个虚拟节点类型，仅仅存在与内存
        var oBtn = document.getElementById('btn');
        var oOuter = document.getElementById('outer')
        var frag = document.createDocumentFragment()
        //创建虚拟节点
        oBtn.onclick = function(){
     for(var i = 0; i < 100; i++){
       var newLi = document.createElement("li")//创建一个li节点
       newLi.innerHTML = "li";//往newLi中插入li
       frag.appendChild(newLi);
         //把newLI存入文档碎片节点中
            }
            oOuter.appendChild(frag)//当frag完成后，把碎片节点插入ul中
        }
    </script>