如何解决querySelector返回undefined并捕获data-relative属性值？

原代码里element.querySelector("#listview")返回undefined的原因很直接：你遍历的element本身就是带有listview类的DOM节点，但你的HTML结构里根本不存在id为listview的元素，这步查询完全多余且错误。

要获取data-relative属性的内容，直接操作当前遍历的element即可，有两种常用方式：

方式1：利用DOM元素的dataset属性 #

HTML中的data-*属性会自动挂载到元素的dataset对象上（data-relative对应dataset.relative），直接取值即可：

let convertEntries = () => {
  "use strict";
  let result = []; // 补上原代码缺失的变量初始化
  let target = [...document.getElementsByClassName("listview")];
  target.forEach((element) => {
    result.push({
      url: element.dataset.relative,
    });
  });
  return result;
};

方式2：使用getAttribute方法 #

如果更习惯直接操作原始属性名，也可以用getAttribute获取属性值：

let convertEntries = () => {
  "use strict";
  let result = []; // 补上原代码缺失的变量初始化
  let target = [...document.getElementsByClassName("listview")];
  target.forEach((element) => {
    result.push({
      url: element.getAttribute('data-relative'),
    });
  });
  return result;
};

补充说明：原代码里未初始化result变量，运行会触发报错，上面的修正代码已经补上了这部分逻辑。

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