Как добраться до узла ДОМ через this?

Question

[Sector567]

вот код: https://jsfiddle.net/k5sxh0nz/

Нужно чтобы по клику на определенный пункт меню, менялся фон у его субменю.

При помощи this я могу получить пункт меню по которому кликнули, но как получить .submenu внутри этого this, чтобы сменить ему фон?

Answer 1

[0xD34F]

Делегирование, назначаем обработчик клика один раз для всех:

document.querySelector('.menu').addEventListener('click', ({ target: t }) => {
  if (t.tagName === 'A') {
    const submenu = [...t.parentNode.children].find(n => n.classList.contains('sub-menu'));
    if (submenu) {
      submenu.classList.toggle('red');
    }
  }
});

Назначаем обработчик клика каждому элементу индивидуально:

for (const n of document.querySelectorAll('.menu a')) {
  n.addEventListener('click', onClick);
}

function onClick() {
  this.nextElementSibling?.classList.toggle('red');
}

// или

document.querySelectorAll('.sub-menu').forEach(function(n) {
  n.previousElementSibling.addEventListener('click', this);
}, e => e.target.nextElementSibling.classList.toggle('red'));

Comments

[Sector567]

Блин, а можете объяснить?
1) Что такое объект { target: t } ?
2) Зачем это условие if (t.tagName === 'A') ?
3) Это по моему РЕСТ-оператор, но не совсем понимаю логику поиска [...t.parentNode.children]?

[0xD34F]

Sector567,

1. Деструктуризация.
2. Чтобы не обрабатывать клики мимо a. Можете вписать какую-нибудь другую проверку, на своё усмотрение.
3. Ищем подменю среди элементов, соседних по отношению к кликнутому.

[Sector567]

0xD34F, спасибо