JavaScript 无法访问自定义数据属性（console.log returns null）

Question

我正在尝试（最终）从 DOM 中删除 node/element。我做了一个自定义 data-attribute，并且必须通过那里访问 node/element。当 console.log 我试图访问的变量时，它 returns 为空。我运行在尝试访问 header 时遇到了同样的问题（我真的很陌生），但发现我也在 index.html 文件中调用我的脚本标签早（笑）。不过，我认为情况并非如此。我们可以通过 index.html 文件访问 PLAYERS，该文件链接到 data.js（定义 PLAYERS 的地方）。当我运行控制台中的代码时，它 returns null for console.log(sterling).

这是我的完整代码：

document.addEventListener('DOMContentLoaded', (event) => {
  const header = document.getElementById("header");
  header.style.color = "red";
  const playersArray = document.querySelector(".player-container");
  const sterling = document.querySelector('div[data-number="7"]');
  console.log(sterling)

  PLAYERS.forEach(function(player) {
    const div = document.createElement("div")
    div.className = "player"
    div.setAttribute("data-number", player.number)
    div.innerHTML = `
            <h3>${player.name} (<em>${player.nickname}</em>)</h3>
            <img src="${player.photo}" alt=${player.name}>
        `
    playersArray.append(div)
  })

  //sterling.parentNode.removeChild(sterling)
});

Answer 1

您试图在将数据属性添加到 forEach 循环之前查询数据属性。将该代码移至底部。

const PLAYERS = [{
    number: 7,
    nickname: "Joe",
    photo: "",
    name: "Joseph"
  },
  {
    number: 2,
    nickname: "Freddy",
    photo: "",
    name: "Frederick"
  }
];

document.addEventListener('DOMContentLoaded', (event) => {
  const header = document.getElementById("header");
  header.style.color = "red";
  const playersArray = document.querySelector(".player-container");

  PLAYERS.forEach(function(player) {
    const div = document.createElement("div")
    div.className = "player"
    div.setAttribute("data-number", player.number)
    div.innerHTML = `
            <h3>${player.name} (<em>${player.nickname}</em>)</h3>
            <img src="${player.photo}" alt=${player.name}>
        `
    playersArray.append(div)
  })
  const sterling = document.querySelector('div[data-number="7"]');
  console.log(sterling)

});

<div id="header">
  <div class="player-container">
  </div>
</div>

但是由于您是在同一个函数中添加属性，所以您可以只在循环中设置变量。

document.addEventListener('DOMContentLoaded', (event) => {
  const header = document.getElementById("header");
  header.style.color = "red";
  const playersArray = document.querySelector(".player-container");
  let sterling;

  PLAYERS.forEach(function(player) {
    const div = document.createElement("div")
    div.className = "player"
    div.setAttribute("data-number", player.number)
    div.innerHTML = `
            <h3>${player.name} (<em>${player.nickname}</em>)</h3>
            <img src="${player.photo}" alt=${player.name}>
        `
    playersArray.append(div)
    if (player.number == 7) {
      sterling = div;
    }
  })

  console.log(sterling);
});

Answer 2

它 returns 为空，因为该元素尚未添加到 DOM。而函数 document.querySelector 只获取存在于 DOM.

中的元素

JavaScript 无法访问自定义数据属性（console.log returns null）

JavaScript can't get access to a custom data attribute (console.log returns null)

javascript

null

custom-data-attribute

console.log