JavaScript文档对象模型DOM

节点关系属性：（带element的属性ie低版本不支持）

childNodes—所有子节点（元素，注释，文本）；
nodeType——属性代表节点类型；
children——获取元素子节点
firstChild——第一个子节点（元素，注释，文本）
*firstElementChild ——第一个元素子节点
lastChild ——最后一个子节点 (元素,注释,文本)
*lastElementChild ——最后一个元素子节点
parentNode——父元素
offsetParent ——定位父级
previousSibling ——上一个兄弟节点
*previousElementSibling ——上一个元素兄弟节点
nextSibling ——下一个兄弟节点
*nextElementSibling ——下一个元素兄弟节点

节点操作（增删改）：

创建节点——document.createElement('div')

        > document.createElement('div') 创建元素节点

        > document.createTextNode('文本') 创建文本节点

        ```
            var newLi = document.createElement('li');
            newLi.innerHTML = '444';
        ```

在元素的末尾添加项——parent.appendChild(child)

        ```
            var ul = document.getElementsByTagName('ul')[0];
            ul.appendChild(newLi);
        ```

在指定元素之前插入节点——oldNode.parentNode.insertBefore(newNode,oldNode);

        ```
            var li2 = document.getElementById('li2');
            var newLi1 = document.createElement('li');
            newLi1.innerHTML = '1-21-2';
            li2.parentNode.insertBefore(newLi1,li2);

        ```

替换元素——replaceChild(newNode,oldNode)

        * 如果newNode是已经存在的标签,就是改变标签的物理位置
        ```
            var newLi2 = document.createElement('li');
            newLi2.innerHTML = '三三三';
            var li3 = document.getElementById('li3');
        
            //ul.replaceChild(newLi2,li3);
            li3.parentNode.replaceChild(newLi2,li3);
        ```

删除节点——removeChild(delNode)

        ```
            var li5 = document.getElementById('li5');
            //ul.removeChild(li5);
            li5.parentNode.removeChild(li5);
            // li5.remove(); ie不支持
        ```

复制节点——cloneNode()

        > cloneNode()  克隆节点,不传参,只复制标签本身,不包括内容
        
        > cloneNode(true)  深度克隆,复制标签及标签里面的所有内容

获取元素的方法：

- document.getElementById()

- document.getElementsByTagName() //[]

- document.getElementsByClassName() //[] ie低版本不支持

        ```
        //封装兼容所有浏览器的通过类名获取元素的方法
            function getByClass(ele,cls){
                //先获取ele中所有标签(不区分标签名)
                var elements = ele.getElementsByTagName('*');  
                var ary = []; 
                //遍历elements
                for(var i = 0; i < elements.length; i++){
                    //  eles[i].className   'red aa ccc'
                    //先把类名词列表分割成数组 
                    var clsAry = elements[i].className.split(' ');  //['red','aa','ccc'] 
                        //遍历类名数组,如果存在cls相同的类名,就把这个元素放进ary
                        for(var j = 0; j < clsAry.length ; j++){
                            if(cls == clsAry[j]){
                                ary.push(elements[i]);  
                                break;  
                            }
                        }
                }
                return ary;   
            }
        ```

- document.querySelector('#box .red'); //获取一个元素不兼容ie低版本

- document.querySelectorAll('#box .red');//获取一组元素不兼容ie低版本

JavaScript文档对象模型DOM

猜你喜欢