Question

看看html的这一部分：

 <table id="Table">
    <tr>
       <td><img src="Sample Pics/Koala.jpg""></td>
       <td><img src="Sample Pics/Desert.jpg"></td>
       <td><img src="Sample Pics/Fall.jpg"></td>
    </tr>

    <tr>
       <td><*img src="Sample Pics/Fish.jpg"></td>
       <td><img src="Sample Pics/Fresh Fruit Platter.jpg"></td>
       <td><img src="Sample Pics/Hydrangeas.jpg"></td>
    </tr>
</table>

我想通过js更改（例如）*图像源。我知道它会是这样的：

document.getElementById("Table").children[?].BlahBlahBlah.src = "New Source";

但我不知道。

有些地方可以了解孩子吗？我浏览了W3Schools.com，但我发现没什么用处。

Answer 1

我真的对孩子和孩子的节点感到困惑

它们之间的区别在于，children只包含子元素节点（“tags”），childNodes也包含文本节点（还有一些，如同评论等）。由于许多childNodes是空的/仅空白文本节点，因此该属性对DOM遍历不是很有用。只有在您真正对文本感兴趣时才使用它。

我想通过js
更改（例如）*图像源

对于表，还有.rows集合，可以方便地访问不同表部分中的所有行。 those row elements中的每一个都有一个.cells集合，因此您可以将图像作为

访问

document.getElementById("Table").rows[1].cells[0].children[0]

Answer 2

假设：

var table = document.getElementById("Table");

然后：

table.children返回包含子元素的实时HTMLCollection （HTMLCollection[tbody]）
table.childNodes返回包含所有子节点的NodeList（例如，包括文本节点以及元素（NodeList[<TextNode textContent="\n ">, tbody]））

您可能更愿意更直接地检索目标td：

table.getElementsByTagName("td")[3]

甚至：

table.getElementsByTagName("img")[3]

我真的对JS中的children和childNodes感到困惑

2 个答案: