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

Question

是否可以根据 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属性提前）。我的目标是避免提前设置特定于元素的任何内容，并使用元素本身的属性来设置它。

也许这甚至不是一个定义明确的问题！但我想我会问。提前致谢:)

Answer 1

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

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

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

Set data attribute based on text of element?