使用innerHTML查找元素

Question

请查看此DOM树...

  <div>

      <div>

            <span>  Home1  </span>

      </div>

      <span>  Home2  </span>

      <span>  Home3  </span>

  </div>

现在假设我有这样一个场景，我以某种方式获得了第一个span的innerHTMLHome1。是否可能仅使用此(Home1)信息获取元素span及其父div。

- DEV

---

你可以遍历每个元素并将其innerHTML与你要查找的元素进行比较。然后找到父元素就很容易了。 - Ruben Serrate

你使用哪种编程语言？还是说这是一种不受编程语言限制的通用语言？ - Felix Kling

@FelixKling _ Javascript - DEV

循环遍历所有的div是一个大问题。如果你打算点击该元素，那就很容易。如果告诉我们你想要做什么，我们可以给你一些简单的解决方案。 - cocco

没有ID或类？你必须使用XPATH表达式。 - KdgDev

Answer 1

这就是你想要的。

以下是HTML代码：

<label>opal fruits</label>

这里是jQuery：

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

- Zaheer Ahmed

---

你是怎么想到这位原帖作者在使用 jQuery 的？ - Felix Kling

是的，好吧，你之前不可能知道的:P 如果没有库标记的问题的答案应该至少包含一个没有库的解决方案。 - Felix Kling

在我回答时没有标签。 - Zaheer Ahmed

Answer 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 元素的 父元素

- Green Wizard

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)

<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');

这非常快速。

- cocco

Answer 4

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

您可以使用jQuery和它的contains选择器(文档)（fiddle）：

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

- Pinal

Answer 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!");
}

- Praind

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

- Weilory