js第十二天---DOM节点的概念和种类、操作//非行间样式

DOM树概念：DOM以树状结构出现的，方便开发人员获取，添加，删除和修改页面上的某一部分

DOM节点： 
DOM节点的概念：根据w3c，页面中的每一个部分都是一个节点，
DOM节点的种类：节点包含一共有12种，本节课就认识5种节点
              元素节点
              属性节点
              文本节点
              注释节点
              文档节点
DOM节点的获取（不经常用，会获取空格）
    父节点.childNodes  获取父节点中所有的子节点
    父节点.firstChild  获取父节点中第一个子节点
    父节点.lastChild   获取父节点中最后一个子节点
    节点.previousSibling 获取节点的下一个兄弟节点
    节点.nextSibling     获取节点的上一个兄弟节点
    节点.parentNode      获取节点的父节点

 DOM元素节点的获取（经常用）
    父节点.children      获取父节点中所有的子元素节点 
    节点.firstElementChild 获取父节点中第一个子元素节点
    节点.lastElementChild  获取父节点中最后一个子元素节点
    节点.previousElementSibling 获取节点的下一个兄弟元素节点
    节点.nextElementSibling     获取节点的上一个兄弟元素节点
    节点.parentElementNode      获取节点的父元素节点

DOM节点的操作：
    创建节点:document.createElement("标签名"), 返回一个元素节点
           
    删除节点: 
       语法1: 父节点.removeChild(子节点)
        含义: 把子元素从父元素中移除,
        语法2: 子节点.remove()
        含义:把子元素从页面里删除
    插入节点:
        语法:父节点.appendChild(子节点) 
       含义：将子节点插入到父节点内部，并且排列在最后位置
       语法2：insertBefore(子节点,谁的前面的谁)
        含义：将子节点插入到父节点内部，并且在第二个参数之前插入
    替换节点：
        语法：父节点.replacChild(新节点,老节点)
        作用：在父节点内，将老节点替换成新节点
    克隆节点：
        语法：节点.cloneNode(参数)
             ->参数：可选 false不克隆子代，
                      true克隆子代
DOM节点的属性：
    nodeType：节点类型
    nodeName：节点名称
    nodeValue：节点值

获取元素的各种尺寸
   元素的可视宽度(包含滚动条)：元素.clientWidth
   元素的可视高度(包含滚动条): 元素.clientHeight
   元素的占位高度: 元素.offsetWidth
   元素的占位高度: 元素.offsetHeight

   返回当前元素距离具有定位元素的左偏移量：元素.offsetLeft
   返回当前元素距离具有定位元素的上偏移量: 元素.offsetTop

获取元素的行间样式
   元素.style.属性名
   
获取元素的非行间样式
    非IE写法：
    window.getComputedStyle(oDiv,null)['width]
     
    IE写法：
    元素.currentStyle['width']

    获取非行间样式（获取行间）兼容性写法：
    function getStyle(obj,attr){
        if (obj.currentStyle) {
            return obj.currentStyle[attr]
        }else{
            return window.getComputedStyle(obj,null)[attr]
        }
    }