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

Question

I have the DOM structure like below


   
      first
      chocolate products

   
   
      third
      fourth

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.

user_12195527 · Answer

In your code

element1.querySelectorAll('.table_cell')[0], this is targeting the first element i.e., first. 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

chocolate products

.

const element = document.querySelector('.table_body');
const element1 = element.querySelectorAll('.table_row')[0]
const element2 = element1.querySelectorAll('.table_cell')[1].innerHTML;
console.log(element2);


  
    first
    chocolate products
  
  
    third
    fourth

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


  
    first
    chocolate products //want to access this div content
  
  
    third
    fourth

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

user_3897775 · Answer

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


    
        first
        chocolate products //want to access this div content
    
    
        third
        fourth

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

2 Answers