使用 getElementById 查找子元素的子元素

Question

我必须编辑table. 这个 DOM 是由第三方工具提供的，我使用 JavaScript 来编辑不同的部分。

<div id="myId">

  <div>

    <div>

      <table>Content I have to edit</table>

    </div>

  </div>

</div>

我尝试使用document.getElementById('myId').children，但是如何编辑孩子的孩子的属性？

Answer 1

你有几个选择：您可以使用document.querySelector查找表：var table = document.querySelector("#myId table");document.querySelector接受任何有效的 CSS 选择器并返回第一个匹配项，因此选择器是#myId table.您可以使用document.getElementById来获取div，然后在该元素（而不是）上使用querySelector或来查找表：getElementsByTagNamedocumentvar div = document.getElementById("myId");var table = div.querySelector("table");// Or: var table = div.getElementsByTagName("table")[0];（请注意版本[0]上的getElementsByTagName，因为您得到的是一个HTMLCollection，而不仅仅是一个元素。）MDN的DOM资料相当不错。（更一般地说，它对网络技术的覆盖非常好。）

Answer 2

假设由于某种原因您不能直接选择表 [1]，那么您可以链接调用.children[0]，或者更好的是firstElementChild调用。let table = document.getElementById('myId').firstElementChild.firstElementChild.firstElementChild;console.log(table);<div id="myId">&nbsp; <div>&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; <table>Content I have to edit</table>&nbsp; &nbsp; </div>&nbsp; </div></div>