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']没有工作，因为当您将某些内容传递[]到 intoquerySelector()或者querySelectorAll()您表示您正在搜索 HTML 元素的属性时。textContent不是 HTML 元素的属性，它是 DOM 元素节点的属性。因此，没有任何内容与您的搜索匹配，因此，您undefined回来了。