传递字符串至JS函数却意外得到HTMLCollection的问题排查

为什么字符串参数变成了HTMLCollection？ #

你大概率是写onclick事件时，没给字符串参数加引号。比如原本的代码可能是这样：

<button onclick="trclickNewsuit(<?=$newsuitID?>, <?=$page?>)">点击</button>

因为$page的值是allSuits，PHP渲染后代码变成：

<button onclick="trclickNewsuit(123, allSuits)">点击</button>

这时候JS会把allSuits当成标识符去全局作用域查找。在非严格模式下，浏览器会优先从document.all（包含页面所有元素的HTMLCollection）里匹配——如果页面里有id或name为allSuits的元素，就会返回对应的HTMLCollection/元素对象，而非你想要的字符串。

怎么直接传递正确的字符串参数？ #

给PHP输出的字符串参数加引号，注意和onclick的外层引号区分开：

• 若onclick用双引号，内部用单引号包裹$page：

<button onclick="trclickNewsuit(<?=$newsuitID?>, '<?=$page?>')">点击</button>

• 若onclick用单引号，内部用双引号包裹：

<button onclick='trclickNewsuit(<?=$newsuitID?>, "<?=$page?>")'>点击</button>

这样PHP渲染后，JS会直接把'allSuits'识别为字符串，不会去查找DOM元素。

已拿到HTMLCollection，怎么提取目标字符串？ #

如果已经出现这个情况，函数里收到的是HTMLCollection对象，可以这样提取目标字符串：

• 若确定集合对应的元素id/name就是allSuits，直接取元素的id或name属性：

function trclickNewsuit(newsuitID, pageCollection) {
  // 取集合第一个元素的id（假设只有一个元素）
  const targetStr = pageCollection[0].id;
  // 或者取name属性
  // const targetStr = pageCollection[0].name;
  console.log(targetStr); // 输出 'allSuits'
}

• 或者遍历HTMLCollection的键名（document.all的键对应元素的id/name）：

function trclickNewsuit(newsuitID, pageCollection) {
  const targetStr = Object.keys(pageCollection)[0];
  console.log(targetStr); // 输出 'allSuits'
}

不过这只是临时补救，最稳妥的还是从根源解决——给参数加引号。

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