使用纯JavaScript获取DOM

我有以下代码：

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

我想把它转换成纯javascript

这不起作用，因为getElementById需要单个id：

document.getElementById('popupShapes ul li a')

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

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

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

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

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

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

我会考虑委派：

document.GetElement ByIdPopupShapes.AddEventListener单击，函数E{ 常数tgt=e.target； 如果tgt.与'popupshapeulli a'匹配{ e、 防止违约； console.logtgt.href }else console.logtgt.tagName，不感兴趣单击 } 爆裂形状{ 背景色：青色；填充色：1米； }

---

你会这样写的

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

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

---

使用querySelector选择单个元素，querySelectorAll选择多个元素。如果需要多个匹配项，那不是应该是querySelectorAll吗？可能有多个定位标记。使用qSAll.com或更好：委托给父元素请不要向所有元素添加EventListenerlinks@mplungjan：如果节点的处理方式与其同级节点有所不同，该怎么办？只是出于好奇，为什么它是单事件侦听器而不是多事件侦听器，尽管需要更多的代码，而且理论上即使对于简单的标记/父标记检查也会被不必要地触发？我没有时间查找文档，但应该考虑性能问题，静态父侦听器使添加和删除子项更加安全，如果仍然存在子项，则这些子项可能不会被垃圾收集连接到每个节点的侦听器不会执行相同的操作，您的是popupShapes li>a@Kaiido更新为使用。现在似乎得到了很好的支持。除了循环方法外，与公认答案相同。是的，同意你的观点。但它看起来更清晰、更容易理解。除了节点列表需要在IE中为forEach转换到数组之外

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

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

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