DOM操作总结

DOM：Document Object Model  文档对象模型

1.DOM树：所有的HTML标签在JS中的DOM中都是以树状结构存在的。

2.DOM节点：是DOM的最基本组成单元。（指的是：HTML中的标签）

3.node type    查看元素的节点类型。

返回值：1——元素节点

                2——属性节点

                3——文本节点

                8——注释节点

                9——document节点

4.nodeName  查看元素节点的名称（返回值是全大写的）。

5.nodeValue  查看节点的值。

6.  <1> . childNodes 元素的子元素节点（兼容性问题：在标准浏览器及IE9以上，会将元素之间的换行解析为一个空白文本节点；

                 在低级浏览器下不会解析为空白文本节点。）；

     <2>. children元素的子元素节点（不存在兼容性问题）（不会把元素之间的换行解析成空白文本节点）。

              childNodes 是标准属性；children 是非标准属性（但是比childNodes好用）；

              返回值是所有子元素的集合；

                children[0]获取第一个子元素节点。

7.  <1> . firstChild  获取指定元素的第一个子元素节点（在标准浏览器及IE9以上能获取到空白文本节点）；

     <2>.  firstElementChild 获取指定元素的第一个子元素节点，不包含空白文本节点（IE6.7.8不支持此方法）；

解决兼容性方法：

方法一：

if(box.firstElementChild){
        alert(box.firstElementChild);
}else{
        alert(box.firstChild);
}

方法二：

function getFirst (obj) {
        return obj.firstElementChild ? obj.firstElementChild : obj.firstChild;
};
var result = getFirst(oBox)
alert(result);

如果不支持firstElementChild ，说明浏览器是IE6.7.8，这时可以用firstChild。

8. <1> . lastChild获取指定元素的最后一个子元素节点；

    <2> . lastElementChild获取指定元素的最后一个子元素节点。

     （与第7条的兼容性相同）

9. <1> .nextSibling 获取指定元素的下一个兄弟节点；

    <2> .nextElementSibling获取指定元素的下一个兄弟节点。

     （与第7条的兼容性相同）

10.<1> .previousSlibing 获取指定元素的上一个兄弟元素节点；

     <2> .previousElementSlibing获取指定元素的上一个兄弟元素节点。

     （与第7条的兼容性相同）

11. parentNode 获取指定元素的父元素节点。（无兼容性问题）

12. offsetParent 获取指定元素的定位父节点。

13. <1> offsetLeft 获取指定元素边界的左边相对于其定位父级的左边的距离（left + margin-left);

       <2> offsetTop 获取指定元素边界上边相对于其定位父级的上边的距离（top +margin-top)。

14. offsetWidth 获取元素的绝对宽度（width + borderwidth*2 + padding*2)。

15. clientWidth 获取元素可视区的宽度（width + padding*2);

     clientHeight 获取元素可视区的高度。

16. 操作元素的三种方式：

     <1> 一个点 ....的

     <2> 中括号 ....的（动态的，不确定的用中括号）

     <3> 获取：getAttribute( )  

     设置：setAttribute（）　设置的属性体现在HTML标签上，设置的属性不需要考虑JS保留字的问题。

     删除属性：removeAttribute( )

17. .createElement( ) 创建一个元素（DOM节点） 如：创建一个div标签 var div = document.createElement('div');

18. .appendChild( ) 往指定节点下添加一个子节点。

19. .insertBefore( ) 把某节点移动到指定节点的前面。

20. .removeChild( ) 删除某个子节点。

21. .replaceChild( ) 替换某个子节点。