是否有可能使querySelectorAll像getElementsByTagName一样生活？

Question

getElementsByTagName()有两个很棒的功能:它很快,它是现场.但如果我想得到怎么办呢p strong.当然我可以getElementsByTagName()再次使用精炼选项,但是我不会失去新p标签的实时效果吗？

有没有办法querySelectorAll变成现场选择器？

或者......是否有一种方法可以使用getElementsByTagName()和getElementsByClassName()创建一个以类似的方式工作的函数(至少与后代一样),querySelectorAll但是生存？

Answer 1

考虑使用变异观察者.留意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;
}