【修改元素的内容和属性】

1.元素的内容

       - innerHTML:获取 / 设置 元素开始标签和结束标签里的html内容；

              使用固定套路：

              1.删除父元素下所有子元素：parent.innerHTML="";

              1.替换父元素下所有子元素：parent.innerHTML="内容";

       - innerText/textContent; 获取开始标签和结束标签里的文本内容；不包含元素；

         IE8          DOM标准

       - nodeValue：文本节点的内容；

       //***splice返回的是数组，加下标取值；遍历过程中会影响下标，从后向前遍历；

2.元素属性

       所有元素都有attributes属性[i]访问；

       - 读取属性：

         var value=http://www.mamicode.com/element.getAttribute("属性名");获得任意属性的值；

       - 修改属性：

         element.setAttribute(name,value);

         IE8不支持：用element.attributes("属性名")=value;

       - 删除属性：

         element.removeAttribute("属性名");

       - 判断有没有包含属性：

         element.hasAttribute("属性名");->true / false;

       property VS Attribute

       属性         HTML特性

       property：对象在内存中存储的属性，用.访问；

       Attribute：元素对象在开始标签定义的HTML属性和自定义属性；

       访问HTML标准属性时。二者完全一致：

     比如：<a href="http://tmooc.cn"...

       a.href-->属性   -->HTML DOM

       a.getAttribute("href")-->特性  -->核心DOM

    如果访问自定义属性时，二者不通用！

       <li /*data-age="29"*/>Eric</li>

     读取自定义属性：li.data-age? X

                     li.getAttribute("data-age");

     设置自定义属性：li.age=29-->网页？

                     li.getAttribute("age")找不到;

                    li.setAttribute("data-age",29);

       将类数组对象转换为标准数组；lis=Array.prototype.slice.call(lis);*********可以使用标准数组的方法;如：soft();

3.元素的样式

       - 修改内联样式

         1.获取或修改内联样式：style对象

              移除：

              oldDiv.style.removeProperty("z-index");

              oldDiv.removeAttribute("style");

              oldDiv.style.zIndex="";

              设置：

              oldDiv.style.zIndex="1";

              问题：仅能操作行内样式；

       - 修该样式表中的规则：内部 外部

         2步：

         1.获得要修改的样式表对象：

           var sheet=document.styleSheets[i]; styleSheets:获得网页所有样式表对象；

         2.获得要修改的cssRule:

         cssRule:样式表一个大括号就是一个cssRule对象；（有嵌套

         ）

         var cssRule=sheet.cssRules[i];

         3.获得cssRule中的属性：

           cssRule.style.属性名；

Unit02： 读取和修改节点对象属性