如何使用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 我想访问第一个 table_row div 中类名 table_cell 的第二个 div 的 div 内容.

所以基本上我想检索 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

在你的代码中

element1.querySelectorAll('.table_cell')[0]，这是针对第一个元素，即 <div class="table_cell">first</div>。这就是您没有获得预期输出的原因。

我已经到达 element1.querySelectorAll('.table_cell')[1]，因此它将以 <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>

由于您要定位的元素是具有 class table_cell 的最后一个 div，您可以在 table_cell 上使用 :last-of-type class 使用 document.querySelector。但除此之外，如果有超过 2 个元素并且您想定位第一个和最后一个之间的任何元素，您也可以使用 :nth-of-type。

下面是使用 :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>

更多信息请参考:nth-of-type, :last-of-type and child combinator(>)。

Answer 2

您可以使用：

:nth-of-typepseudo-selector
结合 immediate-child 选择器 (>)

示例：

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>

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

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

html

javascript

css

queryselector