时间戳

首页 > 解决方案 > 如何使用 querySelector 检索 div 第一个子元素兄弟节点？

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

问题描述

我有如下的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_cell在第一个div 中使用类名访问第二个 div 的 div 内容table_row。

所以基本上我想table_cell用内容巧克力产品检索带有类名的 div 的内容。

我试图像下面那样做

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

当我记录element2值时，它会给出一些奇怪的输出，而不是文本“巧克力产品”

有人可以帮我解决这个问题。谢谢。

标签： javascripthtmlcssqueryselector

解决方案

在您的代码中

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

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

下面是使用: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-typechild combinator(>)

推荐阅读