76 DOM——操作元素内容

DOM属性和方法

JavaScript中，若要对获取的元素内容进行操作，则可以利用DOM提供的属性和方法实现。

属性属于Element对象，方法属于document对象。

• innerHTML在使用时会保持编写的格式以及标签样式。
• innerText则是去掉所有格式以及标签的纯文本内容。
• textContent属性在去掉标签后会保留文本格式。

示例：

效果如下：

innerText属性在使用时可能会出现浏览器兼容的问题。因此，推荐在
开发时尽可能的使用innerHTML获取或设置元素的文本内容。同时，innerHTML属性和document.write()方法在设置内容时有一定的区别，前者作用于指定的元素，后者则是重构整个HTML文档页面。因此，在开发中要根据实际的需要选择合适的实现方式。

案例——改变盒子大小

• 编写HTML，设置div的大小。
• 根据用户的点击次数完成盒子大小的改变。
• 单击的次数为奇数时，盒子都变大，单击次数为偶数时，盒子都变小。