借助纯 JavaScript 获取 DOM

Question

我有这个代码：

$("#popupShapes ul li a").click(function () {
     //some code
});

我想将其转换为纯 javascript。

这不起作用，因为 getElementById 期望单个 id：

document.getElementById('popupShapes ul li a')

如何将上面的 jQuery 代码转换为 JavaScript？

Answer 1

改用querySelector ，它接受一个选择器字符串：

document.querySelector("#popupShapes ul li a").addEventListener('click', function () {
     //some code
});

如果您有多个匹配的元素，请改用querySelectorAll ：

for (const a of document.querySelectorAll("#popupShapes ul li a")) {
  a.addEventListener('click', function () {
     //some code
  });
}

您也可以改用事件委托，但这有时会导致与原始代码不同的行为：

document.querySelector('#popupShapes').addEventListener('click', (e) => {
  if (!e.target.matches('#popupShapes ul li a')) return;
  // some code
});

Answer 2

$("#popupShapes ul li a").click(function () {
  //some code
});

我会考虑委托：

 document.getElementById("popupShapes").addEventListener("click", function(e) { const tgt = e.target; if (tgt.matches('#popupShapes ul li a')) { e.preventDefault(); console.log(tgt.href) } else console.log(tgt.tagName,"not interesting click") })

 #popupShapes { background-color: teal; padding:1em; }

 <div id="popupShapes"> <ul> <li><a href="x1">X1</a></li> <li><a href="x2">X2</a></li> </ul> <a href="z1">z1</a> </div>

Answer 3

你会这样写的。

const nav = document.querySelectorAll('#popupShapes li a')

nav.forEach((item) => {
    item.addEventListener('click', (e) => {
      console.log('hi', e);
    });
});