[ JavaScript ] JS HTMLElement , DOM Tree

 

 

 

 

 

이미지 출처 :    https://www.inflearn.com/course/javascript-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EA%B0%95%EC%A2%8C#

 

생활코딩의 이고잉 님의 강의를 기반으로 개인 공부용으로 정리한 포스팅입니다.

 

 

 

---

 

 

 

 

- 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 같은 단위의 의미를 제대로 이해할수있을것같습니다.

 

 

 

 

 

SUA 정보보안 멘토링에 참여하고 있습니다.