Question

我有一个分层的div部分，如下所示：

<div class="class1">
    <div class="class2">
        <button class="class3" onclick="bclick(this)">b1</button>
    </div>
    <div class="class4">
        <p>first text</p>
    </div>
</div>
<div class="class1">
    <div class="class2">
        <button class="class3" onclick="bclick(this)">b2</button>
    </div>
    <div class="class4">
        <p>second text</p>
    </div>
</div>
<div class="class1">
    <div class="class2">
        <button class="class3" onclick="bclick(this)">b3</button>
    </div>
    <div class="class4">
        <p>third text</p>
    </div>
</div>
<div class="class1">
    <div class="class2">
        <button class="class3" onclick="bclick(this)">b4</button>
    </div>
    <div class="class4">
        <p>fourth text</p>
    </div>
</div>

当我单击任意按钮时，说出按钮b3，我想用JavaScript而不是jquery来获取文本third text。

因此在我的bclick()函数中，我将进入根元素，如下所示：

function bclick(obj) {
    let class1obj = obj.parentNode.parentNode;
    // don't know what to do next to get to class 4 and then get the <p> text. Please help.
}

我想进入class4来获取<p>标签的内容，在这种情况下，我想要的b3文本是third text。

请帮助。不知道该怎么办。请注意，因为一个类多次出现，我只想获取包含单击按钮的特定类。

Answer 1

您可以在父级上使用Element.querySelector()并为每个父级元素在<p>中选择.class4元素。

obj.parentNode.parentNode.querySelector('.class4 p')

查看有效代码段

function bclick(elm){
  const parent = elm.parentNode.parentNode;
  console.log(parent.querySelector('.class4 p').innerHTML)
}

<div class="class1">
    <div class="class2">
        <button class="class3" onclick="bclick(this)">b1</button>
    </div>
    <div class="class4">
        <p>first text</p>
    </div>
</div>
<div class="class1">
    <div class="class2">
        <button class="class3" onclick="bclick(this)">b2</button>
    </div>
    <div class="class4">
        <p>second text</p>
    </div>
</div>
<div class="class1">
    <div class="class2">
        <button class="class3" onclick="bclick(this)">b3</button>
    </div>
    <div class="class4">
        <p>third text</p>
    </div>
</div>
<div class="class1">
    <div class="class2">
        <button class="class3" onclick="bclick(this)">b4</button>
    </div>
    <div class="class4">
        <p>fourth text</p>
    </div>
</div>

Answer 2

您可以在父节点上使用Document.querySelector()：

Document方法querySelector()返回文档中与指定选择器或选择器组匹配的第一个Element。如果没有找到匹配项，则返回null。

function bclick(obj) {
  let class1obj = obj.parentNode.parentNode.querySelector('.class4 > p');
  console.log(class1obj.textContent);
}

<div class="class1">
    <div class="class2">
        <button class="class3" onclick="bclick(this)">b1</button>
    </div>
    <div class="class4">
        <p>first text</p>
    </div>
</div>
<div class="class1">
    <div class="class2">
        <button class="class3" onclick="bclick(this)">b2</button>
    </div>
    <div class="class4">
        <p>second text</p>
    </div>
</div>
<div class="class1">
    <div class="class2">
        <button class="class3" onclick="bclick(this)">b3</button>
    </div>
    <div class="class4">
        <p>third text</p>
    </div>
</div>
<div class="class1">
    <div class="class2">
        <button class="class3" onclick="bclick(this)">b4</button>
    </div>
    <div class="class4">
        <p>fourth text</p>
    </div>
</div>

Answer 3

我想从两个方面改进公认的答案：

使用内联事件侦听器被广泛认为是不好的做法，所以我宁愿使用HTMLElement.prototype.addEventListener。
使用parentNode.parentNode可以找到与匹配作为参数传递的选择器最接近的祖先，而不是Element.prototype.closest，对于将来在DOM结构中可能发生的更改更可靠，更可靠。

for (const button of document.querySelectorAll('.class3')) {
  button.addEventListener('click', function(event) {
    const pText = this.closest('.class1').querySelector('.class4 p').textContent;
    console.log(pText);
  })
}

<div class="class1">
  <div class="class2">
    <button class="class3">b1</button>
  </div>
  <div class="class4">
    <p>first text</p>
  </div>
</div>
<div class="class1">
  <div class="class2">
    <button class="class3">b2</button>
  </div>
  <div class="class4">
    <p>second text</p>
  </div>
</div>
<div class="class1">
  <div class="class2">
    <button class="class3">b3</button>
  </div>
  <div class="class4">
    <p>third text</p>
  </div>
</div>
<div class="class1">
  <div class="class2">
    <button class="class3">b4</button>
  </div>
  <div class="class4">
    <p>fourth text</p>
  </div>
</div>

如何仅在具有给定类名称的特定div中查找dom子节点？

3 个答案: