TransWikia.com

How to retrieve the div first child element sibling node using querySelector?

Stack Overflow Asked by stackoverflow_user on November 29, 2020

I have the DOM structure like below

<div class="table_body">
   <div class="table_row">
      <div class="table_cell">first</div>
      <div class="table_cell">chocolate products</div><!-- want to access this div content -->
   </div>
   <div class="table_row">
      <div class="table_cell">third</div>
      <div class="table_cell">fourth</div>
   </div>
</div>

From the above HTML I want to access the div content of second div with classname table_cell inside first table_row div.

So basically I want to retrieve the content of div with classname table_cell with content chocolate products.

I have tried to do it like below

const element = document.querySelector('.rdt_TableBody');
const element1 = element.querySelectorAll('.rdt_TableRow')[0]
const element2 = element1.querySelectorAll('.rdt_TableCell')[0].innerHTML;

When I log element2 value it gives some strange output and not the text "chocolate products"

Could someone help me how to fix this. Thanks.

csshtmljavascriptqueryselector

2 Answers

You can use:

  • the :nth-of-type pseudo-selector
  • combined with the immediate-child selector (>)

Example:

const selectedDiv = document.querySelector('.table_body > div:nth-of-type(1) > div:nth-of-type(2)');

Working Example:

const selectedDiv = document.querySelector('.table_body > div:nth-of-type(1) > div:nth-of-type(2)');

selectedDiv.style.color = 'white';
selectedDiv.style.backgroundColor = 'red';
<div class="table_body">
    <div class="table_row">
        <div class="table_cell">first</div>
        <div class="table_cell">chocolate products</div> //want to access this div content
    </div>
    <div class="table_row">
        <div class="table_cell">third</div>
        <div class="table_cell">fourth</div>
    </div>
</div>

Correct answer by Rounin on November 29, 2020

In your code

  • element1.querySelectorAll('.table_cell')[0], this is targeting the first element i.e., <div class="table_cell">first</div>. That's the reason why you are not getting the expected output.

I have made it to element1.querySelectorAll('.table_cell')[1], so that it'll target <div class="table_cell">chocolate products</div>.

const element = document.querySelector('.table_body');
const element1 = element.querySelectorAll('.table_row')[0]
const element2 = element1.querySelectorAll('.table_cell')[1].innerHTML;
console.log(element2);
<div class="table_body">
  <div class="table_row">
    <div class="table_cell">first</div>
    <div class="table_cell">chocolate products</div>
  </div>
  <div class="table_row">
    <div class="table_cell">third</div>
    <div class="table_cell">fourth</div>
  </div>
</div>

Since the element that you want to target is the last div with having class table_cell, you can use :last-of-type on table_cell class using document.querySelector. But otherwise you can also use :nth-of-type if there are more than 2 elements and you want to target any element in between first and last.

Below is the example using :last-of-type.

const elem = document.querySelector(".table_row > .table_cell:last-of-type");
console.log(elem?.innerHTML);
<div class="table_body">
  <div class="table_row">
    <div class="table_cell">first</div>
    <div class="table_cell">chocolate products</div> //want to access this div content
  </div>
  <div class="table_row">
    <div class="table_cell">third</div>
    <div class="table_cell">fourth</div>
  </div>
</div>

For more info you can refer :nth-of-type, :last-of-type and child combinator(>).

Answered by Nithish on November 29, 2020

Add your own answers!

Ask a Question

Get help from others!

Recent Answers

Recent Questions

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP