js的节点

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

DOM节点： 
DOM节点的概念：根据w3c，页面中的每一个部分都是一个节点，
DOM节点的种类：节点包含一共有12种，本节课就认识5种节点
              元素节点 1
              属性节点 2
              文本节点 3
              注释节点 8
              文档节点 9

如何获取节点： 通过节点关系（父子关系，兄弟关系）来获取
	父节点.firstChild: 获取父元素的第一个子节点
	节点.nextSibling: 节点的下一个兄弟节点
	节点.previousSibling: 节点的上一个兄弟节点
	父节点.lastChild: 父节点的最后一个子节点
	节点.parentNode: 节点的父节点
	父节点.childNodes: 获取所有的子节点（伪数组）
获取元素节点：
	父节点.firstElementChild: 获取父元素的第一个元素节点
	节点.nextElementSibling: 节点的下一个兄弟元素节点
	节点.previousElementSibling: 节点的上一个兄弟元素节点
	父节点.lastElementChild: 父节点的最后一个子元素节点
	节点.parentElement: 节点的父元素节点（兼容性不好，不用它）
	父节点.children: 获取所有的子元素节点（伪数组

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]
        }
    }

1.创建节点：
 语法：document.createElement（'标签名'）
 返回值：创建好的元素节点
 2.追加节点：
 语法：父节点.appendChild(子节点)
 含义：将子节点追加到父节点到尾部
 例子：document.body.appendChild(子节点)
 3.插入节点
 语法：父节点.insertBefore（子节点，谁的前面的谁）
 含义：将子节点插入到父节点的指定位置
 例子：oBox.insertBfore(oBtn,oBox,firstChild):将button插入到oBox的头部
   4. 替换节点
 语法：父节点.replaceChild(新节点,旧节点(位置))  不常用
 5. 删除节点：
            语法：父节点.removeChild(子节点)
                 节点.remove()    最常用
  6. 克隆节点
            语法：节点.cloneNode(true/false)
            作用：克隆出来一个节点
                  true:代表克隆元素本身和元素的子元素以及后台
                  false:代表克隆元素本身