CODEWITHSUNDEEP
javascript
user3243499
user3243499

Reputation: 3161

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

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.

Upvotes: 4

Views: 202

Answers (3)

connexo
connexo

Reputation: 56773

I would like to improve the accepted answer in two regards:

  1. It is widely considered bad practice to use inline event listeners, so I'll rather use HTMLElement.prototype.addEventListener.
  2. Instead of doing parentNode.parentNode it is more reliable and robust towards possible future changes in DOM structure to use Element.prototype.closest which finds the nearest ancestor matching the selector passed as an argument.

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>

Upvotes: 0

Maheer Ali
Maheer Ali

Reputation: 36584

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>

Upvotes: 5

Mamun
Mamun

Reputation: 68923

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>

Upvotes: 1

Related Questions