使用JavaScript查找innerHTML文本并返回父标记ID

Question

使用JavaScript，人们经常想使用例如getElementById（）函数来搜索具有特定ID的HTML标签，并返回其innerHTML值。

但是，是否有可能实现相反的目标呢？

<tag1 id="myID1">
    <tag2 id="myID2">
        <tag3>myText</tag3>
    </tag2>
</tag1>

我想创建一个函数，将“ myText”的首次外观作为innerHTML文本查找并返回其最上层的父标记id。 在这种情况下，如果我搜索“ myText”，则期望返回“ myID1”。 JavaScript如何实现？

Answer 1

要浏览html元素的子元素，可以使用类似以下内容的递归函数：

function findInnerHTMLMatch(s,e){
  if (e.innerHTML===s) return e;
  for (let n=0;n<e.children.length;n++){
    const rtn=findInnerHTMLMatch(s,e.children[n]);
    if (rtn) return rtn;
  }
}

然后，如果要在整个页面上查找，只需调用findInnerHTMLMatch('myText',document.body) 。

这将返回仅包含您指定的文本的DOM元素。

之后，我发现您的要求不清楚。 如果您正在寻找最终的父元素，那么从逻辑上讲，您每次都会以<html>元素结束。 那么，您是否在定义了id的顶部元素之后？ 如果不是，那么，也许最重要的是，因为这将有助于澄清事情，为什么？

只是因为我喜欢考虑这些事情...如果您想不进行递归操作，则堆栈可以很好地工作，并且可能更加优雅：

function findInnerHTMLMatch(s,e){
  const stack=[e];
  while (stack.length){
    const el=stack.pop();
    if (el.innerHTML===s) return el;
    stack.push(...el.children);
  }
}

使用JavaScript查找innerHTML文本并返回父标记ID

问题描述

1 个解决方案

解决方案1
1 已采纳 2019-02-28 08:54:03

使用JavaScript查找innerHTML文本并返回父标记ID

问题描述

1 个解决方案

解决方案1 1 已采纳 2019-02-28 08:54:03

解决方案1
1 已采纳 2019-02-28 08:54:03