使用 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或来查找表：getElementsByTagNamedocument

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

  <div>

    <div>

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

    </div>

  </div>

</div>