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 ("属性名");

javascript学习笔记DOM（2）