javascript - 为什么当兄弟存在时 nextElementSibling 和 nextSibling 为空？

Question

在这个 HTML 结构中:

<table id="outside">
  <tr>
    <td id="t1">one</td>
    <td>a</td>
  </tr>
  <tr>
    <td id="t2">two</td>
    <td>b</td>
  </tr>
</table>

为什么会出现以下脚本:

// Function to change the content of t2
function modifyText() {
  var t2 = document.getElementById("t2");
  console.dir(t2.firstChild.nextElementSibling);
  console.dir(t2.firstChild.nextSibling);
  if (t2.firstChild.nodeValue == "three") {
    t2.firstChild.nodeValue = "two";
  } else {
    t2.firstChild.nodeValue = "three";
  }
}

// add event listener to table
var el = document.getElementById("outside");
el.addEventListener("click", modifyText, false);

为什么 nextElementSibling 和 nextSibling 有空值。我希望它们是兄弟 td 标签。

JSBIN

Answer 1

t2 指的是 td#t2，因为 ID 为“t2”的元素是 td 元素本身。

因此，

t2.firstChild 指的是 t2 中的文本节点，它是它的唯一子节点。独生子女没有任何 sibling 。

您可能打算改为查看 t2 本身:

var t2 = document.getElementById("t2");
console.log(t2.nextElementSibling);
console.log(t2.nextSibling);