jQuery

$()는 jQuery의 함수이다. 이 함수의 인자로 CSS 선택자(li)를 전달하면 jQuery 객체라는 것을 리턴한다.

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'); // HTMLCollection
    console.log(lis.constructor.name);
</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>

엘리먼트 객체에 따라서 프로퍼티가 다르다는 것을 알 수 있다.

하지만 모든 엘리먼트들은 HTMLElement를 상속 받고 있다.