使用本机Javascript从DOM元素获取选择器字符串

通常，我们使用

querySelectorAll（'html:eq（0）>body:eq（0）>div.row:eq（0）>div.span4:eq（2）>p.p3:eq（2）

来获取DOM元素

如果我想将元素

target

与本机javascript一起使用来获取选择器字符串，我应该怎么做

例如：

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

p1\u 1


p1\u 2
p1\u 3


p2\u 1
p2\u 2


p2\u 3
陌生人
p3\u 1


p3_2


目标
p1


p2
p3


陌生人

这就是我的想法：

利用元素

target的这些属性，我发现它们很有用：

属性
下一代成员
以前的元素兄弟
父元素

Attribute=>attributes：我可以使用它生成类似于

div.className#idName

的字符串，这并不难做到

Attribute=>nextElementSibling，previousElementSibling：我可以使用它生成类似

：eq（0）

的字符串

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

所以我试着用STEP 3.1：

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

但是我发现我无法指定目标元素是哪一个，因为他有太多相同的兄弟具有相同的标记名和类名

---

我想知道你们是否有什么好主意？

如果您试图找到基于html的元素，在本例中为“target”，您可以这样做：

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

var elms=document.querySelectorAll（'p'）；
目标向量；
对于（变量i=0；i

如果您试图基于html查找元素，在本例中为“target”，则可以执行以下操作：

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

var elms=document.querySelectorAll（'p'）；
目标向量；
对于（变量i=0；i

：eq（）不是CSS选择器。此外，任何任意元素都可以通过至少一个选择器唯一地访问。是否尝试选择其中包含内容“target”的元素？有点不清楚您的目标是什么。@TylerH抱歉，内容为“target”的元素只是一个示例，我想在最后创建一个函数，用于任何element@BoltClock谢谢你的回复，我知道有一些武断的因素，这只是一个例子，当然，最后，此功能用于uniqelement@LeylaLee那么您想选择作为其父元素最后一个子元素的所有元素吗？或者特别是每组

元素的最后一个

：eq（）不是CSS选择器。此外，任何任意元素都可以通过至少一个选择器唯一地访问。是否尝试选择其中包含内容“target”的元素？有点不清楚您的目标是什么。@TylerH抱歉，内容为“target”的元素只是一个示例，我想在最后创建一个函数，用于任何element@BoltClock谢谢你的回复，我知道有一些武断的因素，这只是一个例子，当然，最后，此功能用于uniqelement@LeylaLee那么您想选择作为其父元素最后一个子元素的所有元素吗？或者特别是每组
元素的最后一个
？不，OP有一个元素，正在尝试为它构建一个选择器字符串。@BoltClock似乎她没有定义一个可以简化为唯一选择器的案例。如果是她正在搜索的唯一内容，以上答案是有效的。谢谢你的回复，mac。但是如果还有其他一些元素的innerHTML也是“taget”呢？但是其他元素与函数….@LeylaLee的输入不同，您可以基于document.querySelectorAll应用子选择。我不确定我是否足够理解您的用例，以便在这里提供选择器。你能解释一下“其他元素与函数的输入不一样”是什么意思吗？@mac很抱歉我的英语不好，可以用
示例
p1_1
p1_2
p1_3
p2_1
p2_2
目标陌生人
p3_1
p3_2
目标
否，OP有一个元素，正在尝试为其构建选择器字符串。@BoltClock似乎没有定义一个可以简化为唯一选择器的案例。如果是她正在搜索的唯一内容，以上答案是有效的。谢谢你的回复，mac。但是如果还有其他一些元素的innerHTML也是“taget”呢？但是其他元素与函数….@LeylaLee的输入不同，您可以基于document.querySelectorAll应用子选择。我不确定我是否足够理解您的用例，以便在这里提供选择器。你能解释一下“其他元素与函数的输入不一样”是什么意思吗？@mac很抱歉我的英语不好，T.T，ok for
示例
p1_1
p1_2