# Element 객체

> **Element 객체**는 **엘리먼트를 추상화한 객체**다. \
> \
> DOM은 HTML만을 제어하기 위한 모델이 아니다. HTML이나 XML, SVG, XUL과 같이 마크업 형태의 언어를 제어하기 위한 규격이기 때문에 Element는 마크업 언어의 일반적인 규격에 대한 속성을 정의하고 있고, \
> 각각의 구체적인 언어(HTML,XML,SVG)를 위한 기능은 HTMLElement, SVGElement, XULElement와 같은 객체를 통해서 추가해서 사용하고 있다.

<figure><img src="https://3193435092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Miu1tqKdNPM-BV0usUx%2Fuploads%2F0DNNu468qxhul8hDk90W%2Fimage.png?alt=media&#x26;token=be031c5b-0278-4d2e-9d76-db6af89c8183" alt=""><figcaption><p>DOM의 계층구조에서 Element 객체의 위치</p></figcaption></figure>

<details>

<summary>주요기능</summary>

#### 식별자

문서내에서 특정한 엘리먼트를 식별하기 위한 용도로 사용되는 API

* Element.classList
* Element.className
* Element.id
* Element.tagName

#### 조회

엘리먼트의 하위 엘리먼트를 조회하는 API

* Element.getElementsByClassName
* Element.getElementsByTagName
* Element.querySelector
* Element.querySelectorAll

#### 속성

엘리먼트의 속성을 알아내고 변경하는 API

* Element.getAttribute(name)
* Element.setAttribute(name, value)
* Element.hasAttribute(name);
* Element.removeAttribute(name);

</details>

{% content-ref url="element/api" %}
[api](https://westsilver.gitbook.io/study-script/javascript/web-browser/untitled/element/api)
{% endcontent-ref %}

{% content-ref url="element/api-1" %}
[api-1](https://westsilver.gitbook.io/study-script/javascript/web-browser/untitled/element/api-1)
{% endcontent-ref %}

{% content-ref url="element/api-2" %}
[api-2](https://westsilver.gitbook.io/study-script/javascript/web-browser/untitled/element/api-2)
{% endcontent-ref %}

{% content-ref url="broken-reference" %}
[Broken link](https://westsilver.gitbook.io/study-script/javascript/web-browser/untitled/broken-reference)
{% endcontent-ref %}

{% content-ref url="broken-reference" %}
[Broken link](https://westsilver.gitbook.io/study-script/javascript/web-browser/untitled/broken-reference)
{% endcontent-ref %}