sự khác biệt giữa window.element và nguyên tố là gì khi truy cập DOM yếu tố

Question

tôi thích hiểu cách trình duyệt khác biệt giữa chào và window.hello ở dưới cho đang

http://jsfiddle.net/PH3t2/291/

var hello = "new hello"; 
 
console.log("variable hello : " + hello); // <-- prints "new hello" 
 
console.log(window.hello); // <-- logs HTML elements

<div class="mainWrapper"> 
 
    <div class="mainBox" id="hello"> 
 
    main 
 
    </div> 
 
    <div class="clear" id="hello"></div> 
 
</div>

Các phần tử HTML in cửa sổ được chỉ định thay vì chuỗi "new hello" như thế nào?

Answer 1

Vấn đề là vì theo mặc định trình duyệt lưu trữ tất cả các yếu tố như tính chất của window keyed bởi thuộc tính id của họ - đây là một phần lý do bạn không thể có nhiều yếu tố với cùng id, đó là lý do mã HTML bạn đã được hiển thị không hợp lệ.

Đó cũng là lý do tại sao window.hello trả về đối tượng Element - đó là tham chiếu đến <div> đầu tiên trong HTML của bạn.

Tương tự, trình duyệt biết rằng khi bạn xác định biến số hello, bạn muốn giá trị được lưu trữ riêng biệt với tham chiếu, nó có thành phần window.hello. Đây là lý do tại sao hello trả lại chuỗi "new hello".