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 个答案: