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;
}

Answer 2

我认为这是不可能的，因为DOM的后续更改不会反映在querySelectorAll（）方法返回的NodeList对象中。

Selectors-api W3C

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

2 个答案: