javascript - 如何使用querySelector检索div第一个子元素兄弟节点？

Question

我有如下的 DOM 结构

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

从上面的 HTML 我想访问第二个 div 的 div 内容，类名是 table_cell内第一 table_row分区
所以基本上我想用类名检索 div 的内容 table_cell与内容巧克力产品。
我试过像下面那样做

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

当我登录时 element2值它给出了一些奇怪的输出而不是文本“巧克力产品”
有人可以帮我解决这个问题。谢谢。

Answer 1

您可以使用:

:nth-of-type伪选择器

结合直接子选择器 ( > )

示例:

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

工作示例:

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>