Sự khác nhau giữa querySelector và getElementsByTagName là gì?

Tôi đã tự hỏi về hai cú pháp khác nhau của việc chọn phần tử trong JavaScript.Sự khác nhau giữa querySelector và getElementsByTagName là gì?

giả sử nếu tôi muốn chọn tất cả các div từ tài liệu hiện thời thì:

var divs = document.getElementsByTagName("div"); 
var i=0; 

while(i < divs.length){ 
var div=divs[i]; 
i++; 
} 
alert("There are "+i+" Divs in Document !");

sẽ hoạt động tốt. Nhưng cũng có một cách khác để làm như vậy, như:

var divs = document.querySelectorAll("div"); 
var i=0; 

while(i < divs.length){ 
var div=divs[i]; 
i++; 
} 
alert("There are "+i+" Divs in Document !");

Khi cả hai hoạt động theo cùng một cách. Sự khác nhau giữa chúng là gì?

Giá nào nhanh hơn?

Tại sao?

Cả hai hoạt động như thế nào?

Xin cảm ơn trước. Tôi đã nhìn thấy những câu hỏi như thế này nhưng họ không thỏa mãn nhu cầu.

Nguồn

2013-08-15 Vedant Terkar

Sự khác biệt là tính linh hoạt và hỗ trợ trình duyệt. –

@Salman_A 'querySelectorAll' là mới và do đó được hỗ trợ bởi các trình duyệt mới. Nhưng 'getElementsByTagName' cũ và do đó có hỗ trợ tuyệt vời. Là nó ? –

Có, 'querySelectorAll' không có sẵn trong IE <8. Điều này có thể quan trọng nếu bạn muốn hỗ trợ các trình duyệt này. –

getElementsByTagName chỉ chọn các yếu tố dựa trên tên thẻ của chúng. querySelectorAll có thể sử dụng any selector mang lại sự linh hoạt và năng lượng nhiều hơn, nhưng nó mới hơn và do đó hỗ trợ trình duyệt yếu hơn.

getElementsByTagName có lẽ nhanh hơn, vì nó đơn giản hơn, nhưng điều đó không có tác động đáng kể đến bất kỳ thứ gì bạn làm với nó.

Nguồn

2013-08-15 06:20:20 Quentin

Có nghĩa là Jquery. Chúng ta có thể sử dụng #id và .className? –

Có. jQuery sử dụng nó dưới mui xe. – Quentin

Mặc dù chức năng khác khi nói đến việc chọn theo tên thẻ thực tế và chọn theo công cụ chọn, khi chỉ chọn theo tên thẻ (tức là 'div') querySelectorAll vẫn nhanh hơn. Nếu bạn đang cố gắng hỗ trợ các trình duyệt cũ, bạn có thể bị buộc phải sử dụng getElementsByTagName, nhưng nếu bạn đang hỗ trợ trình duyệt hiện đại querySelectorAll có thể là tùy chọn tốt nhất ngay cả đối với lựa chọn đơn giản theo tên thẻ. Kiểm tra tham chiếu: https://jsperf.com/queryselectorall-vs-getelementsbytagname –

Từ MDN:

element = document.querySelector(selectors);

Trả về phần tử đầu tiên trong tài liệu (sử dụng độ sâu-đầu tiên traversal đặt hàng trước của các nút của tài liệu) phù hợp với các nhóm quy định của bộ chọn.

elements = element.getElementsByTagName(tagName)

Trả về danh sách các phần tử có tên thẻ đã cho. Cây con bên dưới phần tử được chỉ định được tìm kiếm, loại trừ chính phần tử đó. Danh sách trả về là trực tiếp, có nghĩa là nó tự động cập nhật với cây DOM. Do đó, không cần phải gọi nhiều lần element.getElementsByTagName với cùng một phần tử và đối số.

Nguồn

2013-08-15 06:20:29

Bạn quên liên kết. – BoltClock

@BoltClock Cảm ơn, cập nhật –

So sánh trong câu hỏi nằm giữa 'getElementsByTagName()' và 'querySelectorAll()' (không phải là 'querySelector()'). Sự khác biệt giữa 'querySelector()' và 'querySelectorAll()' là 'querySelector()' trả về một đối tượng đơn lẻ với phần tử HTML đầu tiên khớp với "selectors", nhưng 'querySelectorAll()' trả về một danh sách (tĩnh) của đối tượng với tất cả các phần tử HTML khớp với "bộ chọn". Như bạn đã đề cập, 'getElementsByTagName()' trả về một danh sách nút "sống". –

querySelector cũng hỗ trợ bộ chọn CSS khác như "#id" để có được một phần tử bằng cách id, và "input[type=text]" để có được tất cả các yếu tố đầu vào với một thuộc tính type=text. Xem here để biết thêm chi tiết. Chúng có lẽ sẽ nhanh chóng không kém đối với các truy vấn đơn giản như truy vấn bạn hỏi, nhưng đối với các bộ chọn CSS nâng cao, nó có thể nhanh hơn nhiều (chưa kể nhiều mã để viết) để sử dụng querySelectorAll. , đó là lý do tại sao các thư viện như jQuery sử dụng querySelectorAll khi trình duyệt hỗ trợ nó.

Nguồn

2013-08-15 06:21:47 devongovett

Hầu hết các câu trả lời đều sai. Nicolae Olariu là người duy nhất, người trả lời chính xác

Cái nào nhanh hơn? Tại sao?

không phải là câu hỏi. Câu hỏi thực sự "Cách hoạt động?"

Sự khác biệt chính là trong ví dụ này:.

<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>Yandex</title> 

</head> 
<body> 
    <a href="((http://yandex.ru))">Яндекс</a>, 
    <a href="((http://yandex.com))">Yandex</a> 
</body> 
<script> 

var elems1 = document.getElementsByTagName('a'), // return 2 lements, elems1.length = 2 
    elems2 = document.querySelectorAll("a"); // return 2 elements, elems2.length = 2 

document.body.appendChild(document.createElement("a")); 

console.log(elems1.length, elems2.length); // now elems1.length = 3! 
              // while elems2.length = 2 
</script> 
</html>

Vì querySelectorAll trả về các yếu tố phi sống

Nguồn

2015-06-18 17:05:46

Dưới đây là một example về sự khác biệt giữa querySelector và getElementsByTagName

Trong này. ví dụ, tác giả chọn số querySelector để giải quyết vấn đề.

getElementsByTagName cũng trả về một danh sách nút trực tiếp, và khi chúng ta chắp thêm các liên kết vào danh sách không có thứ tự trong bộ nhớ, liên kết sẽ bị xóa khỏi tài liệu và độ dài của bộ sưu tập bị ảnh hưởng.

Vì vậy

if(you don't want to change the NodeList during the follow-up script work){ 
    "use querySelectorAll"} 
else if(you want to change the NodeList during the follow-up script work) { 
    "use getElementsByTagName" 
}

Và bạn có thể có một cố gắng sử dụng getElementsByTagName trong ví dụ này, bạn sẽ thấy nó không thể làm việc.

Nguồn

2017-09-15 12:58:24 liwenkang

Sự khác nhau giữa querySelector và getElementsByTagName là gì?

Trả lời

Các vấn đề liên quan