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低版本