11-18的学习总结(DOMSecondday)

DOM:读取访问节点对象属性

1. 批量删除父元素下所有子节点 elem.innerHTML="";
2. 批量替换父元素下所有子节点 elem.innerHTML="所有子元素标签组成的html字符串"
3. 一切从属性获取的值和设置到属性上的值必须都是字符串所以，都要先类型转换，再计算！

 获取元素的属性值

只找一个属性值时:var strValue=elem.getAttribute("属性名");

遍历一个元素所有属性时:

1. elem.attributes集合：包含了当前元素所有属性的节点对象
2. elem.attributes[i/"属性名"]-->返回一个属性节点对象
3. elem.attributes[i/"属性名"].value-->属性值

修改元素的属性值：2种：
1. elem.setAttribute("属性名","属性值");
何时使用：只设置一个属性值时
2. elem.setAttributeNode(属性节点对象)

移除元素的属性：2种：
1. elem.removeAttribute("属性名")
2. elem.removeAttributeNode(属性节点)

判断是否包含指定属性：1种：
1. elem.hasAttribute("属性名")-->有，true；没有，false

H5中自定义属性：例a.setAttribute("age",18);

h5规定：凡是自定义属性都要加data-前缀   获取自定义属性值：a.dataset.属性名

设置自定义属性值：a.dataset.属性名=值

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　修改样式

1. 仅获得或修改内联样式：

每个元素的style属性-->style对象
style对象中包含了所有css样式属性，默认值都是""
elem.style.属性名="值";
问题：无法获得样式表中层叠或继承来的属性
　　　　　　　只能访问elem的内联样式(style属性中定义的样式)
2. 获得样式表中层叠或继承来的属性：
DOM标准：var style对象=getComputedStyle(elem);
style对象.属性名
IE8: var style对象=elem.currentStyle;
style对象.属性名
问题：          仅能获得样式，无法修改样式
　　　　解决：要修改：
　　　　　　改内联：只能用elem.style.属性名="值"
3. 改样式表中的样式：3步：
1. 获得要修改的样式表对象：
var sheet=document.styleSheets[i];
2. 获得要修改的CSSRule：
cssRule：样式表中每个大括号包裹的内容
var cssRule=sheet.cssRules[i]
3. 获得或修改cssRule中的属性
cssRule.style.属性名=值
问题：牵一发而动全身
解决：都是用直接修改内联样式的属性，来覆盖样式表中的属性