JavaScript基礎之DOM修改樣式

1.獲取或設置元素的內容：3個屬性:
   1. innerHTML: 獲取或設置元素開始標簽到結束標簽之間的所有HTML代碼原文。
      何時使用：只要獲得完整的html代碼原文時
      優化：如果批量刪除或插入多個子元素時，盡量避免單個操作！
            每次插入或刪除操作都會導致排版引擎重新layout。
            如果批量刪除或插入，排版引擎只需要一次layout即可。
      如何優化：
                1. 刪除: parent.innerHTML="";
        2. 插入: parent.innerHTML="多個元素的html標簽組成的html代碼字符串";
   2. textContent: 僅獲取或設置元素開始標簽到結束標簽之間的文本內容。不包含標簽。如果是特殊符號，會返回特殊符號的正文。
      IE8不兼容: innerText

2. ***獲取或設置元素的屬性：
      凡是元素的屬性都是字符串！
   1. 獲取元素的屬性：3種：
     1. var attrNode=elem.attributes[i/"屬性名"] 
                獲得屬性節點對象
        attrNode.value 獲得屬性中的值
    *2. elem.getAttribute("屬性名") 直接返回屬性值！
     3. elem.getAttributeNode("屬性名") 獲得屬性節點對象
           .value才能獲得值

   2. 設置元素的屬性: 3種：——核心DOM
     1. elem.attributes[i/"屬性名"].value="屬性值"
        只能修改現有屬性
    *2. elem.setAttribute("屬性名","屬性值")
        即可新增屬性，也可修改現有屬性
     3. elem.setAttributeNode(屬性節點對象)
Elem1.setAttributeNode(elem2.attributes["屬性名"])

   3. 判斷元素中是否包含指定屬性:
     elem.hasAttribute("屬性名")-->包含:true,否則:false

   4. 刪除元素中的指定屬性：
     elem.removeAttribute("屬性名")

     總結：attributes get/set/has/removeAttribute

   ***屬性(Property) vs 特性(Attribute)
     屬性: 內存中一個對象的成員屬性，一般用.訪問
     特性: 頁面中html元素上的html屬性，一般用get/setAttribute

     對於html標准屬性：二者完全相同！
       HTML DOM將所有標准屬性已經封裝在了元素對象中
         如果沒有主動設置，默認值為""
         elem.屬性名="值"

     自定義特性：只能用核心DOM訪問 ——只能訪問頁面元素中的
       html5：elem.dataset保存了所有頁面元素中的自定義特性
           設置/獲取：elem.dataset.屬性名
             專門訪問以data-開頭的自定義特性
       手動在頁面添加自定義特性必須加data-前綴

***修改樣式：2處：
   1. 僅獲取或設置內聯樣式：
        elem.style.屬性名="值";
      其實elem.style是CSSStyleDeclaration類型的對象
          封裝了一個元素所有css樣式屬性的值
      固定套路：清除一個元素的所有內聯樣式: 
                elem.style.cssText="";
   2. 獲取元素最終應用的所有樣式：計算后的樣式
        var style=getComputedStyle(elem);
            style也是CSSStyleDeclaration類型的對象
                  IE8：elem.currentStyle;
            style.屬性名
   只要設置：elem.style.屬性名 -> 加入內聯樣式，優先級最高！
                                  不影響其他元素的樣式
   只要獲取：var style=getComputedStyle(elem)

   3. 改樣式表中的樣式：3步：chrome不支持本地的外部css文件
      1. 從樣式表集合中獲取第i個樣式表對象
          var sheet=document.styleSheets[i]
              sheet是CSSStyleSheet類型的對象：
               1. sheet.cssRules集合: 樣式表中所有cssRule對象
                   cssRule對象：css中每個{}就是一個cssRule對象
                  cssRule下還可包含子Rule,比如: @keyframes
               2. cssRule對象下，又包含:
                  1. cssText: 保存Rule完整的字符串
                  2. selectorText: 選擇器名稱
                 *3. style: CSSStyleDeclaration
                      style.屬性名
      2. 獲取CSSRule對象：
          var rule=sheet.cssRules[i]
      3. 通過rule獲得style對象
          var style=rule.style
              style.屬性名='值';