使用本机 Javascript 从 DOM 元素中获取选择器字符串 [重复]

Question

通常，我们使用querySelectorAll('html:eq(0) > body:eq(0) > div.row:eq(0) > div.span4:eq(2) > p.p3:eq(2)') 来获取DOM ELEMENT。

如果我想使用带有原生 javascript 的 ELEMENT <p class="p3">target</p> 来获取选择器字符串，我应该怎么做？

例如：

<div class="row">
    <div class="span4">
        <p class="p1">p1_1<p>
        <br>
        <p class="p1">p1_2<p>
        <p class="p1">p1_3<p>
    </div>
    <br>
    <div class="span4">
        <p class="p2">p2_1<p>
        <p class="p2">p2_2<p>
        <br>
        <p class="p2">p2_3<p>
    </div>
    <p>stranger</p>
    <div class="span4">
        <p class="p3">p3_1<p>
        <br>
        <p class="p3">p3_2<p>
        <br>
        <p class="p3">target<p>
    </div>
<div>
<div class="row">
    <div class="span3">
        <p class="p3">p1<p>
        <br>
        <p class="p3">p2<p>
        <p class="p3">p3<p>
    </div>
<div>
<br>
<div class="row">
    <p>stranger</p>
<div>

这就是我的想法：

1. 利用元素<p class="p3">target</p> 的这些属性，我发现这些很有用：
   • 属性
   • 下一个元素兄弟
   • previousElementSibling
   • 父元素
2. Attribute => attributes：我可以用它生成像div.className#idName这样的字符串，这并不难。
3. Attribute => nextElementSibling, previousElementSibling：我可以用它生成像:eq(0)这样的字符串。

我遇到的问题是Step3，因为如果两个DIV之间有BR，那么这两个ElementSibling将返回BR，这意味着BR被视为兄弟这两个具有相同类的 div，但这不是我想要的。

所以我尝试考虑使用Step3.1：

3.1。 Attribute => parentElement：使用元素的父元素获取eq，它是谁？ 0、1、2.....

但是我发现我无法指定目标元素是哪一个，因为他有很多相同的兄弟有相同的tagName和className....

我想知道你们有什么好的想法吗？

Answer 1

如果您尝试根据 html 查找元素，在本例中为“目标”，您可以这样做：

var elms = document.querySelectorAll('p');
var targetElm;
for (var i = 0; i < elms.length; i++) {
   if (elms[i].innerHTML === 'target') {
       targetElm = elms[i];
   }
}