innerHTML、document.write()和DOM操作的优缺点

innerHTML 属性、 document.write() 方法和 DOM 操作的优缺点各是什么?

innerHTML属性

优点:

  • 和 DOM 操作方法相比,可以使用更少的代码添加大量的新标签。
  • 向页面中添加大量新元素时,速度比 DOM 操作更快。
  • 当需要移除元素中的所有内容时,它更简单(直接设置一个空字符串即可)。

缺点:

  • 不应该用它来添加来自于用户输入的内容,因为存在安全隐患。
  • 在添加一个很大的 DOM 片段时,这个方法很难独立区分出每一个元素。
  • 事件处理程序可能不像预期那样生效。

document.write() 方法

优点:

  • 可以快速、简单地让初学者理解如何向页面添加内容。

缺点:

  • 只在页面初始化加载时有效。在事件函数调用时使用,会把页面其他内容清空。
  • 在严格验证的 XHTML 中可能会遇到问题。

DOM 操作

优点:

  • 如果 DOM 片段中拥有大量的兄弟节点,处理其中一个元素节点时使用这种方法更合适。
  • 不会影响事件处理程序。
  • 可以轻易地使用脚本来逐步添加元素。

缺点:

  • 如果需要对页面内容进行大量修改,它的速度比 innerHTML 属性更慢。
  • 与使用 innerHTML 属性相比,它需要更多的代码来实现同样的功能。
-------------本文结束感谢您的阅读-------------
Fork me on GitHub