JS兼容旧浏览器获取兄弟元素的Polyfill实现方案

一、核心痛点：Node 节点与 Element 元素兄弟遍历的本质差异

在进行 DOM 树节点遍历时，很多初学者在旧版环境中经常遭遇“获取兄弟元素得到 undefined 或无法读取 class/style 属性”的报错。出现这一现象的根源在于 W3C DOM 规范中 Node（节点） 与 Element（元素） 两个概念的层级差异。

在 HTML 标记语言中，为了保证代码的可读性，开发者会在标签之间进行换行、空格和缩进排版，并在必要时添加 HTML 注释。但在浏览器解析 HTML 构建 DOM 树时，这些字符并不会凭空消失：

• 文本节点（Text Node，nodeType === 3）：标签间的每一个换行符（ ）、回车符（ ）和空格均会被实例化为文本节点。
• 注释节点（Comment Node，nodeType === 8）：形如 <!-- 提示说明 --> 的注释也会作为独立节点驻留在 DOM 树中。
• 元素节点（Element Node，nodeType === 1）：真实的 HTML 标签（如 <div>、<li> 等）。

旧版浏览器原生的 previousSibling 和 nextSibling 属性定义在 Node.prototype 上，它们执行的是纯粹的物理链表单步前移或后移，绝不区分节点类型。因此，当开发者试图通过 target.nextSibling 获取下一个列表项时，往往命中的只是中间紧随的一个换行空白文本节点。

为了解决这种反复处理非元素干扰的繁琐问题，W3C 后续在 Element Traversal 规范中正式引入了 previousElementSibling、nextElementSibling、firstElementChild、lastElementChild 和 childElementCount 这一组专属属性。这组属性直接过滤掉所有文本与注释节点，只在纯元素节点之间进行跳转。

二、核心算法推导与逐行步骤实现

要抹平新旧浏览器的鸿沟，核心算法本质上是一个受控的方向性单向链表遍历。算法需要满足两个关键判定条件：一是防止指针越界出现空指针异常，二是准确识别并仅接纳 nodeType === 1 的元素节点。

算法执行步骤详解

1. 输入校验与指针初始化：接收基准节点 el。如果 el 为空或并非有效节点，立即终止并返回 null。
2. 单步方向递进：根据查找目标，将临时工作指针 node 指向基准节点的 nextSibling（向后查找）或 previousSibling（向前查找）。
3. 边界与循环检查：
   • 若 node === null，说明已经遍历至当前父容器的最前侧或最后侧，查找结束，返回 null。
   • 若 node !== null，但其 node.nodeType !== 1（即遇到文本、空白或注释），则将 node 再次单步前移（node = node.nextSibling），并重复当前步骤。
4. 命中元素节点：一旦判定 node.nodeType === 1 成立，即表明成功找到最近的相邻元素，跳出循环并返回该 node。

三、原型链 Polyfill 方案：为 Element.prototype 注入属性

在规范化的现代代码中，开发者期望能够直接在元素实例上以属性访问器的方式调用（例如 node.nextElementSibling），而不是随处引入冗余的外部包装函数。通过 ES5 规范中的 Object.defineProperty，我们可以将该算法以 getter 的形式直接注入到 Element.prototype 中。

1. 特性检测（Feature Detection）

Polyfill 补丁必须具备良好的共存性。在注入前必须首先检查当前环境是否已经原生支持该特性。检测方式通常是利用 in 操作符或原型检测：

// 检查当前环境的原型链或文档根节点是否已原生支持 nextElementSibling
var isSupported = 'nextElementSibling' in document.documentElement;
if (!isSupported) {
  // 执行 Polyfill 注入逻辑
}

2. 原型 Getter 补丁实现代码

(function() {
  // 若环境已原生支持，则直接退出，不覆盖高效原生实现
  if ('nextElementSibling' in document.documentElement &&
      'previousElementSibling' in document.documentElement) {
    return;
  }

  // 确保宿主存在 Element 构造函数与 Object.defineProperty
  if (typeof Element !== 'undefined' && Object.defineProperty) {
    // 注入 previousElementSibling
    if (!('previousElementSibling' in Element.prototype)) {
      Object.defineProperty(Element.prototype, 'previousElementSibling', {
        get: function() {
          var el = this.previousSibling;
          while (el && el.nodeType !== 1) {
            el = el.previousSibling;
          }
          return el;
        },
        configurable: true,
        enumerable: true
      });
    }

    // 注入 nextElementSibling
    if (!('nextElementSibling' in Element.prototype)) {
      Object.defineProperty(Element.prototype, 'nextElementSibling', {
        get: function() {
          var el = this.nextSibling;
          while (el && el.nodeType !== 1) {
            el = el.nextSibling;
          }
          return el;
        },
        configurable: true,
        enumerable: true
      });
    }
  }
})();

