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

如何解决如何使用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内以类名table_row访问第二个div的div内容。

因此，基本上，我想检索具有内容巧克力产品的类名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的值时，它会给出一些奇怪的输出，而不是文本“巧克力产品”

有人可以帮助我解决此问题。谢谢。

解决方法

在您的代码中

• 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的最后一个table_cell，因此可以使用:last-of-type在table_cell类上使用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和child combinator(>)。

,

您可以使用：

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