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

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!

Related Questions

Seperate strings with regex and panda

1  Asked on January 11, 2021 by sara-daniel

         

Login into SAP using admin user fails

1  Asked on January 11, 2021 by gram77

 

Using LIKE with multiple columns in a table

3  Asked on January 10, 2021 by soldfor

   

Does the value of global variable persist in multiple API calls

2  Asked on January 10, 2021 by shubroto-shuvo

 

React Component not rendering to HTML

1  Asked on January 10, 2021 by red-apple

     

How can I count a pandas dataframe over duplications

4  Asked on January 10, 2021 by toby-chamberlain

     

javascript .eval() gives me undifined

2  Asked on January 10, 2021 by nourza

     

Loop for column names in python

3  Asked on January 10, 2021 by essegn

         

Return array of values from object based on array

2  Asked on January 9, 2021 by user4584963

         

How do I get out of ‘screen’ without typing ‘exit’?

5  Asked on January 9, 2021 by meder-omuraliev

   

How can I regroup ‘sublists’ in a list with Python?

2  Asked on January 9, 2021 by zhengrong

       

Ask a Question

Get help from others!

© 2022 AnswerBun.com. All rights reserved. Sites we Love: PCI Database, MenuIva, UKBizDB, Menu Kuliner, Sharing RPP, SolveDir