DOM 拾遗
htmlDOMjs

DOM 拾遗

innerText 和 textContent | | innerText ...

技术
更新于 2024-08-16
— 4123 字
返回

innerText 和 textContent

innerTexttextContent
定义非标准属性标准属性
返回内容元素及其后代元素的可见文本内容元素及其后代元素的所有文本内容，包括隐藏元素和脚本生成的内容
受 CSS 样式
影响		会受 CSS 样式的影响（例如 text-transform）否
保留空白字符
和换行符		是否

htmlcollection

designmode

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

1. 应用范围：

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

2. 功能：

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

3. 使用场景：

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

4. 代码示例：

html
<!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：这个属性表示事件实际触发的元素，即事件最初被触发的那个元素。无论事件如何传播（捕获或冒泡阶段），target总是指向最初的事件源。

  2. currentTarget：这个属性表示事件当前正在被处理的元素。在事件冒泡或捕获的过程中，每个元素节点都可能是currentTarget。换句话说，currentTarget是当前正在调用事件处理程序的那个元素。

简单来说，target是事件开始的地方，而currentTarget是事件当前所在的地方。

举个例子来说明它们的区别：

假设你有以下HTML结构：

html
<div id="parent">
  <button id="child">点击我</button>
</div>

并且你为父元素#parent注册了一个点击事件监听器：

javascript
document.getElementById('parent').addEventListener('click', function(event) {
  console.log('currentTarget (当前处理的元素): ', event.currentTarget); // 会输出 div#parent
  console.log('target (事件触发的元素): ', event.target); // 会输出 button#child
});

当点击按钮时，控制台会输出：

currentTarget (当前处理的元素):  div#parent
target (事件触发的元素):  button#child

在这个例子中，尽管事件监听器是注册在父元素#parent上，但事件实际上是由子元素#child（按钮）触发的。因此，event.target是button元素，而event.currentTarget是div元素，因为事件处理程序是在div上调用的。

Bubbling and capturing

https://javascript.info/bubbling-and-capturing

When an event happens – the most nested element where it happens gets labeled as the “target element” (event.target).

  • Then the event moves down from the document root to event.target, calling handlers assigned with addEventListener(..., true) on the way (true is a shorthand for {capture: true}).
  • Then handlers are called on the target element itself.
  • Then the event bubbles up from event.target to the root, calling handlers assigned using on<event>, HTML attributes and addEventListener without the 3rd argument or with the 3rd argument false/{capture:false}.

Each handler can access event object properties:

  • event.target – the deepest element that originated the event.
  • event.currentTarget (=this) – the current element that handles the event (the one that has the handler on it)
  • event.eventPhase – the current phase (capturing=1, target=2, bubbling=3).

Any event handler can stop the event by calling event.stopPropagation(), but that’s not recommended, because we can’t really be sure we won’t need it above, maybe for completely different things.

The capturing phase is used very rarely, usually we handle events on bubbling. And there’s a logical explanation for that.

In real world, when an accident happens, local authorities react first. They know best the area where it happened. Then higher-level authorities if needed.

The same for event handlers. The code that set the handler on a particular element knows maximum details about the element and what it does. A handler on a particular <td> may be suited for that exactly <td>, it knows everything about it, so it should get the chance first. Then its immediate parent also knows about the context, but a little bit less, and so on till the very top element that handles general concepts and runs the last one.

Bubbling and capturing lay the foundation for “event delegation” – an extremely powerful event handling pattern that we study in the next chapter.