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

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 , 我想得到文本 third text在 javascript 中，而不是 jquery。

所以在我的 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.
}

我想进入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>