innerHTML 属性、 document.write() 方法和 DOM 操作的优缺点各是什么?
innerHTML属性
优点:
- 和 DOM 操作方法相比,可以使用更少的代码添加大量的新标签。
- 向页面中添加大量新元素时,速度比 DOM 操作更快。
- 当需要移除元素中的所有内容时,它更简单(直接设置一个空字符串即可)。
缺点:
- 不应该用它来添加来自于用户输入的内容,因为存在安全隐患。
- 在添加一个很大的 DOM 片段时,这个方法很难独立区分出每一个元素。
- 事件处理程序可能不像预期那样生效。
document.write() 方法
优点:
- 可以快速、简单地让初学者理解如何向页面添加内容。
缺点:
- 只在页面初始化加载时有效。在事件函数调用时使用,会把页面其他内容清空。
- 在严格验证的 XHTML 中可能会遇到问题。
DOM 操作
优点:
- 如果 DOM 片段中拥有大量的兄弟节点,处理其中一个元素节点时使用这种方法更合适。
- 不会影响事件处理程序。
- 可以轻易地使用脚本来逐步添加元素。
缺点:
- 如果需要对页面内容进行大量修改,它的速度比 innerHTML 属性更慢。
- 与使用 innerHTML 属性相比,它需要更多的代码来实现同样的功能。