从具有不可预测 ID 的 HTML 元素中提取数据：终极指南

如何从具有不可预测 ID 的 HTML 元素中提取数据

问题

当你从数据库中动态生成大量具有各种值的 HTML 元素时，如何捕获这些元素中的数据？当这些元素的 ID 不可预测且不断变化时，通过 ID 选择它们的常规方法就会失效。

解决方案

解决这一挑战涉及以下步骤：

1. 添加类名

为每个元素添加一个唯一的类名，允许我们在 JavaScript 中识别它们。这将提供一个稳定的锚点，用于附加事件侦听器。

2. 事件委托

通过使用事件委托，我们可以侦听父元素（例如带有共同类名的 div）上的单击事件。这样，当子元素（例如按钮）被单击时，仍然可以触发事件处理程序。

3. 提取数据

在事件处理程序中，我们可以使用 target 属性来获取触发事件的元素。然后，我们可以从该元素中检索所需的数据。

代码示例

const elements = document.querySelectorAll(".item_bio");

elements.forEach((element) => {
  element.addEventListener("click", handleClick);
});

function handleClick(event) {
  const target = event.target;

  if (target.nodeName === "BUTTON") {
    const value = target.dataset.valuetocopy;

    // 使用该值进行操作，例如复制到剪贴板
  }
}

优势

通过使用事件委托和类名，我们可以：

• 绕过对内联 JavaScript 的内容安全策略 (CSP) 限制
• 从具有不可预测 ID 的大量元素中捕获数据
• 提供一个通用的解决方案，适用于各种动态生成的 HTML 内容

常见问题解答

Q1：是否可以在不使用类名的情况下使用该技术？

A1：是的，但是这需要在 JavaScript 中使用更复杂的元素选择器，而且效率可能较低。

Q2：我可以在没有按钮的情况下使用该技术吗？

A2：是的，该技术适用于任何触发单击事件的元素，例如链接或图像。

Q3：是否可以从嵌套元素中提取数据？

A3：是的，只要嵌套元素位于带有类名的父元素中即可。

Q4：如何处理重复的类名？

A4：通常情况下，避免重复的类名。如果必须使用重复的类名，请使用其他元素属性（例如数据属性）来区分元素。

Q5：该技术是否适用于所有浏览器？

A5：是的，该技术适用于现代浏览器（例如 Chrome、Firefox 和 Edge）。

结论

掌握从具有不可预测 ID 的 HTML 元素中提取数据的技巧对于处理动态生成的 HTML 内容至关重要。通过使用事件委托和类名，我们可以建立一个强大且灵活的解决方案，使我们能够有效地捕获所需的数据，为我们的应用程序或网站添加功能。