В веб-разработке часто возникают ситуации, когда вам необходимо нацелиться на несколько элементов на странице и манипулировать ими, за исключением того, который вызвал определенное событие. Это может быть полезно для различных целей, например для выделения или изменения элементов. В этой статье мы рассмотрим несколько методов достижения этой цели с помощью JavaScript, а также примеры кода.

Метод 1: использование селекторов CSS и псевдокласса :not()
Псевдокласс :not() в CSS позволяет исключать определенные элементы из выделения. Комбинируя его с соответствующими селекторами CSS, вы можете настроить таргетинг на все элементы, кроме того, на который щелкнули. Вот пример:

document.addEventListener('click', function(event) {
  var elementsToExclude = document.querySelectorAll(':not(.clicked-element)');
  // Perform actions on elementsToExclude
});

Метод 2: циклическое перебор списков элементов
Если у вас есть коллекция элементов, вы можете просмотреть их и применить нужные действия ко всем элементам, кроме того, на который щелкнули. Вот пример использования метода forEach:

var elements = document.getElementsByClassName('target-elements');
Array.prototype.forEach.call(elements, function(element) {
  element.addEventListener('click', function(event) {
    Array.prototype.forEach.call(elements, function(el) {
      if (el !== element) {
        // Perform actions on el
      }
    });
  });
});

Метод 3: использование свойства event.target
Свойство event.targetдает ссылку на элемент, вызвавший событие. Вы можете использовать это свойство, чтобы исключить выбранный элемент из целевых элементов. Вот пример:

var elements = document.getElementsByClassName('target-elements');
Array.prototype.forEach.call(elements, function(element) {
  element.addEventListener('click', function(event) {
    var clickedElement = event.target;
    Array.prototype.forEach.call(elements, function(el) {
      if (el !== clickedElement) {
        // Perform actions on el
      }
    });
  });
});

Метод 4: добавление и удаление прослушивателей событий
В этом методе вы можете добавить прослушиватели событий ко всем элементам, кроме элемента, по которому щелкнули, и удалить прослушиватель из элемента, по которому щелкнули. Вот пример:

var elements = document.getElementsByClassName('target-elements');
function handleClick(event) {
  // Perform actions on elements except the clicked one
}
Array.prototype.forEach.call(elements, function(element) {
  element.addEventListener('click', handleClick);
});
document.addEventListener('click', function(event) {
  Array.prototype.forEach.call(elements, function(element) {
    element.removeEventListener('click', handleClick);
  });
});

В этой статье мы рассмотрели различные методы таргетинга на все элементы веб-страницы, кроме элемента, на который был сделан клик. Эти методы обеспечивают гибкость и контроль при динамическом манипулировании несколькими элементами. Используя селекторы CSS, циклически просматривая списки элементов, используя свойство event.target или добавляя или удаляя прослушиватели событий, вы можете добиться эффективного таргетинга элементов в JavaScript. Поэкспериментируйте с этими методами в своих проектах, чтобы улучшить свои навыки веб-разработки.