DOM和BOM修改元素属性、内容、样式讲解

DOM和BOM修改元素属性、内容、样式讲解

一、修改元素的内容：3个属性

1、innerHTML：获得、设置元素开始标签和结束标签之间的html原文

何时使用：只要获得html原文内容时

固定套路：2个

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

(2)批量替换父元素下所有子元素：parent.innerHTML="所有子元素标签组成的html"

2、textContent(DOM标准)/ innerText(IE8)：获得开始标签和结束标签之间的纯文本内容，不包含标签

何时使用：只要希望去掉标签，仅获得文本时

3、文本节点的内容：nodeValue

二、修改元素的属性/特性

所有元素都有attributes属性，[i]访问每个属性

1、读取属性：4种方法

何时使用：只要获得任意属性的值

(1)var value=element.getAttribute("属性名")

(2)element.attributes[下标].value

(3)var value=element.attributes['属性名']

(4)element.getAttributeNode('属性名').value

2、修改属性：2种

(1)element.setAttribute(name,value);

IE8不支持，只能element.attributes['属性名']=value

(2)element.setAttributeNode(attrNode);

3、移除属性：2种

(1)element.removeAttribute('属性名');

(2)element.removeAttributeNode(attrNode);

4、判断元素是否包含属性：2种

(1)element.hasAttribute('属性名') //true或false

(2)element.hasAttributes();

5、Property(属性) vs Attribute(HTML特性)

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

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

访问HTMl标准属性时，二者完全一致：

比如：

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

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

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

Eric

读取自定义属性：li.getAttribute("data-age")

三、修改元素的样式

1、修改内联样式

获取：elem.style.css属性名

只能获得内联样式的属性，无法获得完整样式，所以elem.style通常不用做读取css属性值，仅用作修改css属性值

计算后的样式：最终应用到元素上的完整样式，将相对单位的数值计算为绝对单位。

何时使用：今后只要获得一个元素的任何样式，保险起见，都要获得计算后的样式

如何使用：计算后的样式是只读，不可更改

(1)获得计算后的完整style对象

var style=getComputedStyle(elem)

(2)从style中获得想要的css属性值

style.css属性

2、修改样式表中的css规则

(1)获得样式表对象

var sheet=document.styleSheets[i];

(2)获得样式表中的cssRule对象

cssRule：样式表中，每对儿{ }，就是一个cssRule对象

var cssRule=sheet.cssRules[i];

(3)获得cssRule中的style下的css属性值

var value=cssRule.style.css属性