웹브라우저 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. 라꿍차타
    처음 접하는 저한테는 너무 친절하고 재밌네요.
    님 좀 심하신듯?
    대화보기
    • tachyon
      감사합니다
    • 이웃집토토로
      어쩔
      대화보기
      • 갓고잉
        잠이 솔솔 오네요. 감사합니다. 2시간 푹 잤습니다ㅎㅎ
      • yihsang
        반복해서 수강하겠습니다.
        감사합니다.
      • JustStudy
        2017.07.08 금
        고맙습니다 3.
      • JustStudy
        2016.06.30
        고맙습니다 2.
      • 온달장군
        강좌 잘보고 갑니다. 감사합니다.
      • 이주환
        2016. 04. 27
        잘보고갑니다~!
      • JustStudy
        고맙습니다
      • Moon Hee Bae
        interface와 attribute는 기본 문법에 관련된 내용이예요. 이것은 자바스크립트 뿐만 아니라 다른 언어에서도 사용되는 예약어 입니다. 간략하게 설명드리기가 참 어렵기는 하지만.....
        interface의 경우 class(개체)를 나타내는 것이고요, attribute는 value(변수)를 나타내는 것입니다.
        각각 class와 value를 나타내기는 하지만, 뭔가 기능상 '특별한 일'을 하게끔 하는 녀석들이죠.
        MS계열 언어(언어 별로 다르긴 하지만...)를 예로 들면 interface는 추상 클래스이긴 하지만 instance(객체)화 할수 있습니다. 추상클래스라 함은... 클래스에 구현부가 없고, 선언, 즉, 프로토타입만 있는 것을 의미하는 것이지요. 즉, interface의 내용(생성자, 함수 등)의 구현을 interface를 상속 받은 클래스에서 하겠다는 의미를 두고 있습니다.
        .....
        ....
        ... 여기에서는
        interface는 class이고 attribute는 public접근 가능한 value라고 생각하시면 편하실것 같아요...

        이고잉님이 원하는 학습법은 자신의 커리큘럼을 쭈~욱 한번 따라오는것일 겁니다. 미시적인 접근은 학습을 지치게 할 수 있다라는 견해이신것 같으니... 그렇게 따라가 보도록하는것이 좋지 않을까요? ^^
        대화보기
        • 화니
          'interface' , 'attribute' 란 용어가 자바스크립트 자체의 문법(예약어) 인가요. 아니면 상속관계를 설명하기 위한 단어 인가요?
        • 이몽룡
          다시 한번 감사 합니다.
        • 택이
          제이쿼리를 배우면 dom은 아예 사용하지 않나요??
        • Se-Young Ryu
          2016/01/28 11pm
        • WayneKing
          정말 고생 많으십니다!!!
        • 고고
          "즉 실행결과가 하나인 경우 HTMLLIELement, 복수인 경우 HTMLCollection을 리턴하고 있다. "

          여기서 오타발생했습니다.
          HTMLLIELement -> HTMLLIElement

          항상 좋은 강의 감사드립니다
          정주행 중입니다.
        • 코딩!
          각각의 element들은 어떤식으로 만들어졌는지 나중에 기회되면 알아보고 싶네요
          지금은 뭐 ㅋㅋㅋㅋ 수준 미달 ㅜㅜ
        • will
          꿀잼

          학교에서 배운 지식파편들이 맞춰지는 느낌입니다
          물론 덧붙여지는게 더 많네요 :)
        • 잘 들었습니다.
        • 땡깡쟁이
          웬만한 유료 강의보다 훨씬더 좋네요.
          항상 감사하게 보고 있습니다.
        • 만쩜쟁이
          좋아요. 이런사이트가 있을줄이야.
        • 육점이
          항상 감사합니다!!!! 제가 한가지일을 길고 깊게 흥미를 유지 하지 못하는 성격인데, 이 싸이트를 통해서 프로그래밍을 접한 후로 프로그래밍에 흥미를 아직까지도 오래도록 유지하고 있습니다. 감사합니다.
        • 팽맨이러닝
          제가 머리가 나빠서 그런 거일지도 몰라요.
          편입을 하긴 했어도 심지어 전 학부 때 컴퓨터공학을 전공했습니다. ㅠㅜ

          저도 죄송합니다. 힘들게 만드신 강의를 한번에 이해를 못해서요..

          좀 더 공부해보겠습니다.
          답장 감사드립니다.
          대화보기
          • egoing
            팽맨님 내용 자체가 원래 좀 난해 합니다. 이런 어려움 때문에 jQuery와 같은 기술을 사용합니다. jquery 기술을 바로 사용하시는 것이 더 좋을 것 같네여. 한번에 모든 내용을 이해하는 것은 쉽지 않은 일입니다. 반복 학습을 하셔야 합니다.쉽게 강의를 만들지 못한 점은 송구스럽게 생각 합니다.
            대화보기
            • 팽맨이러닝
              전 용어들이 아직도 헷갈려 죽겠네요.
            • 규빈이아빠
              명강의 입니다^^
            • gyun
              이번수업최고네요
            • david20jazz
              최고의 강의 입니다!!
            • 음...원리를 알려주신다고 할까요?? 모르고 코딩했는데..이젠 아주 조금 뭔뜻인지 알듯하여 너무 감사합니다..
              앞으로도 쭉...이런 멋지고 원론적인 강의 부탁드립니다 --꾸벅~--
            • 유형찬
              감사합니다!
            • 도로시
              JavaScript 언어 수업을 듣고 오니 확실히 이해하기 편하네요 ^^
              멋진 강의, 그리고 배려넘치는 설명 감사합니다!!
            • 요네츄
              잘 이해했습니다! 수업최고에요~!
            • zzeljoa
              egoing님 수업 최고예요 귀에 쏙쏙 들어옵니다~^^
            버전 관리
            egoing
            현재 버전
            선택 버전
            graphittie 자세히 보기