Truy cập ID phần tử trong DOM dưới dạng biến cửa sổ / toàn cục

Trongnhững ngày đầu phát triển web, ID phần tử là một trong những điều đầu tiên tôi học được về cách thao túng các phần tử từ vùng đất JS. Với tham chiếu đến các yếu tố bằng ID của họ

<div id = "so_many"> Rất nhiều người phải suy nghĩ về </ div> 
<script> 
    const so_many = document.getElemntByID ('so_many') 
</ script>

chúng ta có thể:

1: thay đổi html bên trong của phần tử (InternalHTML)

<div id = "so_many"> Rất nhiều người phải suy nghĩ về </ div> 
<script> 
    const so_many = document.getElemntByID ('so_many') 
    so_many.innerHTML = "Tôi đang bay không cánh" 
</ script>

2. thay đổi phong cách của phần tử

<div id = "so_many"> Rất nhiều người phải suy nghĩ về </ div> 
<script> 
    const so_many = document.getElemntByID ('so_many') 
    so_many.style.backgroundColor = "green" 
</ script>

3. nối một nút con vào phần tử

<div id = "so_many"> Rất nhiều người phải suy nghĩ về </ div> 
<script> 
    const so_many = document.getElemntByID ('so_many') 
    so_many.appendChild (document.createTextNode ('văn bản của tôi')) 
</ script>

4. loại bỏ phần tử khỏi nút trình duyệt

<div id = "so_many"> Rất nhiều người phải suy nghĩ về </ div> 
<script> 
    const so_many = document.getElemntByID ('so_many') 
    const textNode = document.createTextNode ('văn bản của tôi' 
    ) 
    so_many.appendChild .removeChild (textNode) 
</ script>

5. đính kèm và loại bỏ các trình lắng nghe sự kiện cho phần tử.

<div id = "so_many"> Rất nhiều người phải suy nghĩ về </ div> 
<script> 
    const so_many = document.getElemntByID ('so_many') 
    so_many.addEventListener ('tập trung', (evt) => { 
        // .. code ở đây 
    }) 
    so_msny.removeEventListener ('tập trung') 
</ script>

* rất nhiều vv

Bây giờ mọi thứ sắp thay đổi thực sự.

ID phần tử trong đối tượng cửa sổ

Gần đây tôi đã biết rằng ID phần tử được lưu trữ dưới dạng biến toàn cục hoặc biến cửa sổ.

nó có nghĩa là gì?

Điều đó có nghĩa là nếu chúng ta tạo các phần tử gán cho chúng các thuộc tính id, thì các thuộc tính id có thể được truy cập thông qua đối tượng cửa sổ hoặc dưới dạng biến toàn cục.

Hãy nói rằng chúng ta có điều này:

<div id = "so_many"> Rất nhiều người nghĩ về </ div>

Đây là một yếu tố HTMLDivEuity có idthuộc tính giá trị so_many. Bây giờ, HTMLDivE bổ sung này có thể được truy cập thông qua so_manyđối tượng trong cửa sổ:

    Nhật ký <script> (window.so_many) 
</ script>