[JavaScript] HTMLElement 객체
HTMLElement 객체
1. HTMLElement
getElement* 메소드를 통해서 원하는 객체를 조회했다면 이 객체들을 대상으로 구체적인 작업을 처리해야 한다.
이를 위해서는 획득한 객체가 무엇인지 알아야 한다. 그래야 적절한 메소드나 프로퍼티를 사용할 수 있다.
아래 코드는 getElement*의 리턴 값을 보여준다.
<ul>
<li>HTML</li>
<li>CSS</li>
<li id="active">JavaScript</li>
</ul>
<script>
var li = document.getElementById('active');
console.log(li.constructor.name);// 리턴된 li 라는 객체의 생성자함수 이름을 알 수 있다.---> HTMLLIElement----->단수
var lis = document.getElementsByTagName('li');
console.log(lis.constructor.name);// HTMLCollection(유사배열:여러개의 엘리먼트 담고 있다.)----->복수
</script>
실행결과)
HTMLLIElement (li 엘리먼트 태그)
HTMLCollection (여러개의 엘리먼트를 담고 있다.)
이것을 통해서 알 수 있는 것은 아래와 같다.
- document.getElementById : 리턴 데이터 타입은 HTMLLIELement
- document.getElementsByTagName : 리턴 데이터 타입은 HTMLCollection
즉 실행결과가 하나인 경우 HTMLLIELement, 복수인 경우 HTMLCollection을 리턴하고 있다.
2. HTMLElement
실행결과가 하나인 엘리먼트들을 좀 더 살펴보자.
<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);
var target = document.getElementById('anchor');
console.log(target.constructor.name);
var target = document.getElementById('button');
console.log(target.constructor.name);
</script>
실행결과)
HTMLLIElement
HTMLAnchorElement
HTMLInputElement
이를 통해서 알 수 있는 것은 엘리먼트의 종류에 따라서 리턴되는 객체가 조금씩 다르다는 것이다. 각각의 객체의 차이점을 알아보자. 링크는 DOM의 스팩이다.
- HTMLLIElement
- HTMLAnchroElement
- HTMLInputElement
(1) HTMLLIElement
interface HTMLLIElement : HTMLElement {
attribute DOMString type;
attribute long value;
};
(2) HTMLAnchroElement
interface HTMLAnchorElement : HTMLElement {
attribute DOMString accessKey;
attribute DOMString charset;
attribute DOMString coords;
attribute DOMString href;
attribute DOMString hreflang;
attribute DOMString name;
attribute DOMString rel;
attribute DOMString rev;
attribute DOMString shape;
attribute long tabIndex;
attribute DOMString target;
attribute DOMString type;
void blur();
void focus();
};
즉 엘리먼트 객체에 따라서 프로퍼티가 다르다는 것을 알 수 있다. 하지만 모든 엘리먼트들은 HTMLElement를 상속 받고 있다.
interface HTMLLIElement : HTMLElement {
interface HTMLAnchorElement : HTMLElement {
(3) HTMLElement
interface HTMLElement : Element {
attribute DOMString id;
attribute DOMString title;
attribute DOMString lang;
attribute DOMString dir;
attribute DOMString className;
};
3. DOM Tree
모든 엘리먼트는 HTMLElement의 자식이다. 따라서 HTMLElement의 프로퍼티를 똑같이 가지고 있다. 동시에 엘리먼트의 성격에 따라서 자신만의 프로퍼티를 가지고 있는데 이것은 엘리먼트의 성격에 따라서 달라진다. HTMLElement는 Element의 자식이고 Element는 Node의 자식이다. Node는 Object의 자식이다. 이러한 관계를 DOM Tree라고 한다.
이 관계를 그림으로 나타내면 아래와 같다.
출처: https://devbox.tistory.com/entry/JavaScript-HTMLElement?category=574556 [장인개발자를 꿈꾸는 :: 기록하는 공간]
'Javascript > JavaScript' 카테고리의 다른 글
[JavaScript] Document 객체 (0) | 2020.07.07 |
---|---|
[JavaScript] Node 객체 (0) | 2020.07.07 |
[JavaScript] Element 객체 (0) | 2020.07.07 |
[JavaScript] HTMLCollection 객체 (0) | 2020.07.07 |
[JavsScript] 제어 대상을 찾기 (0) | 2020.07.07 |
[JavaScript] 전역객체 window (0) | 2020.07.07 |
[JavaScript] Object Model (0) | 2020.07.07 |
[JavaScript] arguments(유사 배열 객체) (0) | 2020.07.07 |