Javascript DOM - HTMLElement

HTMLElement

getElement* 메소드를 통해서 원하는 객체를 조회했다면 이 객체들을 대상으로 구체적인 작업을 처리해야 한다. 이를 위해서는 획득한 객체가 무엇인지 알아야 한다. 그래야 적절한 메소드나 프로퍼티를 사용할 수 있다.

예제1

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

위의 코드의 결과로 알 수 있는 것은

document.getElementById : 리턴 데이터 타입은 HTMLLIELement
document.getElementsByTagName : 리턴 데이터 타입은 HTMLCollection

즉 실행결과가 하나인 경우 HTMLLIELement, 복수인 경우 HTMLCollection을 리턴하고 있다.

예제2

<a id="anchor" href="https://k0502s.tistory.com/">jin seok blog</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>

위 결과를 통해서 엘리먼트의 종류에 따라서 리턴되는 객체가 조금씩 다르다는 것을 알 수 있다.

하지만 모든 엘리먼트들은 HTMLElement를 상속 받고 있다는 사실을 알아야 한다.

interface HTMLLIElement : HTMLElement {
interface HTMLAnchorElement : HTMLElement {

HTMLCollection 예제

<!DOCTYPE html>
<html>
<body>
<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li id="active">JavaScript</li>
</ul>
<script>
console.group('before');
var lis = document.getElementsByTagName('li');
for(var i = 0; i < lis.length; i++){
    console.log(lis[i]);
}
console.groupEnd();
console.group('after');
lis[1].parentNode.removeChild(lis[1]);
for(var i = 0; i < lis.length; i++){
    console.log(lis[i]);
}
console.groupEnd();
</script>
</body>
</html>

HTMLCollection은 리턴 결과가 복수인 경우에 사용하게 되는 객체다. 유사배열로 배열과 비슷한 사용방법을 가지고 있지만 배열은 아니다.
HTMLCollection의 목록은 실시간으로 변경된다. 그래서 다시 조회할 필요가 없다.
이때 조회 한다는 것은 var lis = document.getElementsByTagName('li'); 에서 lis에 HTMLCollection객체를 담는다는 것이고, 재조회 한다는 것은 lis[1].parentNode.removeChild(lis[1]); 을 통해서 lis[1]이 삭제되었는데, 이 삭제된 상태를 적용하기 위하여 다시금 var lis = document.getElementsByTagName('li'); 를 사용해서 lis에 HTMLCollection객체를 담을 필요가 없다는 뜻이다.

DOM Tree

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

'프로그래밍 개발 > JS 웹' 카테고리의 다른 글

javascript Element 객체 - 식별자 API (0)	2020.11.19
javascript Element 객체 (0)	2020.11.19
javascript DOM - jQuery (0)	2020.11.17
javascript DOM - 제어 대상을 찾기 (0)	2020.11.17
javascript BOM (0)	2020.11.17