js总结篇中 （看完你就学会整个js）

1.DOM

DOM全称document object model
    文档
        整个HTML文件就是一个文档
    对象
        HTML文件中的每个节点都在JS中是一个对象
    模型
        JS使用模型来表示各个对象之间的关系
    JS中有宿主对象document，它是window对象的属性，也就是文档对象本身
    DOM中的对象又称为节点对象，共有4种节点分别为：
        每个节点中都拥有三个属性分别是:
                    nodeName      nodeType     nodeValue
        文档节点    #document       9               null

        元素节点     标签名          1               null

        属性节点      属性名         2               属性值

        文本节点      #text         3               文本内容
    常用属性：
        1.body
            该属性封装的是body元素对象的引用
        2.documentElement
            属性值为HTML元素对象
        3.all
            属性值为当前页面中的所有元素节点的数组
            这个属性值本身为undefined，它的typeof值也为undefined
    常用方法：
        语法：
            document.方法();
        1.getElementById()
            通过ID值获取对应的节点
        2.getElementsByTagName()
            通过标签名获取一组节点
            返回值是一个HTMLCollection，与数组相似，不能使用forEach方法，即使只获取到一个节点时，也封装成HTMLCollection返回
        3.getElementsByName()
            通过name的值获取一组节点
            返回值是一个nodelist，与数组相似，可以使用forEach方法，即使只获取到一个节点时，也封装成nodelist返回
        4.getElementsByClassName()
            通过class属性获取一组节点
            返回值是一个HTMLCollection，与数组相似，不能使用forEach方法，即使只获取到一个节点时，也封装成HTMLCollection返回
            仅支持IE8以上
        5.querySlector()
            通过CSS选择器返回一个节点，当能匹配多个节点时，返回满足匹配的第一个节点
            仅支持IE7以上
        6.querySlectorAll()
            通过CSS选择器返回一组节点
            返回值是一个nodelist，与数组相似，可以使用forEach方法，即使只获取到一个节点时，也封装成nodelist返回
            仅支持IE7以上

2.事件

当用户与浏览器进行任何交互时都会产生相应的事件
    JS可以通过给事件绑定相应函数来使事件触发时执行相应的函数,相应函数会在执行事件时才会被执行，因此相应函数内部使用的变量可能会与预期不一致
        var div = document.getElementByTagName("test");
        for(var i = 0; i < div.length; i++){
            div[i].onclick = function(){
                console.log(i);
            }
        }
        结果永远会是div的长度的值
    绑定事件有两种方法：
        第一种：
            <button id="btn" onclick="alert('a')"></button>
            结构与行为耦合，不使用  
        第二种：
            <button id="btn"></button>
            <script>
                var btn = document.getElementById("btn");
                btn.onclick = function(){
                    alert("a");
                }
            </script>
      
文档加载顺序
    浏览器加载HTML文件时是自上向下加载，因此当js代码写在文档之前时可能需要无法获取到节点的情况
    使用window.onload绑定响应函数可以使响应函数内的代码都在整个文档加载完成之后执行
    或者将JS代码写在HTML文档的最后来保证文档先于JS代码加载 

3.元素节点

元素节点
    元素节点拥有一个方法和属性来获取它们内部的节点,除了元素的class属性以外,所有的属性都可以以元素节点对象属性的方式获取,class的值需要用className属性来获取，因为class是js中的保留字
    常用方法：
        1.getElementById()
            通过ID值获取当前元素节点内部对应的节点
        2.getElementsByTagName()
            用来获取当前元素节点内部的特定标签的元素节点
            返回值是一个HTMLCollection，与数组相似，不能使用forEach方法，即使只获取到一个节点时，也封装成HTMLCollection返回
        3.getElementsByName()
            通过name的值获取当前元素节点内部的一组节点
            返回值是一个nodelist，与数组相似，可以使用forEach方法，即使只获取到一个节点时，也封装成nodelist返回
        4.getElementsByClassName()
            通过class属性获取当前元素节点内部的一组节点
            返回值是一个HTMLCollection，与数组相似，不能使用forEach方法，即使只获取到一个节点时，也封装成HTMLCollection返回
            仅支持IE8以上
        5.querySlector()
            通过CSS选择器返回当前元素节点内部的一个节点，当能匹配多个节点时，返回满足匹配的第一个节点
            仅支持IE7以上
        6.querySlectorAll()
            通过CSS选择器返回当前元素节点内部的一组节点
            返回值是一个nodelist，与数组相似，可以使用forEach方法，即使只获取到一个节点时，也封装成nodelist返回
            仅支持IE7以上
    常用属性：
        innerHTML
            获取当前元素节点中的HTML代码
        innerText
            获取当前元素节点