웹브라우저 JavaScript

HTMLElement

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);
	var lis = document.getElementsByTagName('li');
	console.log(lis.constructor.name);
</script>

실행결과

HTMLLIElement 
HTMLCollection

이것을 통해서 알 수 있는 것은 아래와 같다.

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

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

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를 보자.

interface HTMLLIElement : HTMLElement {
           attribute DOMString       type;
           attribute long            value;
};

다음은 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 {

HTMLElement는 아래와 같다.

interface HTMLElement : Element {
           attribute DOMString       id;
           attribute DOMString       title;
           attribute DOMString       lang;
           attribute DOMString       dir;
           attribute DOMString       className;
};

DOM Tree

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

이 관계를 그림으로 나타내면 아래와 같다. (출처)

 이러한 관계를 이해하지 못하면 필요한 API를 찾아내는 것이 어렵거나 몹시 혼란스러울 것이다. 다행인 것은 jQuery와 같은 라이브러리를 이용한다면 이러한 관계를 몰라도 된다. 혹시 이해가 안된다고 너무 상심하지 말자.

댓글

댓글 본문
  1. 완료
  2. 헤밍웨이
    220825 DOM Tree에 대해 이해했습니다 :)
  3. 임앤강
    2022-02-08 강의 감사합니다.
  4. 드림보이
    2021.12.22. HTMLElement 파트 수강완료
  5. pmxsg
    2021.12.21 수강
  6. labis98
    20210910 좋은 강의 감사합니다.
  7. 박병진
    2020.12.03 완료
  8. 현미쓰
  9. 이준호
    생활코딩 여러분 질문이 있습니다.

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

    --> 여기서 Object는 Jascript에 내장된 Object 오브젝트를 말하는 것 맞나요?
  10. anne
    완료
  11. nurunzii
    완료
  12. 정승옥
    완료
  13. 한강
    객체 이름이 구조적으로 만들어졌네요. 오늘도 감사합니다.~~^^!
    200629
  14. 김진욱
    완료
  15. 쑤우
    완료. 감사합니다~
  16. Useok
  17. Gritter
    완료!
  18. ㅎㅅㅁ
    200203 다시시작
  19. 굼벵이
    완료
  20. 모든일이일사천리
    완료 : 19-11-13 9PM
  21. 2019-10-14 7:21pm 완료
  22. 정홍
    완료
  23. 정홍
    완료
  24. 류석현
    수강완료
  25. 미완성
    20190109
  26. JuicyFresh
    감사합니다.
  27. SlowStarter
    감사합니다!
  28. 생선과고양이
    20180425감사합니다
  29. An TaeHyeon
    18-01-25 수강완료.
    강의록 공유합니다.
    https://goo.gl/eBxYhv
  30. 박인호
    12-28
    수강완료.
    각각의 HTML(태그명)Element 들은
    HTMLElement의 자식.
  31. Byungsoo Kim
    감사합니다.
  32. 수복
    감사합니다~ 큰 그림을 본 듯 하네요~
  33. 김지원
    HTMLInputElement링크는 없는 주소라고 나오네요 ㅠㅠ 다른 링크를 타고 들어가도 찾을 수가 없네요.. 없어진 element인가요?
  34. Hyung Keun Kim
    정리 감사합니다.
    대화보기
    • Sangmook Kim
      170728 완료
    • crable
      감사합니다
    • BANIP
      html 앵커 엘리먼트는 href라는 속성을 가지고 있다.
      앵커 객체에서 href 프로퍼티에 접근하면 html a 링크의 src값이 출력된다. 이 프로퍼티값은 조회도 가능하며 수정도 가능하다.
      HTMLLiElment, HTMLAnchorElement는 hTMLElement와 상속관계가 성립한다. 상속관계가 성립되는 객체는 부모객체의 프로퍼티와 메서드를 물려받는다.
      HTMLAncherElement, HTMLLiElement, HTMLInputElement는 기본적으로 HTMLElement의 프로퍼티를 상속받아 기본적인 프로퍼티는 같으나 기능적인 차이를 가지는 부가적인 프로퍼티들이 추가된다.
      모든 태그는 html 엘리먼트라는 공통적인 특성을 가지고있기 때문에 일부 공통적인 속성을 가지고 있으나 각각의 기능과 스펙에 따라 다른 기능을 가지고 있다.
    • 오원구
      고맙습니다.
    • 코딩왕될래
      강의 너무좋습니다. 감사합니다.
    • 유유
      감사합니다!
    • 라꿍차타
      처음 접하는 저한테는 너무 친절하고 재밌네요.
      님 좀 심하신듯?
      대화보기
      • tachyon
        감사합니다
      • 이웃집토토로
        어쩔
        대화보기
        • 갓고잉
          잠이 솔솔 오네요. 감사합니다. 2시간 푹 잤습니다ㅎㅎ
        • yihsang
          반복해서 수강하겠습니다.
          감사합니다.
        • JustStudy
          2017.07.08 금
          고맙습니다 3.
        • JustStudy
          2016.06.30
          고맙습니다 2.
        • 온달장군
          강좌 잘보고 갑니다. 감사합니다.
        • 이주환
          2016. 04. 27
          잘보고갑니다~!
        버전 관리
        egoing@gmail.com
        현재 버전
        선택 버전
        graphittie 자세히 보기