Получение DOM с помощью чистой JavaScript

Question

У меня есть этот код:

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

Я хочу преобразовать его в чистый javascript.

Это не работает, потому что getElementById ожидает один идентификатор:

document.getElementById('popupShapes ul li a')

Как я могу преобразовать код jQuery выше в JavaScript?

Answer 1

$("#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 2

Вместо этого используйте 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 3

Вы бы написали так.

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

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