使用其 innerHTML 查找元素答案

【问题标题】：Finding element using its innerHTML使用其 innerHTML 查找元素
【发布时间】：2014-02-22 13:09:45
【问题描述】：

请看看这个 DOM 树...

  <div>

      <div>

            <span>  Home1  </span>

      </div>

      <span>  Home2  </span>

      <span>  Home3  </span>

  </div>

现在假设我有一个场景，我以某种方式获得了第一个跨度 Home1 的 innerHTML。是否可以仅使用此（Home1）信息来获取元素跨度及其父div。

【问题讨论】：

您可以遍历每个元素并将其 innerHTML 与您要查找的元素进行比较？然后找到父母很容易。
您使用哪种语言？还是这种语言不可知论？
@FelixKling _ Javascript
循环遍历所有 div 是一个大问题。如果您打算点击该元素，这很容易。如果您告诉我们您想做什么，我们可以为您提供一些简单的解决方案。
没有 ID 或类？您必须使用 XPATH 表达式。

标签： javascript html dom

【解决方案1】：

Here is what you want.

这里是html：

<label>opal fruits</label>

这里是 jQuery：

$("label:contains(opal fruits)")

【讨论】：

是什么让你认为 OP 使用了 jQuery？
是的，你不可能事先知道：P 没有库标签的问题的答案至少应该包含一个没有库的解决方案。
@FelixKling 我发布答案时没有标签。

【解决方案2】：

var mySpans = document.getElementsByTagName(span);

for(var i=0;i<mySpans.length;i++){

if(mySpans[i].innerHTML == 'Home1'){

var parent = mySpans[i].parentNode;
break;

}

}

这会选择具有innerHTML Home1 的span 的parent

【讨论】：

【解决方案3】：

有很多方法可以获取有关您的元素的信息。

使用 innerHTML 作为标识符不是一个好的解决方案。

您可能需要某种事件来搜索“Menu1”

所以这里有一个点击处理程序，它也适用于其他事件，为您提供有关您点击的内容的信息。

function handler(e){
 var txt='You clicked on a '+e.target.nodeName+'\n';
    txt+='The innerHTML is '+e.target.innerHTML+'\n';
    txt+='The text is '+e.target.textContent+'\n';
    txt+='The parentNode is '+e.target.parentNode.nodeName+'\n';
 alert(txt)
}
document.addEventListener('click',handler,false)

演示

function handler(e) {
  var txt = 'You clicked on a ' + e.target.nodeName + '\n';
  txt += 'The innerHTML is ' + e.target.innerHTML + '\n';
  txt += 'The text is ' + e.target.textContent + '\n';
  txt += 'The parentNode is ' + e.target.parentNode.nodeName + '\n';
  alert(txt)
}

document.addEventListener('click', handler, false)

<div>
  <div><span>Menu1</span></div><span>Menu2</span><span>Menu3</span>
</div>

如果您希望脚本搜索“Menu1”，您应该考虑将“Menu1”作为属性添加到 span 或 parentNode。

<div id="Menu1">
 <span>Home1</span>
</div>

然后调用

document.getElementById('Menu1');

速度非常快。

【讨论】：

【解决方案4】：

innerHTML 方法返回字符串类型。它不与 DOM 树关联。

你可以使用jQuery和它containsselector(fiddle)：

$(":contains('Home1')").last()

【讨论】：

【解决方案5】：

var divRef;  //Reference to the container of your div / span elements
var spans = divRef.getElementsByTagName("span");
var spanContainer;

for(var i = 0; i < spans.length; i++){
    if(spans[i].innerHtml == "Home 1"){
        spanContainer = spans[i].parentNode;
        break;
    }
}

if(spanContainer){
    alert("Element has been found!");
}

【讨论】：

【解决方案6】：

function findNodeByInnerHTML(nodelist, innerHTML){
    for(let ii = 0; ii < nodelist.length; ii++){
        if(nodelist[ii].innerHTML === innerHTML)
            return nodelist[ii]
    }
}
let span = findNodeByInnerHTML(document.querySelectorAll('span'), 'home')

【讨论】：