为什么是n't '元素a <td/>元素

Why isn't lastChild of a <tr/> element a <td/> element?

本文关键字：元素 td 为什么      更新时间：2023-09-26

我正在写一个userscript来重新格式化一个表，我遇到了一些我不理解的东西。简而言之，当我请求一个元素的lastChild时，我得到的是文本，而不是我所期望的行中的最后一个。我用错lastChild了吗?

html是这样的:

<tbody id="questions">
  <tr class="drag-row" id="drag-row-4819" style="cursor: auto; left: 268.34375px;">
    <td style="background-color: #eee; text-align: center; ;"><small class="muted">Page 1</small></td>
    <td style="width:15px;"></td>
    <td class="text-right" style="width:35px;">1</td>
    <td>Do you want to fill out the priority list?</td>
    <td style="width:150px;">Multiple choice (only one answer)</td>
    <td>
      <a href="/customers/4/accounts/2/portals/211/forums/Forum_577/issues/Issue_2797/survey_questions/4819">Edit</a>
      <a data-confirm="WARNING: Are you sure you want to delete this question?" data-method="delete" href="/customers/4/accounts/2/portals/211/forums/Forum_577/issues/Issue_2797/survey_questions/4819" rel="nofollow">Delete</a>
    </td>
  </tr>
  etc., more <tr/> elements here

我试图将"删除"链接从每行的最后一个元素分离到每行末尾的新元素。

我的userscript代码是这样的

var rows = document.getElementById("questions").children,
  separateDeleteLink = function(row) {
    var deleteCell = row.children[row.children.length - 1];
    if (deleteCell.children.length == 2) {
      var deleteLink = deleteCell.children[1];
      console.log(deleteLink);
      row.appendChild(document.createElement("td")).appendChild(deleteLink);
    }
  };
[].forEach.call(rows, separateDeleteLink);

对于某些行，例如var deleteCell = row.children[row.children.length - 1]，我真的更喜欢写var deleteCell = row.lastChild。但是当我这样做的时候，它不起作用。console.log(row.lastChild)返回一个名为#text的对象。

顺便说一下，我是Javascript新手，所以我很欣赏任何风格或其他技巧在我的代码。但首先，lastChild是怎么回事?

您正在寻找row.lastElementChild。

注意DOM是由节点组成的。节点不仅是元素，还包括空格、文本和其他您可能不想处理的垃圾。

你错过的是，你的源代码很好，缩进和人类可读的事实，导致你在你的DOM中有所有这些文本节点的所有那些制表符和换行符之间的标记。

这就是为什么.lastChild()返回一个文本节点-它实际上是关闭</tr>标记之前的最后一个节点。

如果你想知道，这不是足够的理由来删除漂亮的格式。您只需要使用.lastElementChild(如@Entity Black所建议的)或.children[x.children.length - 1](如您一直在做的那样)来编写代码，以确保您只获得一个元素，而不是一个节点。

相关文章：