DOM-元素的内容、属性、样式

内容：

 elem.innerHTML: 获取或设置元素开始标签到结束标签之间的HTML代码内容。没有兼容性问题。

      何时使用: 只要获得完整HTML原文时
       只要批量设置元素内容时，都要用innerHTML先拼接字符串，再一次性赋值。
    elem.textContent: 获取或设置元素开始标签到结束标签之间的纯文本的正文。
忽略html标签; 将特殊符号翻译为正文
        有兼容性问题: IE8: elem.innerText

      何时使用: 只要希望过滤掉html标签时，或希望将特殊符号转为正文时。

属性：

 DOM元素的所有属性节点都保存在一个集合中: attributes
   可用下标或属性名访问每个属性
   1.读取属性值: 
      核心DOM: elem.attributes[下标/"属性名"] //AttrNode
1. elem.attributes[下标/"属性名"].value
       *2. elem.getAttribute("属性名") //value
        3. elem.getAttributeNode("属性名") //AttrNode
  elem.getAttributeNode("属性名").value
     何时使用: 万能 即可获得标准属性，又可获得自定义属性
      HTML DOM: elem.属性名 —— 只能获得标准属性


     强调: 凡是从页面读取到的属性值都是字符串


   2.设置属性值:
      核心DOM: 
       *1. elem.setAttribute("属性名","属性值");
        2. elem.setAttributeNode("属性名",AttrNode)
     何时使用: 万能,即可修改标准属性，也可添加自定义
属性
      HTML DOM:elem.属性名=值 —— 只能修改标准属性


   强调: 无论读取还是写入class属性: 
      核心DOM: elem.get/setAttribute("class")
      HTML DOM: elem.className
      因为html的标准属性class和js对象中的内置属性class冲突。HTML DOM中的class被迫改为className


   3.移除属性：
      核心DOM:
        1. elem.removeAttribute("属性名");
      何时使用: 万能
      HTML DOM: elem.属性名=""; —— 相当于移除
      何时使用: 只能移除标准属性
   4.判断有没有:
      核心DOM:
        1. elem.hasAttribute("属性名");//返回bool
      强调: 万能 即可判断标准属性，也可判断自定义属性
      HTML DOM: elem.属性名!="" 


   标准属性 vs 自定义属性:
   标准属性: 即可用核心DOM访问，又可用html DOM访问
   自定义属性: 只能用核心DOM访问

样式：

内联样式：优先级最高，会覆盖其他地方的属性
             仅当前元素可用。不影响其他元素
       获取: elem.style.css属性名
         强调:带横线的属性名，都要去横线，变驼峰命名
     ***仅能获取内联样式，无法获得继承或层叠来的外部样式
       设置: elem.style.css属性名="属性值"
     ****强调:一般程序修改样式，优先修改内联样式
     1. 优先级高 ； 2. 不影响其他元素


   内部/外部样式表: 
       获得一个元素最终计算后的所有样式属性: 2步:
       1. var style=getComputedStyle(elem)
       IE8var style=elem.currentStyle
       2. var value=style.css属性名


   今后，凡是获取元素的样式: 都用getComputedStyle(elem)
         返回设置元素的样式: 都用elem.style.css属性


       修改内部/外部样式表中的样式：
提醒: 不建议 修改样式表会影响多个元素
              Chrome 不支持本地的外部样式表
       如何修改: 
         1. 获得样式表对象：
           var sheet=document.styleSheets[1];
2. 每个选择器的{}，其实都是一个cssRule对象
            获得指定选择器:
  var cssRules=sheet.cssRules;
           var cssRule=cssRules[i]
     如果修改动画的帧,就要继续获取子cssRule
     var subRule=cssRule.cssRules[i]
         3. 设置cssRule中的样式属性:
              cssRule.style.样式属性="";