DOM( 文档对象模型 Document Object Model ) 是 JavaScript 操作HTML文档的接口, 使文档操作变得非常优雅 , 简便

 一.nodeType常用属性值

nodeType值 : 1 , 　　  是元素节点;

nodeType值 : 3 , 　    是文字节点;

nodeType值 : 8 , 　　 是注释节点;

nodeType值 : 9 , 　　 是document节点;   document对象 代表整个页面的总节点

nodeType值 : 10 , 　　是DTD节点;

二.节点获取

document.getElementById( )　　　　　　　　　  通过id得到元素       　　　　 IE6兼容

　　注意: 有多个相同id,只能得到第一个哦　　

        
我是一个盒子
        

document.getElementByTagName( )　　　　　　通过标签名得到元素数组        IE6兼容

        
我是一个盒子
        
        

document.getElementByClassName( )　　　　　 通过class得到元素数组       　IE9兼容

        
我是一个盒子
        
        

document.querySelector( )　　　　　　　　　　  通过选择器得到元素        　　IE8部门兼容,IE9完全兼容   基本用这种,方便

document.querySelectorAll( )　　　　　　　　    通过选择器得到元素数组         IE8部门兼容,IE9完全兼容

        
我是一个盒子
        
我是2个盒子
        
        

三.节点的关系

  关系　　　　　　　　所有节点　　　　　　　　只考虑元素节点( IE9开始兼容的 )

 子节点:　　　　　　childNodes　　　　　　　　　　children

 父节点:　　　　　　parentNode　　　　　　　　　　同

 第一个子节点:　　　firstChild　　　　　　　　firstElementChild

 最后一个子节点:　　lastChild　　　　　　　　 lastElementChild

 前一个兄弟节点:　　previousSibling　　　　　previousElementSibling

 后一个兄弟节点:　　nextSibling　　　　　　　nextElementSibling

 注意 : 文本节点也是子节点

    
        

            
我是段落
            
我是h1
            
我是段落
        
        
        
    

只考虑元素节点 ( 兼容IE6的 )

// 封装函数 : 可以返回元素的所有子元素节点（兼容到IE6），类似children的功能
        function getChildren(node) {
            // 结果数组
            var children = [];
            // 遍历node这个节点的所有子节点，判断每一个子节点的nodeType属性是不是1
            // 如果是1，就推入结果数组
            for (var i = 0; i < node.childNodes.length; i++) {
                if (node.childNodes[i].nodeType == 1) {
                    children.push(node.childNodes[i]);
                }
            }
            return children;
        }

// 封装函数 : 可以返回元素的前一个元素兄弟节点（兼容到IE6），类似previousElementSibling的功能
        function getElementPrevSibling(node) {
            var o = node;
            // 使用while语句
            while (o.previousSibling != null) {
                if (o.previousSibling.nodeType == 1) {
                    // 结束循环，找到了
                    return o.previousSibling;
                }

                // 让o成为它的前一个节点，就有点“递归”的感觉
                o = o.previousSibling;
            }
            return null;
        }

// 封装函数 : 可以返回元素的所有元素兄弟节点( 前面 和 后面)
        function getAllElementSibling(node) {
            // 前面的元素兄弟节点
            var prevs = [];
            // 后面的元素兄弟节点
            var nexts = [];
            
            var o = node;
            // 遍历node的前面的节点
            while(o.previousSibling != null) {
                if(o.previousSibling.nodeType == 1){
                    prevs.unshift(o.previousSibling);
                }
                o = o.previousSibling;
            }

            o = node;

            // 遍历node的后面的节点
            while(o.nextSibling != null) {
                if(o.nextSibling.nodeType == 1){
                    nexts.push(o.nextSibling);
                }
                o = o.nextSibling;
            }

            // 将两个数组进行合并，然后返回
            return prevs.concat(nexts);
        }

四.节点操作

　　1.改变元素节点中的内容: innerHTML( 可以加html ) ; inneText( 只能写文本 )

　　2.添加元素节点的CSS样式

　3.　改变元素节点的样式 ( 符合W3C标准的熟悉 )

　4. 改变不符合W3C的属性

　　　　setAttribute( )设置  和 getAttribute( ) 读取

　5. 元素节点的创建   document.createElement( ) 

　　　　document.createElement( 'div' )  这样创建出来的是' 空虚节点 ' , 并没有挂着到DOM树上;

　　　　所以 :  要继续使用 appendChild( )[追加,就是在追后] 或 insertBefore( ) 方法[在...元素之前] 将孤儿节点插入到DOM树上

　　　　父节点.appendChild( 空虚节点 ) :  空虚节点就成为父节点的最后一个子节点

　　　　父节点.appendChild( 空虚节点  ,  标杆节点) :  空虚节点就成为标杆节点之前的节点

    

        
我是原本的段落0
        
我是原本的段落1
        
我是原本的段落2
    
    

　6. 删除子节点　　removeChild( ) 从DOM中删除一个子节点

　　注意 : 节点不能主动删除自己 , 必须由父节点删除它

　　父节点.removeChild( 删除子节点 )

　7.克隆节点　　　cloneNode( ) 可以克隆节点,克隆的节点是孤儿节点

　　var 孤儿节点  =  老节点.cloneNode( );

　　var 孤儿节点  =  老节点.cloneNode( true );

　　参数是布尔值,表示是否采用深度克隆

　　　　true : 该节点的所有后代节点也都要被克隆

　　　　false: 只克隆该节点本身