使用innerHTML查找元素

Question

请看看这个DOM树......

  <div>

      <div>

            <span>  Home1  </span>

      </div>

      <span>  Home2  </span>

      <span>  Home3  </span>

  </div>

现在假设我有一个场景,不知怎的,我得到了第一个跨度Home1的innerHTML .是否可以通过仅使用此(Home1)信息来获取元素跨度及其父div.

Answer 1

var mySpans = document.getElementsByTagName(span);

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

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

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

}

}

这选择parent具有innerHTMLHome1的跨度

Answer 2

这就是你想要的.

这是html:

<label>opal fruits</label>

这是jQuery:

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

Answer 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)

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)

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

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

然后打电话

document.getElementById('Menu1');

这是非常快的。