【12-14】DOM节点相关

一、DOM节点

1、什么叫节点：

W3C，页面上所有的内容都可以称为节点，DOM的最小单元就是节点

标签：元素节点  =====>nodeType  1

属性：属性节点  =====>nodeType  2

文本：文本节点  =====>nodeType  3

注释：注释节点  =====>nodeType  8

文档：文档节点  =====>nodeType  9

nodeType为节点类型，可以根据它来判断获取出来的节点的类型，也可以根据它只获取某一类型的节点

举例：只获取元素节点

2、如何获取节点：

通过节点关系（父子关系、兄弟关系）来获取

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

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

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

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

        // 节点.parentNode: 节点的父节点

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

3、获取元素节点

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

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

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

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

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

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

---

举例

---

二、节点操作

 1、创建节点

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

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

    只有创建节点又返回值

    2、追加节点

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

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

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

    3、插入节点

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

        含义：将子节点插入到父节点的指定位置(将子节点插入到谁前面)

        举例：oBox.insertBefore(oBtns,oBox.firstChild) ==>将button插入到oBox的头部

    4、替换节点

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

    5、删除节点

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

              节点.remove()   ===>常用方法

    6、克隆节点

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

        作用：克隆出来一个节点

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

              flase：代表克隆元素本身

---

举例

---

三、获取样式

1、获取行间样式：

        oDiv.style.width

2、获取非行间样式：

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

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

3、非行间样式的获取：

        只能通过window.getComputedStyle(oDiv,null)['width']

4、行间样式的获取：

       window.getComputedStyle(oDiv,null)['width']

        odiv.style.width

---

四、课堂例题

1、动态生成表格

效果如下

 

 2、表格隔行变色

 

未点击时的效果

 点击一次

 点击两次

点击一次删除（删除一行）