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，然后对该元素（而不是document）使用querySelector或getElementsByTagName找到表格：
```
var div = document.getElementById("myId");
var table = div.querySelector("table");
// Or: var table = div.getElementsByTagName("table")[0];
```
（请注意[0]版本的getElementsByTagName，因为您得到的是HTMLCollection，而不仅仅是一个元素。）

MDN的DOM材料非常好。（通常，它对web technologies的覆盖范围非常好。）

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>

[1]如果可以的话，那么按照T.J.的回答querySelector会更容易维护。

Answer 3

firstElementChild属性返回一个DOM对象，您可以在其中使用相同的firstElementChild属性。查看文件：

或者如果您需要一个特定项目而不是第一个项目，则需要使用children属性：

document.getElementById("myId").children[2].children[2]