如何在给定类名的特定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. Please help.}我想进入class4获取<p>标签的内容，在这种情况下b3我想要的文本third text。请帮忙。不知道该怎么做。请注意，因为多次出现一个类，我想只获得一个包含单击按钮的特定类。

Answer 1

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

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

请参阅工作代码段

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>