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.属性名='值';