如何筛选名称以myPrefix-开头的HTML元素属性？

给定如下HTML元素：

<div id="myDiv" class="myClass" myPrefix-template="artist-group" myPrefix-records="sculptors" myPrefix-caption="People Who Sculpt"></div>

尝试用以下代码筛选名称以myPrefix-开头的属性对象数组，但无法运行：

let myDiv = document.querySelector("#myDiv");
let attribs = myDiv.attributes;
let dataAttribs = attribs.filter(attrib => {
            return attrib.name.includes('myPrefix-');
            });

而普通对象数组使用.filter结合.includes的写法是有效的：

const characters = [
  { name: 'MT-caption', value: 'Some People' },
  { name: 'MT-records', value: 'sculptures' },
  { name: 'class', value: 'Deep Space Nine' }
];

tngCharacters = characters.filter(character => {
  return character.name.includes('MT-');
});

问题根源 #

Element.attributes返回的是NamedNodeMap对象，它是类数组结构，但并非标准JavaScript数组，因此没有数组的filter、map等原型方法。而你测试的普通对象数组是标准数组，所以可以直接调用filter。

正确实现方式 #

方式1：转为标准数组后使用filter

通过Array.from()或扩展运算符[...]将NamedNodeMap转为数组，再调用filter筛选：

let myDiv = document.querySelector("#myDiv");
// 使用Array.from转换为数组
let dataAttribs = Array.from(myDiv.attributes).filter(attrib => {
  return attrib.name.startsWith('myPrefix-');
});

或者用扩展运算符简化写法：

let myDiv = document.querySelector("#myDiv");
let dataAttribs = [...myDiv.attributes].filter(attrib => attrib.name.startsWith('myPrefix-'));

注：用startsWith()比includes()更精准，严格匹配前缀开头的属性。

方式2：遍历类数组对象

如果需要兼容不支持ES6的老浏览器，可直接遍历NamedNodeMap：

let myDiv = document.querySelector("#myDiv");
let attribs = myDiv.attributes;
let dataAttribs = [];

for (let i = 0; i < attribs.length; i++) {
  const attrib = attribs[i];
  if (attrib.name.startsWith('myPrefix-')) {
    // 按需将属性转为{name, value}格式的对象
    dataAttribs.push({ name: attrib.name, value: attrib.value });
  }
}

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