根据元素的文本设置数据属性？答案

【问题标题】：Set data attribute based on text of element?根据元素的文本设置数据属性？
【发布时间】：2021-03-27 04:39:59
【问题描述】：

是否可以根据 HTML 元素的文本设置 data-* 属性的值？从示意图上看，这就是我的想法：

<div data-text={this.text}>example</div>

导致data-text="example"。

我认为如果你设置一个id 然后通过它获取元素是可能的，像这样：

<div id="exampleId" data-text={document.getElementById("exampleId").textContent}>example</div>

但这不是我所希望的，因为它需要提前设置id（所以不妨提前设置data 属性）。我的目标是避免提前设置特定于元素的任何内容，并使用元素本身的属性来设置它。

也许这甚至不是一个定义明确的问题！但我想我会问。在此先感谢:)

【问题讨论】：

【解决方案1】：

您可以使用querySelectorAll 并将逻辑应用于具有data-text 属性的每个元素，如下所示：

const elements = document.querySelectorAll("[data-text]")

elements.forEach(element => {
    element.setAttribute("data-text", element.innerText)
})

【讨论】：