How to find DOM child nodes only within a specific div with a give class name?

Question

I have a hierarchical div section as follows:

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

When I click on any button, say button b3, I want to get the text third text in javascript, not jquery.

So in my bclick() function, I am getting to the root element as follows:

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

I want to get into class4 to get the content of <p> tag, in this case for b3 text I want is third text.

Not sure how to do. Since there a multiple occurrence of a class, I want to get only a specific class which contains the button clicked.

Answer 1

You can use Element.querySelector() on parent and select the <p> element inside .class4 for each parent element.

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

See the working snippet

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

You can use Document​.query​Selector() on the parent node:

The Document method querySelector() returns the first Element within the document that matches the specified selector, or group of selectors. If no matches are found, null is returned.

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>