DOM
DOM元素的类型
节点类型 节点名称 节点值
nodeType nodeName nodeValue
元素节点 文本节点 注释节点 document
nodeType 1 3 8 9
nodeName 大写的标签名 #text #comment #document
nodeValue null 文本内容 注释内容 null
1)IE6~8不会将空格和Enter当作节点,但是其他浏览器会把他当作文本节点
2)HTML中元素节点的nodeName是大写标签名,但是在XHTML或者XML中,我们的标签名写的是大写他就是大写,写的是小写他就是小写
DOM节点的关系
通过DOM节点的关系可以准确的找到想要的元素
(比如想要找你的爷爷直接找到你的爸爸的爸爸就可以了。想要找你的堂弟可以找到你爸爸然后找到你爸爸的兄弟,再找他的儿子)。
1、childNodes 获取所有的子节点 (节点:元素)
2、children 获取所有的元素子节点
3、parentNode 获取父亲节点
4、previousSibling 获取哥哥节点
5、nextSibling 获取弟弟节点
6、firstChild 获取第一个子节点
7、lastChild 获取最后一个子节点
DOM的操作
1、创建DOM元素
document.createElement("标签");
用于创建一个新的DOM元素,接收一个标签名。来创建这个类型的DOM元素
2、在元素最后添加DOM元素
appendChild
将一个元素对象添加到指定的区域内,并且在最后面的位置
语法:父亲元素.appendChild(要添加的元素对象)
3、在某元素之前添加DOM元素
insertBefore
将一个元素对象(新对象)放在指定对象(已有对象)前面
语法:已有对象.parentNode.insertBefore(新对象,已有对象);
4、替换元素
replaceChild
用一个新的元素把旧的元素替换掉
语法:旧元素.parentNode.replaceChild(新元素,旧元素);
5、复制元素
cloneNode
把已有的元素复制一个。
语法:要复制的元素.cloneNode(TRUE/FALSE);
需要一个boolen类型的参数。 true:包括所有的子元素都一同复制 false,只复制当前的元素没有子元素
6、删除元素
删除指定的元素
语法:要删除的元素.parentNode.removeChild(要删除的元素);
动态创建DOM节点耗性能,我们尽量少用
设置自定义属性
setAttribute
setAttribute有两种使用方法。
1)如果传两个参数的话是直接设置自定义属性的值。
2)如果传的参数只有一个,则获取这个属性上绑定的值。
setAttribute 设置class的属性,IE6~8不兼容
removeAttribute 删除属性
removeAttribute ("属性名");