javascript - 我真的对 JS 中的 Children 和 childNodes 感到困惑

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

但我对此一无所知。

有哪些地方可以了解 child ？我浏览了 W3Schools.com 但没有发现任何有用的东西。

Answer 1

I've really got confused with children and childNodes

它们之间的区别在于，虽然children仅包含子元素节点(“标签”)，但childNodes还包含文本节点(还有一些，比如评论等)。由于许多 childNode 都是空/仅包含空格的文本节点，因此该属性对于 DOM 遍历不是很有用。仅当您确实对文本感兴趣时才使用它。

I want to change the (for example) *image source via js

对于表，还有 .rows集合，提供对不同表部分中所有行的方便访问。每个 those row elements还有一个 .cells 集合，以便您可以通过以下方式访问图像

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