js DOM概念和操作节点

DOM的概念：DOCument Object Model（文档对象模型）
    DOM能做的三件事：
        操作元素
        控制元素的样式
        元素的交互响应
    DOM中使用JS的正确姿势
        1.JS直接写在HTML中
        2.JS与HTML分离
        3.把JS以及所有的交互响应从HTML中剥离

    改变行内样式
    document.getElementById                   id选择
    document.getElementsByTagName     标签选择
    document.getElementsByClassName   类名选择
    改变CSS样式
        document.querySelector('选择器名') ： 选择出符合选择器要求的第一个元素
        document.querySelectorAll()：选出所有符合选择器的元素
    
    innerText：用于设置文本内容，兼容谷歌，FF，IE8
    innerHTML：设置的是HTML原始字符串
    textContext：设置文本内容，谷歌，FF支持，IE不支持

节点：Node
    定义：nodeType   nodeName       nodeValue
              div.ChildNodes  里面有所有的Node
        children    里面只有元素
        parentNode  父节点
        parentElement   父元素 

        previousSibling  前一个Node；    在IE8上：后一个Element
        previousElementSibling 前一个Element；     在IE8上不支持
        nextSibling 下一个Node    在IE8上：下一个Element
        nextElementSibling  下一个Element    在IE8上不支持

        firstChild：在Chrome，Firefox上  ，第一个Node    在IE8上：第一个Element
        firsElementChild，在Chrome，FF上：第一个Element；在IE8上不支持
        lastChild：在Chrome，Firefox上  ，最后一个Node；在IE8上：最后一个Element
        lastElementChild，在Chrome，FF上：最后一个Element；在IE8上不支持
如何创建节点
    1.document.write: 如果在页面加载完毕以后再次调用，会把页面上以前已经有的所有元素全部清除（只用于页面加载时，页面加载完成后不再使用）
    2.对象.innerHTML
    3.document.createElement()    创建一个元素
        document.createAttribute 创建节点对象
        setAttributeNode    

        setAttribute(属性名,属性值)        创建属性
        getAttribute                                获取属性

         removeAttribute                        移除属性
    父节点.appendChild(子节点)    往父节点里添加一个子节点
如何删除/改动节点
    DOM删除
        remove 
        父元素.removeChild(子元素)
    DOM改动    
        replaceChild(p1,p)：把p替换成p1