JavaScript基础之DOM修改样式

Posted 2020-06-13

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