一、内容的修改
1.获取或者修改原始html的内容片段
elem.innerHTML 这是获取内容
elem.innerHTML="123456";这是修改内容为123456
elem.innerHTML后面带值就是修改,不带值就是获取
2.获取或者修改纯文本内容:
elem.textContent 可以翻译特殊符号为正文,去掉内嵌的子标签,只保留文字
3.表单元素的值
elem.value
二、属性的修改
1.html标准属性的修改
1)核心DOM API
获取属性值:var value=elem.getAttribute("属性名");
修改属性值:elem=removeAttribute("属性名","新值");
移除属性值:elem.removeAttribute("属性名");
判断是否包含属性:var bool=elem.hasAttribute("属性名");
2)HTML DOM API(对常用核心DOM API的简化)
HTML DOM将所有的HTML标准属性定义在内存中的元素对象上
使用:elem.属性名
特例:class是ES的标准关键字
DOM中不允许使用class作为属性名
DOM中的className属性等于HTML中的class
2.状态属性的修改
状态属性有:enable disable selected checked
值都是bool类型,不是字符串类型,不能用核心DOM API修改
只能用HTML DOM中的.来访问
3.自定义扩展属性
自定义属性为自己定义的属性,不是系统中原有的属性
自定义扩展属性可以代替id,class选择器,HTML DOM无法访问自定义属性
自定义扩展属性的定义方法:<任何标签 自定义属性名=“值”>
HTML5标准中的定义:<任何标签 自定义属性名=“值”>
自定义属性的修改和获取
1.核心DOM API对自定义属性的操作
.getAttribute()//获取属性
.setAttribute()//获取属性
.removeAttribute()//移除属性
.hasAttribute()//判断属性的存在
注意:HTML DOM API不能操作自定义属性,由于自定义属性不是一开始就存在于HTML标准,则没有包含在元素树中,不能直接访问
2.HTML5标准中对自定义属性的操作
elem.dataset//可自动获取所有的data-开头的属性
.自定义属性名称//使用dataset访问自定义属性时,不用data-前缀
三、样式的修改
1.内联样式的修改
elem.style.css属性名=“值“ <=> <elem style="css属性名:值">
注意:1.css属性名中如果带-,需要去掉横线变驼峰
z-index=>zIndex
list-style=>listStyle
background-color=>backgroundColor
2.如果是带px、em等单位的属性值,
修改时:必须手动拼接到结尾 .style.width=12+"px"
获取时:不许去掉结尾的px、em,才能做计算
elem.style仅代表内联样式
修改时:如果elem.style 优先级最高
获取时:只能获取内联样式,无法获取外部样式中的样式
获取样式:不能用style
应该获取计算后的样式:最终应用到元素上的所有样式的集合
获取样式的步骤:
1.先获取计算后的样式的集合对象:
var style=getComputedStyle(elem)
2.获取一个css属性的值
style.css属性
注意:应为计算后的样式属性来源不确定,所以都是只读的
问题:elem.style修改样式,一句话只能修改一个属性
解决:今后只要修改大量的css属性,首选修改class的修改方式
2.内外部样式表的修改
var sheet=document.styleSheets[i];
var rule=sheet.cssRules[i]
rule.style.样式属性=值
3.最好的修改样式的方法
修改class属性,批量修改样式。