# HTMLElement

<details>

<summary>단수와 복수</summary>

**HTMLElement** : 실행결과가 **하나**인 경우\
**HTMLCollection** : 실행결과가 **복수**인 경우

```html
<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li id="active">JavaScript</li>
</ul>
<script>
    var li = document.getElementById('active');
    console.log(li.constructor.name); // HTMLElement
    var lis = document.getElementsByTagName('li');
    console.log(lis.constructor.name); // HTMLCollection
</script>
```

</details>

```html
<a id="anchor" href="http://opentutorials.org">opentutorials</a>
<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li id="list">JavaScript</li>
</ul>
<input type="button" id="button" value="button" />
<script>
    var target = document.getElementById('list');
    console.log(target.constructor.name); // HTMLLIElement
 
    var target = document.getElementById('anchor');
    console.log(target.constructor.name); // HTMLAnchorElement
 
    var target = document.getElementById('button');
    console.log(target.constructor.name); // HTMLInputElement
 
</script>
```

* [HTMLLIElement](http://www.w3.org/TR/2003/REC-DOM-Level-2-HTML-20030109/html.html#ID-74680021)
* [HTMLAnchroElement](http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-48250443)
* [HTMLInputElement](http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-6043025)

{% hint style="info" %}
엘리먼트 객체에 따라서 프로퍼티가 다르다. \
하지만 모든 엘리먼트들은 HTMLElement를 상속 받고 있다.
{% endhint %}

## DOM Tree

<figure><img src="https://3193435092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Miu1tqKdNPM-BV0usUx%2Fuploads%2FnF1cXPrawTnFvOtiw4sQ%2Fimage.png?alt=media&#x26;token=52dc151e-e760-40da-9d6f-06392c36749c" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
**모든 엘리먼트는 HTMLElement의 자식**이다. 따라서 HTMLElement의 프로퍼티를 똑같이 가지고 있다. 동시에 엘리먼트의 성격에 따라서 자신만의 프로퍼티를 가지고 있는데 이것은 엘리먼트의 성격에 따라서 달라진다. HTMLElement는 [Element](https://developer.mozilla.org/en-US/docs/Web/API/element)의 자식이고 Element는 [Node](https://developer.mozilla.org/en-US/docs/Web/API/Node)의 자식이다. \
Node는 Object의 자식이다. 이러한 관계를 DOM Tree라고 한다.
{% endhint %}
