DOM 拾遗

innerText 和 textContent

htmlcollection

designmode

• The WHATWG Blog — The Road to HTML 5: contentEditable
• https://css-tricks.com/the-browser-can-remember-edited-content/

designMode 和 contenteditable 都是 HTML 属性，用于控制元素的可编辑性，但它们有以下区别：

1. 应用范围：

• designMode 是一个 文档级 属性，应用于整个 HTML 文档。它用于启用或禁用整个文档的编辑模式。
• contenteditable 是一个 元素级 属性，应用于单个 HTML 元素。它用于启用或禁用该元素的可编辑性。

2. 功能：

• designMode 提供更高级的编辑功能，允许用户使用浏览器提供的编辑工具（如格式化工具栏）来编辑内容。它通常用于富文本编辑器。
• contenteditable 提供更基本的编辑功能，允许用户直接在元素中输入和编辑文本。它通常用于简单的文本编辑或用户输入。

3. 使用场景：

• designMode 通常用于创建富文本编辑器，例如在线文档编辑器、博客编辑器等。
• contenteditable 通常用于创建简单的文本输入框、评论区、在线聊天等。

4. 代码示例：

<!DOCTYPE html>
<html>
<head>
<title>DesignMode vs ContentEditable</title>
</head>
<body>

<h1>DesignMode Example</h1>
<div id="designModeDiv" contenteditable="true">
  This is a div with designMode enabled.
</div>

<script>
  document.designMode = "on"; // Enable designMode for the entire document
</script>

<h1>ContentEditable Example</h1>
<div id="contentEditableDiv" contenteditable="true">
  This is a div with contenteditable enabled.
</div>

</body>
</html>

总结：

• designMode 用于整个文档的编辑模式，提供更高级的编辑功能。
• contenteditable 用于单个元素的可编辑性，提供更基本的编辑功能。

事件 currentTarget 和 target

在JavaScript的事件处理中，target和currentTarget是两个非常重要的属性，它们在事件对象中表示不同的概念：

1. target：这个属性表示事件实际触发的元素，即事件最初被触发的那个元素。无论事件如何传播（捕获或冒泡阶段），总是指向最初的事件源。