🔸DOM element with "id"

JS ⟩ scope ⟩ global ⟩ DOM element with "id"

DOM element with the "id" attribute.

⭐️ 重點

DOM element with "id" is registerd as global variable/global object property automatically.

👥 相關

• Element ⟩ attribute ⟩ id

💈範例

• replit：DOM globals

📁 index.html

<!--╭───── id ──────╮    -->
<ul id="my-todo-list">
    <!--╭── id ──╮    -->
    <li id="first">Write a book</li>
</ul>

📁 script.js

// ⭐️ case 1: "id" is valid "identifier"
first,                   // <li id="first">    // global variable ⭐️ 
window.first,            // <li id="first">    // dot notation ⭐️ 
window["first"],         // <li id="first">    // bracket notation

// ⭐️ case 2: "id" is invalid as "identifier"
window["my-todo-list"],  // <ul id="my-todo-list">

📘 手冊

• HTML ⟩ Global attributes ⟩ id

• Web APIs ⟩ Element ⟩ .id

• CSS ⟩ ID selectors

📗 參考

• YDKJS: Scope & Closures (v.2) ⟩ Chapter 4: Around the Global Scope