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

我有一个分层

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>

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

获取

标记的内容，在本例中，对于

b3

文本，我想要的是

第三个文本

不知道怎么办。由于一个类多次出现，我只想得到一个包含单击按钮的特定类。
您可以在父元素上使用，并为每个父元素选择
内的
.class4
元素

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

请参阅工作代码段


函数bclick（elm）{
const parent=elm.parentNode.parentNode；
console.log（parent.querySelector（'.class4 p'）.innerHTML）
}

b1
第一个文本

b2
第二文本

b3
第三文本

b4
第四文本

您可以在父节点上使用：

Document方法
querySelector（）
返回文档中与指定选择器或选择器组匹配的第一个元素。如果未找到匹配项，则返回null


函数bclick（obj）{
让class1obj=obj.parentNode.parentNode.querySelector（'.class4>p'）；
console.log（ClassObj.textContent）；
}

b1
第一个文本

b2
第二文本

b3
第三文本

b4
第四文本

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

人们普遍认为使用内联事件监听器是不好的做法，因此我宁愿使用
HTMLElement.prototype.addEventListener
与使用
parentNode.parentNode
相比，使用
Element.prototype.closest
查找与作为参数传递的选择器匹配的最近祖先，对于DOM结构中未来可能发生的更改更可靠、更健壮

for（document.querySelectorAll（'.class3'）的const按钮）{
按钮。addEventListener（'click'，函数（事件）{
const pText=this.closest（'.class1'）.querySelector（'.class4 p'）.textContent；
console.log（pText）；
})
}

b1
第一个文本

b2
第二文本

b3
第三文本

b4
第四文本

这更干净。谢谢