JavaScript文档对象模型DOM

Posted 2022-09-06 musong-out

 

节点关系属性：（带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低版本