【JavaScript基础12】

 DOM节点:

          1.什么叫节点：w3c，页面上所有的内容都可以称为节点，DOM的最小单元就是节点:

                         (标签：元素节点:  nodeType 1)******

                         (属性：属性节点： nodeType 2)

                         (文本：文本节点： nodeType 3)

                         (注释：注释节点： nodeType 8)

                         (文档：文档节点： nodeType 9)

          2.DOM以树状的形式出现（倒立的树），方便程序员对dom进行增删改查

          3.如何获取节点： 通过节点关系（父子关系，兄弟关系）来获取:

                 父节点.firstChild: 获取父元素的第一个子节点

                 节点.nextSibling:  节点的下一个兄弟节点

                 节点.previousSibling:  节点的上一个兄弟节点

                 父节点.lastChild:  父节点的最后一个子节点

                 节点.parentNode: 节点的父节点

                 父节点.childNodes: 获取所有的子节点（伪数组）

              4.获取元素节点：

                 父节点.firstElementChild: 获取父元素的第一个元素节点

                 节点.nextElementSibling:  节点的下一个兄弟元素节点

                 节点.previousElementSibling:  节点的上一个兄弟元素节点

                 父节点.lastElementChild:  父节点的最后一个子元素节点

                 节点.parentElement: 节点的父元素节点（兼容性不好，不用它）

                 父节点.children: 获取所有的子元素节点（伪数组）
 

    节点的种类：12种

      元素节点

      属性节点

      文本节点

      注释节点

      文档节点

    节点的共有属性：

        节点.nodeType:

            元素节点  1  (**)

            属性节点  2

            文本节点  3

            注释节点  8

            文档节点  9

        节点.nodeName

            元素节点的nodeName值都是大写的标签名

        节点.nodeValue

节点的 操作：

      1. 创建节点：

           语法：document.createElemet('标签名')

           返回值：创建好的元素节点

      2. 追加节点：

           语法：父节点.appendChild(子节点)

           含义：将子节点追加到父节点的尾部

           例子：document.body.appendChild(子节点)

     

      3. 插入节点

           语法：父节点.insertBefore(子节点, 谁的前面的谁)

           含义:将子节点插入到父节点的指定位置

           例子：oBox.insertBefore(oBtn,oBox.firstChild); 将button插入到oBox的头部

       4. 替换节点

           语法：父节点.replaceChild(新节点,旧节点(位置))  不常用

       5. 删除节点：

           语法：父节点.removeChild(子节点)

                 节点.remove()    最常用

       6. 克隆节点

           语法：节点.cloneNode(true/false)

           作用：克隆出来一个节点

                  true:代表克隆元素本身和元素的子元素以及后台

                  false:代表克隆元素本身

获取行间样式：oDiv.style.width

      获取非行间样式：

        非IE浏览器写法：window.getComputedStyle(oDiv,null)['width']

        IE浏览器写法：oDiv.currentStyle["width"]

    非行间样式的获取：只能通过window.getComputedStyle(oDiv,null)['width']

    行间样式的获取：window.getComputedStyle(oDiv,null)['width']

              odiv.style.width