Question

我正在编写用户脚本以重新格式化表格，而我正在遇到一些我不理解的东西。简短的版本是，当我要求一个元素的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

我正在尝试将“删除”链接从每行的最后一个元素分隔为每行末尾的新元素。

我的用户代码代码就是这个。

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发生了什么？

Answer 1

您正在寻找console.log("offset: " + $(".divMain").offset().top); console.log("height: " + $(".divMain").height()); console.log("comment: " + $(".comment").offset().top);。

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

Answer 2

您所缺少的是，您的源代码很好并且缩进和人类可读的事实导致您在DOM中为所有这些选项卡和标记之间的换行符创建所有这些文本节点。

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

万一你想知道，这还不足以删除漂亮的格式。您只需要使用像@Entity Black建议的.lastElementChild或.children[x.children.length - 1]这样的代码来编写代码，以确保您只获得一个元素，而不是一个节点。

为什么元素的lastChild不是元素？

2 个答案: