javascript - 使用数据属性定位元素并动态设置值

Question

我想为 span 元素设置一个值，但是当我使用 querySelector() 以数据属性(data-job-value)为目标时，我得到错误 span is not defined

let properties = ['name', 'age'];

properties.forEach(property => {
  let spanElement = document.querySelector(`.prop[data-${property}]`);
  spanElement.textContent = property;
});

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

Answer 1

那是因为您没有匹配“.prop[data-age]”的元素，因此 querySelector 返回 null

let properties = ['name', 'age'];

properties.forEach(property => {
  let spanElement = document.querySelector(`.prop[data-${property}]`);

  if (spanElement === null) {
    console.log(`Error: no matching elements found for query ".prop[data-${property}]"`);
    return;
  }

  spanElement.textContent = property;
});

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

如果有如下匹配的元素就不会报错

let properties = ['name', 'age'];

properties.forEach(property => {
  let spanElement = document.querySelector(`.prop[data-${property}]`);

  if (spanElement === null) {
    console.log(`Error: no matching elements found for query ".prop[data-${property}]"`);
    return;
  }

  spanElement.textContent = property;
});

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