Javascript - 通过内部文本获取元素ID

Question

我正在寻找一种通过部分内部 html 获取元素 id 的方法

例如，我有这个模板

<div id="unpredictable-id1">
    <label>
        <span id="unpredictable-id1"> (unpredictable text) </span> <!-- this span have has the same id than div but has unpredictable content -->
        <span>persistant text</span> <!-- this span have no id, no class, no identifier -->
    </label>
</div>

我猜不出<div> id(没有后缀，没有前缀，没有其他属性...)我获取元素的唯一方法是通过内部跨度中的文本(我之前可以找到的文本)

我尝试过像 identifiers = document.querySelectorAll("[textContent*='persistant text']").id 这样的事情;但总是返回“未定义”

有人有线索吗？

Answer 1

如果您可以获得对后代元素的引用，那么您可以使用 .closest()方法:

// Get all the span elements and loop through them
document.querySelectorAll("span").forEach(function(element){
  // Check the textContent of the element for a match
  if(element.textContent === "persistant text"){
    // Find the nearest ancestor div
    let closest = element.closest("div")
    // ...then do whatever you want with it
    console.log("The " + closest.nodeName + " has an id of: " + closest.id);
  }
});

<div id="unpredictable-id1">
    <label>
        <span id="unpredictable-id1"> (unpredictable text) </span> <!-- this span have has the same id than div but has unpredictable content -->
        <span>persistant text</span> <!-- this span have no id, no class, no identifier -->
    </label>
</div>

仅供引用:ID 在文档中必须是唯一的。两个元素具有相同的 ID 是无效的 HTML，并且违背了拥有 ID 的初衷。

此外，[textContent*='persistant text'] 不起作用，因为当您将 [] 内部的内容传递到 querySelector() 或 querySelectorAll() 您表示您正在搜索 HTML 元素的属性。 textContent 不是 HTML 元素的属性，而是 DOM 元素节点的属性。因此，没有任何内容与您的搜索匹配，因此您得到了 undefined。