使用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