四、生产级完整代码：兼顾现代语法与极端旧版环境

为了兼顾大型工程的透明调用习惯与低版本环境的容灾需求，推荐采用“优先原型注入 + 导出防御型工具函数”的双轨交付方案。以下为可直接在项目中引用的完整独立模块：

/**
 * DOM 兄弟元素获取 Polyfill 与辅助工具库
 * 支持 IE6+、现代主流浏览器及复杂 DOM 宿主环境
 */
(function(global) {
  'use strict';

  // 1. 核心底层循环匹配算法
  function findSibling(startNode, direction) {
    if (!startNode || startNode.nodeType !== 1) {
      return null;
    }
    var prop = direction === 'next' ? 'nextSibling' : 'previousSibling';
    var node = startNode[prop];
    while (node) {
      if (node.nodeType === 1) {
        return node;
      }
      node = node[prop];
    }
    return null;
  }

  // 2. 防御型独立工具函数（优先走原生，降级走算法）
  var TraversalUtils = {
    getPreviousElementSibling: function(element) {
      if (!element) return null;
      if ('previousElementSibling' in element) {
        return element.previousElementSibling;
      }
      return findSibling(element, 'previous');
    },

    getNextElementSibling: function(element) {
      if (!element) return null;
      if ('nextElementSibling' in element) {
        return element.nextElementSibling;
      }
      return findSibling(element, 'next');
    },

    // 衍生工具：获取当前元素的所有兄弟元素（不包含自身）
    getAllSiblings: function(element) {
      if (!element || !element.parentNode) return [];
      var siblings = [];
      var child = element.parentNode.firstChild;
      while (child) {
        if (child.nodeType === 1 && child !== element) {
          siblings.push(child);
        }
        child = child.nextSibling;
      }
      return siblings;
    }
  };

  // 3. 尝试注入 Element.prototype（面向支持 defineProperty 的标准宿主）
  try {
    if (typeof Element !== 'undefined' && Object.defineProperty) {
      if (!('previousElementSibling' in Element.prototype)) {
        Object.defineProperty(Element.prototype, 'previousElementSibling', {
          get: function() {
            return findSibling(this, 'previous');
          },
          configurable: true,
          enumerable: true
        });
      }
      if (!('nextElementSibling' in Element.prototype)) {
        Object.defineProperty(Element.prototype, 'nextElementSibling', {
          get: function() {
            return findSibling(this, 'next');
          },
          configurable: true,
          enumerable: true
        });
      }
    }
  } catch (e) {
    // 在部分受限宿主（如非标 IE8）中静默降级，不阻断业务执行
  }

  // 4. 挂载全局对象或按模块化规范导出
  if (typeof module !== 'undefined' && module.exports) {
    module.exports = TraversalUtils;
  } else if (typeof define === 'function' && define.amd) {
    define(function() { return TraversalUtils; });
  } else {
    global.TraversalUtils = TraversalUtils;
  }
})(typeof window !== 'undefined' ? window : this);

边界与防御性要点说明

• 游离节点（Detached Nodes）：当一个 DOM 节点尚未被挂载到文档树中时，其 parentNode 和兄弟节点均为 null。上述代码在起点通过 while(node) 安全拦截，直接返回 null，不会抛出非法引用异常。
• 非元素调用防护：如果传入的对象是文本节点或普通对象，startNode.nodeType !== 1 会直接拦截，有效保护运行时安全。
• 模块兼容性：支持 CommonJS、AMD 及直接通过 <script> 标签以全局变量 window.TraversalUtils 引入。

五、验证测试与跨浏览器降级策略总结

在完成 Polyfill 编写后，建议在测试环境中构建包含复杂干扰项的测试用例进行校验。测试 HTML 结构中应特意混合排版空格、多行回车与多段注释：

<div id="test-fixture">
  <!-- 头部注释 -->
  <span id="first">第一个元素</span>
  
  <!-- 中间干扰注释 1 -->
  <!-- 中间干扰注释 2 -->
  
  <span id="second">第二个元素</span>
  <!-- 尾部注释 -->
</div>

<script>
  var first = document.getElementById('first');
  var second = document.getElementById('second');

  // 验证向后查找
  var nextEl = first.nextElementSibling || TraversalUtils.getNextElementSibling(first);
  console.assert(nextEl === second, '测试失败: 应当准确跨越注释与空白命中 second');

  // 验证向前查找
  var prevEl = second.previousElementSibling || TraversalUtils.getPreviousElementSibling(second);
  console.assert(prevEl === first, '测试失败: 应当准确跨越注释与空白命中 first');

  // 验证边界条件
  var prevOfFirst = first.previousElementSibling || TraversalUtils.getPreviousElementSibling(first);
  console.assert(prevOfFirst === null, '测试失败: 边界节点向前查找应当返回 null');
</script>