ASP.NET MVC页面渲染调用JS时JQuery获取元素为何变为数组

• 事件触发时传参符合预期：DropdownList的change事件触发时，回调函数默认接收的事件目标本身就是单个原生DOM元素，直接传入函数A时参数类型正确，所以运行正常。
• 页面加载阶段拿到的是元素集合：页面加载阶段主动调用函数A时，你获取DOM元素的方法返回的是类数组集合，而非单个元素：
  • 原生DOM API中document.getElementsByTagName、document.getElementsByClassName、document.querySelectorAll等方法，哪怕匹配到的元素只有1个，返回的也是HTMLCollection或NodeList类数组结构，直接传入函数A就会出现你遇到的问题。
  • 如果使用jQuery等前端工具库，$('选择器')语法返回的是jQuery包装的类数组实例，同样需要通过下标[0]才能拿到原生DOM元素。

你可以任选一种方式修复：

1. 调用函数前做参数适配，优先使用返回单个元素的选择器

// 推荐：直接用querySelector获取单个元素
const dropdown = document.querySelector('#目标元素ID');
if (dropdown) {
  A(dropdown);
}

// 如果必须用返回集合的选择器，手动取第一个元素
const dropdownList = document.querySelectorAll('.dropdown-class');
if (dropdownList.length > 0) {
  A(dropdownList[0]);
}

2. 在函数内部做兼容处理，屏蔽外部传参差异

function B (obj) {
  // 兼容类数组集合场景，优先取第一个元素，否则直接用传入的对象
  const target = obj[0] ?? obj;
  const idLength = target.id.length;
  const value = target.id.lastIndexOf("-");
  return value;
}

内容的提问来源于stack exchange，提问作者Blishton