如何编写JavaScript函数处理单个Node或Node集合并获取数据？

别担心英语表述或者描述长度的问题，你的需求我完全明白——就是要写一个JavaScript函数，能自动识别传入的是单个DOM节点（Node）还是节点集合（比如NodeList、HTMLCollection），然后根据类型正确获取对应的数据。下面我来一步步帮你实现这个功能：

一、核心判断逻辑梳理 #

首先得明确我们要区分的几种常见类型：

• 单个Node：比如document.getElementById()、document.querySelector()返回的单个DOM节点
• 节点集合：常见的有NodeList（document.querySelectorAll()的返回值）、HTMLCollection（document.getElementsByTagName()的返回值）

判断规则要兼顾严谨性和兼容性：

1. 优先判断是否为单个Node：用instanceof Node可以覆盖所有DOM节点类型（元素、文本、注释等）
2. 若不是单个Node，再判断是否为类数组的节点集合：检查是否是对象、不为null且拥有length属性，同时遍历确认内部元素是Node类型（避免普通类数组对象干扰）

二、完整函数实现 #

下面是一个可直接复用的示例函数，这里以获取节点的textContent为例（你可以根据需求替换成innerHTML、自定义属性等任意数据）：

function getNodeData(input) {
  const result = [];

  // 处理单个Node的情况
  if (input instanceof Node) {
    result.push({
      node: input,
      data: input.textContent.trim()
    });
  } 
  // 处理Node集合的情况（NodeList/HTMLCollection或类数组节点集合）
  else if (typeof input === 'object' && input !== null && typeof input.length === 'number') {
    for (let i = 0; i < input.length; i++) {
      const currentNode = input[i];
      // 确保当前元素是合法Node，过滤集合中可能的非节点元素
      if (currentNode instanceof Node) {
        result.push({
          node: currentNode,
          data: currentNode.textContent.trim()
        });
      }
    }
  } 
  // 处理非法参数
  else {
    throw new Error('传入的参数不是有效的Node或Node集合');
  }

  // 优化返回值：单个节点返回对象，集合返回数组
  return result.length === 1 ? result[0] : result;
}

三、使用示例与场景 #

// 场景1：传入单个节点
const singleElement = document.getElementById('user-profile');
const singleResult = getNodeData(singleElement);
console.log(singleResult); // 输出单个节点的数据对象

// 场景2：传入NodeList
const cardList = document.querySelectorAll('.product-card');
const listResult = getNodeData(cardList);
console.log(listResult); // 输出包含所有卡片节点数据的数组

// 场景3：传入HTMLCollection
const divCollection = document.getElementsByTagName('div');
const collectionResult = getNodeData(divCollection);
console.log(collectionResult); // 输出所有div节点的数据数组

四、关键细节说明 #

• 严谨的类型校验：用instanceof Node判断单个节点，避免把普通对象误判为节点；集合判断时额外校验内部元素类型，提升鲁棒性
• 灵活的返回值：单个节点返回对象，集合返回数组，调用方无需额外处理格式，更符合直觉
• 错误提示：针对非法参数抛出明确错误，方便调试时快速定位问题

内容的提问来源于stack exchange，提问作者Gergő Horváth