DOM和BOM-day22-个人学习笔记
一、修改元素的内容: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="http://tmooc.cn"....
a.href-->属性 -->HTML DOM
a.getAttribute("href")-->特性 -->核心DOM
如果访问自定义属性时,二者不通用!
<li data-age="29">Eric</li>
读取自定义属性: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属性