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.样式属性="";