Web源码笔记：HTML常用对象与自定义属性操作.pdfVIP

正课:

1.修改:

2.添加/删除:

3.HTMLDOM常用对象:

1.修改:

属性:

自定义扩展属性:

定义自定义扩展属性:

ANY自定义属性名=值

HTML5中:ANYdata-自定义属性名=值

获取或修改自定义扩展属性:

1.DOMAPI:

.getAttribute()

.setAttribute()

.removeAttribute()

.hasAttribute()

强调:HTMLDOMAPI不能操作自定义扩展属性

因为自定义扩展属性是后天自定义的，HTML中没有。所以不包含在元素对

象中。所以不能用.直接。

2.HTML5中:

elem.dataset//可自动获得所有data-*开头的属性

.自定义属性名

//使用dataset自定义属性时，不用data-前缀

样式:

1.修改内联样式:

elem.style.css属性名=值

等效于:ELEMstyle=css属性名:值

强调:1.css属性名中如果带-，需要去横线变驼峰:

z-index=zIndex

list-style=listStyle

background-color=backgroundColor

2.如果是带单位的数字属性:

修改时:必须手动拼接单位到结尾:

.style.width=12+px;

获取时:必须去掉结尾的px，才能做计算

width=12.5px

parseFloat(width)=12.5

问题:elem.style仅代表内联样式:

修改时，如果elem.style，优先级最高！

获取时，只能获取内联样式，无法获取外部样式表中的样式。

获取样式:不能用style

应该获取计算后的样式:最终应用到元素上的所有样式的集合。

如何:2步:

1.先获得计算后的样式的集合对象:

varstyle=getComputedStyle(elem)

2.获取一个css属性的值:

style.css属性

强调:因为计算后的样式属性不确定，所以都是只读的。

问题:elem.style修改样式，一句话只能修改一个css属性

如果同时修改多个css属性，代码会很繁琐

解决:今后，只要批量修改css属性，都要首选class方式修改

2.添加/删除

添加:3步:

1.创建一个空元素对象

vara=document.createElement(a)

a:a/a

2.设置关键属性

a.href=;

a.innerHTML=gotot;

a:ahref=gotot/a

3.将新对象挂载到DOM树上指定位置

3种:

1.在当前父元素下的结尾，追加一个新元素:

父元素.appendChild(a)

2.在父元素下的某个子元前:

父元素.insertBefore(a,child)

3.替换父元素的某个子元素:

父元素.receChild(a,

child)

优化:尽量减少修改DOM树的次数

因为每修改一次DOM树，浏览器都会重绘页面

页面加载过程:

html-DOM树

↓

加载树-排版-绘制

↑非常耗时