Có thể thực hiện truy vấnSelectorTất cả sống như getElementsByTagName không?

Question

getElementsByTagName() có 2 tính năng tuyệt vời: nhanh và phát trực tiếp. Nhưng nếu tôi muốn nhận được p strong. Tất nhiên tôi có thể tinh chỉnh lựa chọn bằng cách sử dụng getElementsByTagName() một lần nữa nhưng tôi sẽ không mất hiệu ứng trực tiếp cho các thẻ p mới?

Có cách nào để biến querySelectorAll thành công cụ chọn trực tiếp không?

Hoặc ... có cách nào để sử dụng getElementsByTagName() và getElementsByClassName() để tạo hàm hoạt động theo cách tương tự (ít nhất với con cháu) là querySelectorAll nhưng đang hoạt động?

Answer 1

Cân nhắc sử dụng trình theo dõi đột biến. Xem cho childList với subtree: true. Khi thông báo đến, bạn có thể kiểm tra từng nút được thêm bằng matches để xem có khớp với một số bộ chọn hay không.

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

Tôi không nghĩ rằng điều đó là có thể vì những thay đổi tiếp theo của DOM không phản ánh trong đối tượng NodeList được trả về bởi phương thức querySelectorAll().

Selectors-api W3C

Answer 3

Nếu bạn có bất kỳ mối quan tâm nào cả về hiệu suất của trang web của bạn (giống như bất kỳ người lành mạnh sẽ), sau đó XIN tôi đang thúc giục bạn giải pháp không angellica.araujo của. Nó là cực kỳ chậm và không thực tế cho bất kỳ trang web trong mọi trường hợp. Thay vào đó, hãy sử dụng thư viện của Công ty Fremy, querySelectorLive found here at github. sử dụng ví dụ:

myQuerySelectorLive("ul.active,li:hover",{ 
    onadded: function(e) { 
     console.log("ul/li added:"); 
     console.log(e.textContent); 
    }, 
    onremoved: function(e) { 
     console.log("ul/li removed:"); 
     console.log(e.textContent); 
    } 
}); 

Lý do tại sao nó là như vậy ác để sử dụng giải pháp angellica.araujo là vì giải pháp của mình có thể ngắn & đơn giản, tuy nhiên nó kiểm tra mỗi bộ chọn trên tất cả các phần tử khi bất cứ điều gì xảy ra. Điều này không tốt. Mặt khác, thư viện querySelectorLive của Fremy là rất tuyệt vời vì nó chọn lọc những thứ cần kiểm tra khi nào. Ví dụ: nếu bạn đang truy vấn một lớp bên trong một lớp (ví dụ: .foo>.bar), thì nó sẽ chỉ kiểm tra bộ chọn nếu thuộc tính lớp thay đổi.