JavaScript-<td> 不是 <tr> 的子节点吗？
Posted
技术标签:
【中文标题】JavaScript-<td> 不是 <tr> 的子节点吗？【英文标题】：JavaScript-Isn't <td> a Child Node of <tr>? 【发布时间】：2021-03-06 18:46:35 【问题描述】：以下代码可以正常工作，我可以获取所选行的第一个单元格的值：
document.getElementById("tst").onclick = function()
var chosen = document.getElementsByClassName('selected');
var myTd = chosen[0].getElementsByTagName('td');
var rightCell = myTd[0];
console.log(rightCell.innerhtml);
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>table_js_test002.html</title>
<link href="css/test_table.css" rel="stylesheet">
</head>
<body>
<table id="table">
<tr>
<td>1 Ferrari F138</td>
<td>1 000€</td>
<td>1 200€</td>
</tr>
<tr class="selected">
<td>2 Ferrari F138</td>
<td>1 000€</td>
<td>1 200€</td>
</tr>
<tr>
<td>3 Ferrari F138</td>
<td>1 000€</td>
<td>1 200€</td>
</tr>
</table>
<input type="button" id="tst" value="OK" onclick="fnselect()" />
</body>
</html>这也有效：
var myTd = chosen[0].cells[0].innerHTML;
我的问题是，从我对 javascript 和 DOM 节点导航的有限了解来看，<td> 不是<tr> 的孩子吗？为什么我不能得到
var myTd = chosen[0].firstChild.innerHTML
上班？
【问题讨论】：
请删除序言和对其他用户/问题的引用。尽可能以最直接的方式提出您的问题，没有背景故事，以及重现您的问题的最短可运行示例。 好的。不想盗用别人的代码，就这么简单的一段 HTML 就是没有给予应有的功劳。 【参考方案1】：根据MDN，使用firstChild时：
任何空格都会创建一个
#text节点，从单个空格到多个空格、回车、制表符等等。
只需使用firstElementChild:
myTd = chosen[0].firstElementChild.innerHTML
【讨论】：
值得注意的是，如果你把你的 HTML 写得一塌糊涂，<tr><td>etc</td></tr>，TD 可以是第一个孩子。只是……没有人这样做，因为我们喜欢自己。这里的“问题”是代码中的空白，而不是 API。【参考方案2】：
问题是 getElementsByTagName 返回一个 HTMLCollection，而不是 NodeList。两者都是类似对象的数组，但 HTMLCollection 包含 elements 和 firstChild 仅适用于 nodes。
如果您想了解有关两者的更多详细信息
NodeList vs HTMLCollection
Node vs Element
【讨论】：
是的，这部分我理解，这就是为什么我在集合名称之后使用索引 [0]。 chosen[0]，应该是一个元素，myTd[0]也是。以上是关于JavaScript-<td> 不是 <tr> 的子节点吗？的主要内容，如果未能解决你的问题，请参考以下文章
急！如何用javascript写一个html页内关键字的搜索