# DOM element with "id"

[JS](https://lochiwei.gitbook.io/web/js) ⟩ [scope](https://lochiwei.gitbook.io/web/js/scope) ⟩ [global](https://lochiwei.gitbook.io/web/js/scope/global) ⟩ DOM element with "id"

{% hint style="success" %}
[dom](https://lochiwei.gitbook.io/web/browser/dom "mention") <mark style="color:yellow;">**element**</mark> with the "[id](https://lochiwei.gitbook.io/web/browser/dom/type/element/attribute/id "mention")" <mark style="color:yellow;">**attribute**</mark>.
{% endhint %}

{% tabs %}
{% tab title="⭐️ 重點" %}
{% hint style="warning" %} <mark style="color:purple;">**DOM element with "id"**</mark> is <mark style="color:yellow;">**registerd**</mark> as [variable](https://lochiwei.gitbook.io/web/js/scope/global/variable "mention")/[prop](https://lochiwei.gitbook.io/web/js/scope/global/object/prop "mention") <mark style="color:red;">**automatically**</mark>.
{% endhint %}
{% endtab %}

{% tab title="👥 相關" %}

* [element](https://lochiwei.gitbook.io/web/browser/dom/type/element "mention") ⟩ [attribute](https://lochiwei.gitbook.io/web/browser/dom/type/element/attribute "mention") ⟩ [id](https://lochiwei.gitbook.io/web/browser/dom/type/element/attribute/id "mention")
  {% endtab %}

{% tab title="💈範例" %}

* replit：[DOM globals](https://replit.com/@pegasusroe/DOM-globals#index.html)

&#x20;📁 index.html

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

&#x20;📁 script.js

```javascript
// ⭐️ 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">
```

{% endtab %}

{% tab title="📘 手冊" %}

* [ ] [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) ⟩ [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes) ⟩ [id](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id)
* [ ] [Web APIs](https://developer.mozilla.org/en-US/docs/Web/API) ⟩ [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) ⟩ [.id](https://developer.mozilla.org/en-US/docs/Web/API/Element/id)
* [ ] [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) ⟩ [ID selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/ID_selectors)
  {% endtab %}

{% tab title="📗 參考" %}

* [ ] [ydkjs-scope-and-closures-v.2](https://lochiwei.gitbook.io/web/master/ref/book/you-dont-know-js-series-v.2/ydkjs-scope-and-closures-v.2 "mention") ⟩ Chapter 4: [Around the Global Scope](https://github.com/getify/You-Dont-Know-JS/blob/2nd-ed/scope-closures/ch4.md#chapter-4-around-the-global-scope)
  {% endtab %}
  {% endtabs %}