为什么.nextElementSibling不返回null？

.nextElementSibling是JavaScript中的一个属性，用于获取当前元素的下一个兄弟元素。

为什么.nextElementSibling不返回null？

在HTML文档中，元素之间的空格、换行符等被视为文本节点，它们也被认为是元素的兄弟节点。所以即使当前元素没有直接的兄弟元素，.nextElementSibling也会返回下一个非文本节点的兄弟元素。

例如，考虑以下HTML代码：

<div id="parent">
  <span>元素1</span>
  <span>元素2</span>
  <span>元素3</span>
</div>

如果我们使用JavaScript代码来获取第一个span元素的下一个兄弟元素，即：

var firstSpan = document.querySelector('#parent span');
var nextSibling = firstSpan.nextElementSibling;

在这种情况下，.nextElementSibling将返回第二个span元素，而不是null，因为第一个span元素后面有一个文本节点（换行符），然后才是第二个span元素。

如果我们想要获取下一个非文本节点的兄弟元素，可以使用以下代码：

var nextSibling = firstSpan.nextElementSibling;
while (nextSibling && nextSibling.nodeType !== 1) {
  nextSibling = nextSibling.nextElementSibling;
}

这段代码将循环遍历兄弟节点，直到找到下一个非文本节点为止。

推荐的腾讯云相关产品和产品介绍链接地址：

• 云服务器（CVM）：https://cloud.tencent.com/product/cvm
• 云数据库 MySQL 版（CDB）：https://cloud.tencent.com/product/cdb_mysql
• 云原生容器服务（TKE）：https://cloud.tencent.com/product/tke
• 人工智能机器学习平台（AI Lab）：https://cloud.tencent.com/product/ailab
• 物联网通信（IoT Hub）：https://cloud.tencent.com/product/iothub
• 移动推送服务（信鸽）：https://cloud.tencent.com/product/tpns
• 对象存储（COS）：https://cloud.tencent.com/product/cos
• 区块链服务（BCS）：https://cloud.tencent.com/product/bcs
• 腾讯云游戏引擎（GSE）：https://cloud.tencent.com/product/gse