一、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、表格隔行变色
未点击时的效果
点击一次
点击两次
点击一次删除(删除一行)