通过data属性定位span元素动态赋值时遇‘span is not defined’错误

嘿，我来帮你搞定这个问题！咱们先拆解下错误的根源，再给出具体的解决办法：

错误原因分析 #

你代码里的properties数组包含了name和age两个属性，但你的HTML中只存在带data-name的<span>元素，并没有对应data-age的元素。当循环遍历到age时，document.querySelector(.prop[data-${property}])会返回null，这时候直接尝试设置spanElement.textContent就会触发类似Cannot set property 'textContent' of null的错误（你描述的‘span is not defined’应该是对报错信息的小误解哦）。

解决方案 #

这里有几种实用的解决方法，你可以根据自己的需求选择：

1. 先检查元素是否存在再赋值 #

在设置内容前，先判断元素是否被成功获取，避免对null值进行操作：

let properties = ['name', 'age'];
properties.forEach(property => {
  let spanElement = document.querySelector(`.prop[data-${property}]`);
  // 确认元素存在后再设置文本内容
  if (spanElement) {
    spanElement.textContent = property;
  }
});

2. 确保数组属性与HTML元素一一对应 #

如果你的需求是每个属性都要有对应的展示元素，那补充上缺失的<span>即可：

<span class="prop" data-name></span>
<span class="prop" data-age></span>

这样循环时每个属性都能找到对应的元素，自然不会出现报错。

3. 使用ES2020+的可选链操作符简化代码 #

如果你的项目环境支持ES2020及以上语法，用可选链?.可以更简洁地避免错误：

let properties = ['name', 'age'];
properties.forEach(property => {
  // 元素不存在时会直接跳过赋值操作
  document.querySelector(`.prop[data-${property}]`)?.textContent = property;
});

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