使用其innerHTML查找元素 [英] Finding element using its innerHTML

问题描述

请查看此DOM树...

 < div> 
 
< div> 
 
< span> Home1< / span> 
 
< / div> 
 
< span> Home2< / span> 
 
< span> Home3< / span> 
 
< / div> 
  

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

解决方案

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

使用innerHTML作为标识符并不是一种很好的解决方案。 / p>

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

这是一个单击处理程序，该处理程序也可用于其他

  function handler（e）{
 var txt ='您点击了' + e.target.nodeName +'\n'; 
 txt + ='innerHTML是'+ e.target.innerHTML +'\n'; 
 txt + =文字为 + e.target.textContent + \n； 
 txt + = parentNode是 + e.target.parentNode.nodeName + \n； 
 alert（txt）
} 
 document.addEventListener（'click'，handler，false）
  

演示

 函数处理程序（e）{
 var txt ='您点击了'+ e.target.nodeName +'\n'; 
 txt + = innerHTML是 + e.target.innerHTML + \n; 
 txt + =‘文字为’+ e.target.textContent +‘\n’； 
 txt + = parentNode是 + e.target.parentNode.nodeName + \n; 
 alert（txt）
} 
 
 document.addEventListener（'click'，handler，false） 

 < div> 
< div> span>菜单1< / span> / div;< span>菜单2< / span>< span>菜单3< / span> 
< / div>  

如果您希望脚本搜索那个 Menu1您应该考虑添加 Menu1

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

，然后调用

 文档。 getElementById（'Menu1'）; 
  

这非常快。

Please have a look to this DOM Tree...

  <div>

      <div>

            <span>  Home1  </span>

      </div>

      <span>  Home2  </span>

      <span>  Home3  </span>

  </div>

Now suppose I have a scenario where somehow I got the innerHTML of first span Home1. Is it possible to get the element span and its parent div by using only this (Home1) information.

解决方案

There are so many ways to get info about your elements.

Using the innerHTML as an identifier is not a good solution.

You probably need some sort of event to that makes you search for that "Menu1"

So here is a click handler that works also on other events that give you information about what you have clicked.

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)

DEMO

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>

If you want that your script searches for that "Menu1" you should consider adding that "Menu1" as an attribute on the span or parentNode.

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

and then call

document.getElementById('Menu1');

Which is very fast.

这篇关于使用其innerHTML查找元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！