document.querySelectorAll: не с несколькими: not (s)

Question

Заранее извините - существует так много различий в этом вопросе относительно SO, но ни одна не решила мою проблему Я прочитал так много вариантов, что теперь я полностью запутался в том, как это сделать.

У меня есть эта Javascript функция, которая добавляет параметры UTM ко всем сторонним ссылкам, за исключением тех, которые имеют указанные классы c как таковые:

// Set the domain/URL of website.

var myDomain = "domain.com";

// Grab all links (anchor tags)
var links = document.querySelectorAll('a:not(.this-class)');

// Loop through all links
Array.prototype.forEach.call(links, function (link) {

// If a link goes offsite (not to my myDomain above)
if ( link.href.indexOf(myDomain) < 0 ) {

// Take the href and append the UTM parameters
link.href += '?utm_source=CampaignSource&utm_medium=CampaignMedium&utm_term=CampaignTerm&utm_content=CampaignContent&utm_campaign=CampaignName';
    }   
})

Теперь мне нужно запретить добавление к

ul.another_class li a

Я перепробовал множество синтаксисов и форматов, но просто не могу заставить его работать правильно. Например,

var links = document.querySelectorAll('a:not(.this-class),ul:not(.another_class li a)');

и слишком много, чтобы перечислять здесь. Селектор ul.another_class li a , только у ul есть класс - ни у li , ни у a нет.

Итак, мой вопрос касается правильного : не синтаксиса селектора И правильного синтаксиса оператора. Предполагается, что это будет

('a:not(.this-class), ul:not(.another_class li a)');

или

('a:not(.this-class), ul.another_class:not(li a)');

или что-то еще? Я ценю ваш опыт.

Answer 1

Это невозможно сделать кратко с одним селектором, потому что нет родительского селектора . Я думаю, что лучше всего было бы отфильтровать ul.another_class li a после этого:

for (const a of document.querySelectorAll('a:not(.this-class)')) {
  if (!a.matches('ul.another_class li a')) {
    // manipulate the href
  }
}