Вопрос по javascript, selectors-api, getelementsbytagname, css-selectors, dom – Можно ли сделать querySelectorAll жить как getElementsByTagName?

9

getElementsByTagName() имеет 2 отличных особенности: это быстрый и живой. Но что, если я хочу получитьp strong, Конечно, я мог бы уточнить выбор, используяgetElementsByTagName() еще раз, но я бы не потерял живой эффект для новогоp теги?

Есть ли способ повернутьquerySelectorAll в живой селектор?

Или ... есть ли способ использоватьgetElementsByTagName() а такжеgetElementsByClassName() создать функцию, которая работает аналогичным образом (по крайней мере, с потомками) какquerySelectorAll но быть живым?

Такая функция, если она реализована изначально, вероятно, будет исключена из динамического профиля, предотвращая выбор уровня 4, например:has() при использовании сложных селекторов, поскольку живое сопоставление селекторов - это, в основном, то, что происходит в CSS, и поэтому чувствительно к производительности. Тем не менее, мне любопытно знать. BoltClock

Ваш Ответ

2   ответа
7

childList сsubtree: true, Когда приходит уведомление, вы можете проверить каждый добавленный узел с помощьюmatches чтобы увидеть, соответствует ли он некоторому селектору.

function querySelectorAllLive(element, selector) {

  // Initialize results with current nodes.
  var result = Array.prototype.slice.call(element.querySelectorAll(selector));

  // Create observer instance.
  var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
      [].forEach.call(mutation.addedNodes, function(node) {
        if (node.nodeType === Node.ELEMENT_NODE && node.matches(selector)) {
          result.push(node);
        }
      });
    });
  });

  // Set up observer.
  observer.observe(element, { childList: true, subtree: true });

  return result;
}
Извините, это должно бытьobserver.observe(element. user663031
Нет ошибок сейчас, но когда я нажимаю дай мне! Я не получаю новые элементы ... Не могли бы вы проверить ручку снова? Vandervals
это выглядит хорошо, но я получаю ошибку на target.matches. Ты пробовал это? Я только что создал ручку:codepen.io/vandervals/pen/Nqpxww?editors=101 Vandervals
И этоsubtree неsubTree, Теперь это работает. Сожалею. user663031
2

что это возможно, потому что последующие изменения DOM не отражаются в объекте NodeList, возвращаемом методом querySelectorAll ().

Селекторы-API W3C

Похожие вопросы