文章目录
DOM属性和方法
JavaScript
中,若要对获取的元素内容进行操作,则可以利用DOM
提供的属性和方法实现。
属性属于Element
对象,方法属于document
对象。
innerHTML
在使用时会保持编写的格式以及标签样式。innerText
则是去掉所有格式以及标签的纯文本内容。textContent
属性在去掉标签后会保留文本格式。
示例:
效果如下:
innerText
属性在使用时可能会出现浏览器兼容的问题。因此,推荐在
开发时尽可能的使用innerHTML
获取或设置元素的文本内容。同时,innerHTML
属性和document.write()
方法在设置内容时有一定的区别,前者作用于指定的元素,后者则是重构整个HTML
文档页面。因此,在开发中要根据实际的需要选择合适的实现方式。
案例——改变盒子大小
- 编写
HTML
,设置div
的大小。 - 根据用户的点击次数完成盒子大小的改变。
- 单击的次数为奇数时,盒子都变大,单击次数为偶数时,盒子都变小。