## innerText 和 textContent | | innerText | textContent | |-----------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 定义 | 非标准属性 | 标准属性 | | 返回内容 | 元素及其后代元素的可见文本内容 | 元素及其后代元素的所有文本内容，包括隐藏元素和脚本生成的内容 | | 受 CSS 样式
影响 | 会受 CSS 样式的影响（例如 `text-transform`） | 否 | | 保留空白字符
和换行符 | 是 | 否 | ## htmlcollection ## designmode + [The WHATWG Blog — The Road to HTML 5: contentEditable](https://blog.whatwg.org/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. 代码示例：** ```html DesignMode vs ContentEditable

DesignMode Example

This is a div with designMode enabled.

ContentEditable Example

This is a div with contenteditable enabled.

``` **总结：** - `designMode` 用于整个文档的编辑模式，提供更高级的编辑功能。 - `contenteditable` 用于单个元素的可编辑性，提供更基本的编辑功能。 ## 事件 currentTarget 和 target 在JavaScript的事件处理中，`target`和`currentTarget`是两个非常重要的属性，它们在事件对象中表示不同的概念： 1. **target**：这个属性表示事件实际触发的元素，即事件最初被触发的那个元素。无论事件如何传播（捕获或冒泡阶段），`target`总是指向最初的事件源。 2. **currentTarget**：这个属性表示事件当前正在被处理的元素。在事件冒泡或捕获的过程中，每个元素节点都可能是`currentTarget`。换句话说，`currentTarget`是当前正在调用事件处理程序的那个元素。简单来说，`target`是事件开始的地方，而`currentTarget`是事件当前所在的地方。举个例子来说明它们的区别：假设你有以下HTML结构： ```html

``` 并且你为父元素`#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`, 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 `` may be suited for that exactly ``, 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.

sticky 定位不生效的调试方法

相关内容

DOM 拾遗

高亮显示 html 元素内的所有数字

IPv4-mapped IPv6

table 元素细节

获取点击事件在 canvas 内的位置

相关内容

DOM 拾遗

高亮显示 html 元素内的所有数字

IPv4-mapped IPv6

table 元素细节

获取点击事件在 canvas 内的位置

sticky 定位不生效的调试方法

相关内容

DOM 拾遗

高亮显示 html 元素内的所有数字

IPv4-mapped IPv6

table 元素细节

获取点击事件在 canvas 内的位置

相关内容

DOM 拾遗

高亮显示 html 元素内的所有数字

IPv4-mapped IPv6

table 元素细节

获取点击事件在 canvas 内的位置