[ JavaScript ] 자바스크립트 기본 문법 | HTMLElement

이미지 출처 :    https://commons.wikimedia.org/wiki/File:JavaScript-logo.png

 

 

 

 

 

 

해당 포스팅은 생활코딩의 이고잉 님의 강의를 기반으로 개인 공부용으로 정리한 포스팅임을 미리 알립니다.

 

 

 

---

 

 

자바스크립트 기본 문법  ::  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>

 

 

 

 

 

 

 

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

 

 

 

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

 

 

 

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

 

 

 

 

실행 결과가 하나인 엘리먼트들을 조금 더 자세하게 살펴보도록 하겠습니다.

 

 

 

 

 

<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
• HTMLAnchroElement
• HTMLInputElement

 

 

 

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;
};

 

 

모든 태그에서 사용가능했던 id 나 class 같은 동일하게 있어도 되는 프로퍼티가 들어있었습니다.

 

 

 

 

 

DOM Tree

 

 

 

모든 엘리먼트는 HTMLElement의 자식입니다.

 

따라서 HTMLElement의 프로퍼티를 똑같이 가지고 있다고 말 할 수 있습니다.

 

 

동시에 엘리먼트의 성격에 따라서 자신만의 프로퍼티를 가지고 있는데,

이것은 엘리먼트의 성격에 따라서 달라집니다.

 

HTMLElement는 Element의 자식이고 Element는 Node의 자식이고, 또 Node는 Object의 자식입니다.

 

 

이러한 관계를 DOM Tree라고 합니다.

 

 

이 관계를 그림으로 나타내면 아래와 같습니다.

 

 

 

 

이미지 출처 : https://web.stanford.edu/class/cs98si/slides/the-document-object-model.html

 

 

 

 

 

DOM 이나 DOM Tree 같은 단위의 의미를 제대로 이해하지 못해서 어려움을 겪었었는데,

 

이번 포스팅을 작성하면서, 또 이번 파트 강의를 들으면서 이제야 알 것 같습니다.