【DOM学习笔记 Unit02】

1. 修改元素的内容：3个属性

   1. innerHTML: 获取或设置元素开始标签到结束标签之间的HTML内容。
      何时使用：只有获取或设置元素的内容时
      固定套路：2个：

      1. 清空子元素：parent.innerHTML=”“;
      2. 批量替换子元素：

      和单独删除元素对象的效率差异：
      DOM Tree–>Render Tree
      |
      layout(reflow)最耗时
      尽量少触发layout：增加和删除元素节点
      批量操作减少触发layout
      课堂练习：
      a. option元素，selected属性表示是否被选中，可当做bool类型用
      b. 遍历过程中可能减少元素个数的时候，都要从后向前遍历
      c. var arr=[1,2,3]
      var deleted=arr.splice(1,1); deleted数组，包含被删除的元素
      deleted[0] 获得被删除的元素

   2. textContent:获取或设置开始标签到结束标签之间的文本内容，剔除了子标签，自动转换特殊符号为原文。
      IE8：innerText：

2. 修改属性：
   核心DOM：凡是来自于不带HTML开头的父类型中的属性和方法
   HTML DOM：凡是仅继承自HTML开头的父类型中的属性和方法

   HTML DOM:body–>HTMLBodyElement–>HTMLElement 给HTML定义的元素的父类型

   核心DOM： –>Element–Node 给所有文档类型定义的元素的父类型

   获得元素属性值：3种—-所有属性值都是字符串

   1. var strValue=elem.getAttribute(“属性名”)；
      何时使用：
      只要获取元素的知道属性的值
   2. var strValue=elem.attributes[i/”属性名”].value;
      //属性集合 //属性节点 //属性值
   3. var strValue=elem.getAttributeNode(“属性名”).value;
      //属性节点对象 //属性值

   修改元素属性值：2种—-所有属性的值都是字符串

   1. elem.setAttribute(“属性名”,”属性值”);
   2. elem.setAttributeNode(属性节点对象);

   移除元素的属性：2种

   1. elem.removeAttribute(“属性名”)
   2. elem.removeAttributeNode(“属性节点对象”)

   判断是否包含指定属性:

   1. elem.hasAttribute(“属性名”)–>true,有；false，没有；

   总结：5个词： attributes get/set/remove/hasAttribute

   HTML DOM：
   获取、修改属性：elem.属性名
   删除属性: elem.属性名=”“;
   判断：if(elem.属性名)

   ***Property VS Attribute
   Attribute是出现在html元素开始标签中的特性
   只能通过get/setAttribute访问
   比如：a.getAttribute(“href”);
   Property是内存中对象的属性，专门通过.访问
   比如：a.href

   HTML标准属性：既是html元素的特性，同时又是内存中元素对象的属性。

   自定义属性：html也可以自定义属性

li.setAttribute("age","25");==> <li age="25"></li> 可以表现在页面元素上
 只能用getAttribute("age"); --> 25

li.age=25; ==>仅存储在内存中，无法出现在页面元素上
只能用.获取
自定义属性，核心DOM和HTML DOM不通用！  

HTML5中自定义属性标准：
1. 所有自定义属性都要加data-前缀
2. elem.dataset.自定义属性名 ==》不用加data-前缀

1. 修改元素的样式：2处可改

   1. 内联样式：都定义在元素的style属性中
      elem.style –> CSSStyleDeclaration类型的对象
      获取/设置元素的内联样式属性：
      【elem.style.属性名】
      【属性名】：将css属性名去横线变驼峰
      *问题：获取：只能获得内联样式中的属性，无法获得样式中级联或继承来到外部属性。
      修改样式：放在内联样式中的属性，优先级最高！覆盖所有外部的！
      何时使用style：修改一个元素的样式时。

   2. 样式表中的样式：

      1. 获取计算后的样式：最终层叠应用到一个元素上的完整样式列表。

          var style=getComputedStyle(elem)
              IE8：var style=elem.currentStyle

          if(elem.currentStyle){
         var style=elem.currentStyle;
          }else{
             vaf style=getComputedStyle(elem);
          }

何时使用：只要获取一个元素的属性时都要获取计算后的样式
强调：getComputedStyle返回的style对象是只读！

   2. 修改样式表中的样式：
      1. 样式表对象：

            <style></style> 
            <link rel="stylesheet".../>

         获得样式表对象：
        var sheet=document.styleSheets[i] i从0开始
          sheet是CSSStyleSheet类型的对象

      2. CSS规则对象：
        var rule=sheet.cssRules[i];
        rule是CSSStyleRule类型的对象
        rule对象下还可继续保护cssRules集合

      3. 获取/设置规则中的属性：
        rule.style.属性名="属性值"