Tại sao document.getElementById không cần thiết?

1) Câu hỏi 1Tại sao document.getElementById không cần thiết?

Ví dụ sau đây hoạt động mà không sử dụng "document.getElementById ('myId')". Tại sao điều đó và OK để bỏ qua "document.getElementById ('myId')"?

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Javascript question</title> 

<script> 
window.onload = function(){ 
    myId.style.color = 'red'; 
} 
</script> 

</head> 
<body> 

<div id=myId> 
<p>Make this color red.</p> 
</div> 

</body> 
</html>

2) Câu hỏi 2

Tôi thường lưu trữ trình duyệt đối tượng để giảm DOM traversal (xem ví dụ dưới đây). Nó sẽ được nhiều hơn traversal DOM nếu tôi không lưu trữ các ID trong một biến hoặc là nó một số như thế nào đã là một biến?

window.onload = function(){ 

var myId = document.getElementById('myId'); /* stored ID that will be used multiple times */ 

myId.style.color = 'red'; 
}

Cảm ơn!

Nguồn

2014-09-19 user1087110

jsfiddle: http://jsfiddle.net/feeela/2zr5Lgfo/ – feeela

Khi có nhiều yếu tố như vậy được yêu cầu trong trang web, có thể bạn không nên lưu trữ mọi thứ. –

Ví dụ sau đây hoạt động mà không sử dụng "document.getElementById ('myId')". Tại sao điều đó và OK để bỏ qua "document.getElementById ('myId')"?

Vì trình duyệt đổ tham chiếu đến tất cả các thành phần có id s vào không gian tên chung, sử dụng tên biến số id. (Về mặt kỹ thuật, với tên là tên trên đối tượng toàn cục; các thuộc tính của đối tượng chung là các biến toàn cầu.) Tôi khuyên bạn nên không phải dựa vào nó và sử dụng document.getElementById (hoặc tương tự). Không gian tên chung là thực sự đông đúc và có rất nhiều thứ khác có thể xung đột.

Ví dụ, nếu bạn có

<div id="foo">...</div>

và

function foo() { 
}

Sau đó chỉ cần sử dụng foo trong mã của bạn sẽ cung cấp cho bạn các chức năng, không phải là phần tử.

Tương tự như vậy nếu bạn có

<input type="text" id="name">

... và sử dụng name trong mã của bạn, bạn sẽ nhận được tên của cửa sổ (một chuỗi), không phải là HTMLInputElement cho lĩnh vực id="name" của bạn.

Doanh nghiệp bán phá giá tham chiếu đến các phần tử này vào không gian tên chung được bao gồm trong §5.2.4 of the HTML5 spec, trong trường hợp này phần lớn là tài liệu về những trình duyệt đã thực hiện trong một thời gian dài.

Sẽ có nhiều chuyển đổi DOM hơn nếu tôi không lưu trữ ID trong biến hay là một số biến thể đã biến đổi như thế nào?

Biến này đã là biến toàn cục cho mỗi trường hợp trên, do đó không có quá trình truyền tải DOM bổ sung. Trong một hàm lồng nhau, có thể có nhiều sự truyền tải chuỗi phạm vi hơn, nhưng đó không phải là vấn đề lớn.

Nhưng một lần nữa, tôi khuyên không dựa vào các yếu tố globals tự động. Thay vào đó, hãy bọc mã của bạn trong một chức năng phạm vi (như bạn đã hiển thị) và nhận các thành phần có mục đích với getElementById, querySelector, querySelectorAll, v.v., nếu thích hợp. Nếu bạn dựa vào các hình cầu tự động, tỷ lệ cược cuối cùng bạn sẽ bị một cuộc xung đột cắn. Nhưng đây là ý kiến.

Lưu ý rằng nhìn lên các yếu tố với getElementById là thực sự thực sự nhanh, vì vậy tài liệu tham khảo bộ nhớ đệm thường không cần thiết vì lý do hiệu suất (bạn có thể muốn làm như vậy vì những lý do khác, như mã hóa thuận tiện). Tìm kiếm mọi thứ với các bộ chọn (querySelector, querySelectorAll) hơi chậm hơn một chút, nhưng tôi sẽ lo lắng về nó khi/nếu có sự cố. :-)

Nguồn

2014-09-19 10:34:45

Tôi có một mẫu đặc biệt về cách tôi viết ID và chức năng. Trong trường hợp của tôi sẽ không có xung đột. Ngoài ra tôi sẽ không bao giờ chia sẻ mã của tôi với các lập trình viên khác. Nếu tất cả các trình duyệt hiện đại đều hỗ trợ kỹ thuật và họ đang có kế hoạch tiếp tục làm như vậy, tôi không thấy lý do nào để không thử nó. Nhưng, cảm ơn bạn rất nhiều vì câu trả lời của bạn! – user1087110

Tôi đã khám phá kỹ thuật này một cách tình cờ vài tuần trước và đã sử dụng nó từ đó. Nó hoạt động với tất cả các trình duyệt, bao gồm cả các trình duyệt di động. – BlackMagic

Tại sao document.getElementById không cần thiết?

Trả lời

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