# id

[🔰 JS](../../../../../js) ⟩ [browser](../../../..) ⟩ [DOM](../../..) ⟩ [types](../..) ⟩ [Element](..) ⟩ [attribute]() ⟩ id

{% hint style="success" %}
The **`id`** [global attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes) defines an identifier which <mark style="color:red;">**must**</mark>**&#x20;**<mark style="color:yellow;">**be unique**</mark> in the whole document. Its purpose is to identify the element when ：

* <mark style="color:yellow;">**linking**</mark> (using a [fragment identifier](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web#fragment))
* <mark style="color:yellow;">**scripting**</mark>
* <mark style="color:yellow;">**styling**</mark> (with [CSS](https://developer.mozilla.org/en-US/docs/Glossary/CSS))
{% endhint %}

{% tabs %}
{% tab title="⭐️ 重點" %}
{% hint style="warning" %}
[dom-element-with-id](../../../../../js/scope/global/dom-element-with-id "mention") is <mark style="color:red;">**automatically**</mark> <mark style="color:yellow;">**registerd**</mark> as [variable](../../../../../js/scope/global/variable "mention")/[prop](../../../../../js/scope/global/object/prop "mention").
{% endhint %}
{% 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 %}
{% endtabs %}
