使用querySelector选择元素时无法捕获data-relative属性问题

问题根源 #

你代码里获取data-relative的逻辑犯了两个错误：

• 错误使用#listview选择器：HTML里目标元素的class是listview，并没有id为listview的元素，#是id选择器，这里根本匹配不到任何元素。
• 多余的子元素查询：data-relative属性本身就挂在你当前遍历的element（每个带listview类的div）上，完全不需要再用querySelector去查找子元素。

修正后的代码 #

let convertEntries = () => {
  "use strict";
  let target = [...document.getElementsByClassName("listview")];
  let result = [];
  target.forEach((element) => {
    result.push({
      title: element.querySelector(".list-header strong").textContent,
      url: element.dataset.relative, // 直接从当前element读取dataset
    });
  });
  return result;
};

额外提示 #

• dataset是DOM元素的原生属性，data-xxx格式的属性会自动映射到dataset.xxx（如果属性名有连字符，比如data-foo-bar，会转为驼峰式dataset.fooBar）。
• 要是怕某些元素可能没有data-relative属性，可以加个兜底处理，比如url: element.dataset.relative || ''，避免结果出现undefined。

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