如何提取HTML中含"the"的ID字符串并传入指定函数？

你遇到的问题是因为document.querySelectorAll返回的是DOM元素的NodeList集合，不是ID字符串数组，所以直接操作元素对象肯定拿不到想要的结果。下面是具体的修正方案：

核心思路：提取元素的ID字符串并转成数组 #

原生JS写法 #

把NodeList转成数组后，提取每个元素的id属性，就能得到纯ID字符串的数组：

// 1. 获取所有id以"the"开头的元素，转成数组
const elements = document.querySelectorAll('[id^="the"]');
// 2. 提取每个元素的id，得到字符串数组
const idArray = Array.from(elements).map(el => el.id);

// 或者用更简洁的扩展运算符写法
const idArray = [...document.querySelectorAll('[id^="the"]')].map(el => el.id);

jQuery写法 #

如果用jQuery，通过map提取ID后，用get()转成普通数组：

const idArray = $('[id^="the"]').map(function() {
  return this.id;
}).get();

传入你的函数 #

如果你的函数需要接收4个单独的字符串参数（比如function targetFunc(id1, id2, id3, id4)），可以用扩展运算符直接把数组元素作为参数传入：

targetFunc(...idArray);

为什么原来的代码不行？ #

• 你打印的arr[i]是DOM元素对象，不是字符串，所以toString()只会返回元素的类型描述（比如[object HTMLDivElement]），不是ID值。
• NodeList不是数组，没有splice这类数组方法，必须先转成普通数组才能使用数组操作。

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