웹브라우저의 문서를 제어하기 위해 가장 먼저 해야하는 것은 제어하고자 하는 태그의 엘리먼트에 대한 객체를 찾는것이다. 그 다음 그 객체의 프로퍼티를 이용해 색깔을 바꾼다던지 등의 작업을 한다.
객체마다 프로퍼티가 다르기 때문에 어떠한 객체인지 알아야 할 필요가 있다.
<!DOCTYPE html>
<html>
<body>
<a id="anchor" href="http://localhost">localhost</a>
<ul>
<li>Kane</li>
<li id="list">Son</li>
<li>Alli</li>
</ul>
<input type="button" id="button" value="button" />
<script>
var target = document.getElementById('list');
console.log(target.constructor.name);
var target = document.getElementById('anchor');
console.log(target.constructor.name);
var target = document.getElementById('button');
console.log(target.constructor.name);
var target = document.getElementsByTagName('li');
console.log(target.constructor.name);
</script>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</body>
</html>자바스크립트 부분을 보면,
ID와 TagName 값에 맞는 엘리먼트를 조회하여 target 변수에 저장한다.
target 이라는 객체에 constructor 라는 프로퍼티를 사용하여 이름을 console에 출력한다.
constructor.name 에 대해 구체적인 개념과 사용법은 넘어가고 이것을 사용하면 객체의 이름을 알 수 있다는 정도만 이해하고 넘어간다.
어찌됐든 ID와 TagName에 맞는 태그의 엘리먼트들에 대해 각각 객체를 생성했고 constructor.name 으로 객체의 이름을 조회해 보는 것이다.
<li> 태그의 객체이름은 HTMLLIElement,
<a> 태그의 객체이름은 HTMLAnchorElement,
<input> 태그의 객체이름은 HTMLInputElement 이다.
제일 하단에 id가 아닌 태그이름으로 조회한 엘리먼트들의 객체이름은 HTMLCollection 이 된다.
객체가 하나일 때는 HTML Element 카테고리에 속하게 되고, 복수개라면 HTMLCollection 이 되는 것이다.
ID로 조회한 엘리먼트들의 객체는 전부 HTML Element 라는 카테고리로 분류되며 조회한 엘리먼트에 따라 LIElement, AnchorElement, InputElement 등으로 분류가 된다.
태그명에 따라 객체명이 달라진다는 것은 제어하는 객체가 다르다는 뜻이며 객체가 다르다는 것은 각 객체가 갖고있는 프로퍼티가 다르다는 것이고 이것은 기능이 다르다는 것이다.
정리하자면 객체가 하나일 땐 HTML Element 이고 태그요소마다 객체이름이 다르며 각 객체명마다 프로퍼티가 다르지만 HTML Element 라는 객체에게 상속받은 객체들이기 때문에 공통적인 프로퍼티를 가지고 있다.
즉, 공통적인 프로퍼티를 갖고 있으면서 태그의 성격에 따라 프로퍼티가 조금씩 다르다.
'Javascript' 카테고리의 다른 글
| 11. Element 객체 & 식별자 API (0) | 2021.09.13 |
|---|---|
| 10. jQuery 알아보기 (0) | 2021.09.11 |
| 8. jQuery 기본 사용법 (0) | 2021.09.09 |
| 7. getElementsByTagName / getElementsByClassName / getElementById (0) | 2021.09.08 |
| 6. window.open 활용 (0) | 2021.09.07 |