HTMLElement

단수와 복수

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

<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>

<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
• HTMLAnchroElement
• HTMLInputElement

엘리먼트 객체에 따라서 프로퍼티가 다르다. 하지만 모든 엘리먼트들은 HTMLElement를 상속 받고 있다.

DOM Tree

모든 엘리먼트는 HTMLElement의 자식이다. 따라서 HTMLElement의 프로퍼티를 똑같이 가지고 있다. 동시에 엘리먼트의 성격에 따라서 자신만의 프로퍼티를 가지고 있는데 이것은 엘리먼트의 성격에 따라서 달라진다. HTMLElement는 Element의 자식이고 Element는 Node의 자식이다. Node는 Object의 자식이다. 이러한 관계를 DOM Tree라고 한다.