Как бы я выполнил эквивалент ванильного JS для запроса нескольких селекторов с помощью псевдоклассов?

#javascript #jquery

#javascript #jquery

Вопрос:

Итак, у меня есть эта функция:

 function populate(selector, snippet, location) {
    var OGsnippet = $('snippet#'   snippet).children().clone().appendTo(selector);
}
  

Он вызывается следующим образом: populate('section#main articles article:not(".ad")', 'socmed-articles'); или populate('section div.articles.news article:not(".ad")', 'socmed-articles');

Я пытаюсь преобразовать его в ванильный javascript. Я пытался:

 function populate(selector, snippet, location) {
    var snippet = (document.querySelector('snippet#'   snippet).children)[0].cloneNode(true); //printing snippet yields a span with a class socmed-articles
    document.querySelector(selector).append(snippet);
}
  

Но я получаю Uncaught DOMException: Failed to execute 'querySelector' on 'Document': 'section#main articles article:not(".ad")' is not a valid selector

Комментарии:

1. section#main добавляет специфичности без выгоды. Идентификаторы уникальны, поэтому section префикс не нужен.

Ответ №1:

Селектор CSS :not не принимает " , их нужно удалить, чтобы использовать этот селектор.

 document.querySelector('section#main articles article:not(.ad)');