如何为TR元素设置name和id？解决firstChild访问TR元素失效问题

嘿，我懂你遇到的麻烦了！你想用firstChild或lastChild获取表格里的<tr>元素，但发现通过ID/Name属性好像不管用？其实问题出在HTML解析时的空白文本节点上——浏览器会把表格标签之间的换行、空格都解析成文本节点，所以firstChild拿到的根本不是<tr>，而是这些看不见的文本节点！

先看问题根源 #

你的表格结构里，<table id="tbl">和第一个<tr>之间有换行，浏览器会把这个换行当成一个文本节点，所以document.getElementById('tbl').firstChild返回的是这个文本节点，不是你要的<tr>元素，自然没法通过ID/Name属性操作它。

几种可行的解决方案 #

1. 使用firstElementChild/lastElementChild（推荐）

这两个方法专门用来获取父元素下的第一个/最后一个元素节点，会自动跳过文本节点：

var table = document.getElementById('tbl');
// 获取第一个tr
var firstTr = table.firstElementChild;
// 获取最后一个tr
var lastTr = table.lastElementChild;

// 测试输出
document.getElementById('out').textContent = `第一个TR的ID：${firstTr.id}，第二个TR的name：${lastTr.name}`;

2. 用children属性获取子元素集合

children属性只包含元素节点，不包含文本节点，你可以通过索引访问：

var table = document.getElementById('tbl');
var firstTr = table.children[0];
var secondTr = table.children[1];

3. 直接通过ID/Name获取TR元素（更简单）

其实你根本不用绕弯子找子节点，直接用getElementById或getElementsByName就能拿到目标TR：

// 通过ID获取第一个TR
var firstTr = document.getElementById('first');
// 通过Name获取第二个TR（注意getElementsByName返回的是集合）
var secondTr = document.getElementsByName('second')[0];

修正后的完整示例代码 #

<html>
<body>
  <table id="tbl">
    <tr name="first" id="first">
      <td>123</td>
      <td>456</td>
    </tr>
    <tr name="second">
      <td>789</td>
      <td>987</td>
    </tr>
  </table>
  <span id="out"></span>

  <script>
    var table = document.getElementById('tbl');
    var firstTr = table.firstElementChild;
    var lastTr = table.lastElementChild;
    
    document.getElementById('out').textContent = `第一个TR内容：${firstTr.textContent.trim()}，最后一个TR内容：${lastTr.textContent.trim()}`;
  </script>
</body>
</html>

这样就能准确获取到你想要的<tr>元素啦！

内容的提问来源于stack exchange，提问作者Nulik