티스토리 뷰

Frontend/JavaScript

[생활코딩][웹브라우저JS]- HTMLElement, Dom Tree

blueprint-12 2022. 1. 29. 20:41

getElement* 메소드를 통해서 원하는 객체를 조회했다면 이 객체들을 대상으로 구체적인 작업을 처리해야 한다.

이를 위해서는 획득한 객체가 무엇인지 알아야 한다. 그래야 적절한 메소드나 프로퍼티를 사용할 수 있다.

 

getElement* 의 리턴 값을 보여주는 코드

<script>
      var li = document.getElementById("active");
      //li객체의 생성자함수를 알아낸 다음 그 함수의 이름을 알아내면 li객체의 이름을 알 수 있다.
      console.log(li.constructor.name); // output: HTMLLIElement
      var lis = document.getElementsByTagName("li");
      // 위와 같으나 Elements 이기 떄문에 lis 라는 차이점이 있다.
      console.log(lis.constructor.name); // output: HTMLCollection
    </script>
  • HTMLLIELement 라는 카테고리에 속한 객체라는 것을 의미하며 중간에 LI는 li태그를 나타낸다. 하나의 엘리먼트를 담은 객체이다.
  • HTMLCollection 카테고리에 속한 복수의 엘리먼트를 담은 객체를 의미하며 말 그대로 단일 엘리먼트가 아닌 여러개의 엘리먼트를 담고있는 객체이다. 
    • document.getElementById : 리턴 데이터 타입은 HTMLLIELement
    • document.getElementsByTagName : 리턴 데이터 타입은 HTMLCollection
  • 즉, 실행결과가 하나인 경우 HTMLLIELement, 복수인 경우 HTMLCollection을 리턴하고 있다. 
  • HTMLLIELement 와 HTMLCollection은 둘 다 객체이며 HTMLCollection의 경우 유사배열 객체라고 생각하면 쉽다. 이 객체 안에 담긴 프로퍼티와 메소드를 사용하여 엘리먼트들을 JS를 통해서 동적으로 제어할 수 있게된다. 
<body>
    <!-- a태그, li태그, input태그 -->
    <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>
      const target = document.getElementById("list");
      console.log(target.constructor.name); // output:HTMLLIElement

      const target1 = document.getElementById("anchor");
      console.log(target1.constructor.name); // output: HTMLAnchorElement

      const target2 = document.getElementById("button");
      console.log(target2.constructor.name); // output: HTMLInputElement
    </script>
  </body>
  • 엘리먼트의 종류에 따라서 리턴되는 객체가 조금씩 다르다는 것을 확인할 수 있다.  
    • HTMLLIElement
    • HTMLAnchorElement
    • HTMLInputElement
  • 공식문서에 따르면 엘리먼트 객체에 따라서 프로퍼티가 다르다는 것을 알 수 있다. 하지만 모든 엘리먼트들은 HTMLElement를 상속받고 있다. 이 말은 각각이 갖고 있는 고유 프로퍼티가 있으면서 공통적으로 갖고 있는 것이 존재한다는 말이다.

HTMLLIElement : HTMLElement // 는 HTMLLIElement가 HTMLElement을 상속받은 자식객체라는 의미이다.&amp;nbsp;

 

DOM Tree

  • HTMLElement는 Element의 자식이고 Element는 Node의 자식이다. Node는 Object의 자식이다. 이러한 관계를 DOM Tree라고 한다.

all ref : https://opentutorials.org/module/904/6665

 

HTMLElement - 웹브라우저 JavaScript

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

opentutorials.org

 

HTMLCollection

HTMLCollection은 리턴 결과가 복수인 경우에 사용하게 되는 객체이다. 유사배열로 배열과 비슷한 사용방법을 가지고 있지만 배열은 아닙니다. 콜렉션은 독특한 점이 있는데 바로 목록이 실시간으로 갱신된다는 점이다. 

-> 즉, 다시 객체를 만들 필요가 없다는 말이다. HTMLCollection의 목록이 실시간으로 변경되기 때문이다.

<body>
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li id="active">JavaScript</li>
    </ul>
    <script>
      //console.group("그룹명")과 console.groupEnd() 사이의 코드를 그룹핑해서 보여준다.
      //시각적으로 로그들을 그룹핑
      console.group("before");
      //HTMLCollection 이라는 객체를 담은 lis
      let lis = document.getElementsByTagName("li");
      for (let i = 0; i < lis.length; i++) {
        console.log(lis[i]);
      }
      console.groupEnd();
      //새로운 그룹핑(after라는 그룹)을 했다
      console.group("after");

      //li[1] 즉, CSS라는 내용을 담은 li태그 하나를 삭제
      lis[1].parentNode.removeChild(lis[1]);

      for (let i = 0; i < lis.length; i++) {
        console.log(lis[i]);
      }
      console.groupEnd();
    </script>
  </body>
  • console.group("그룹명"); JS 코드 console.groupEnd(); - 두 개의 메소드를 이용하면 메소드 사이의 로그들을 그룹핑하여 보여줍니다. 
  • console.group("그룹명");  JS 코드  console.groupEnd(); 콘솔창 결과물

'Frontend > JavaScript' 카테고리의 다른 글

[생활코딩][웹브라우저JS]- Element객체, 관련 API  (0) 2022.02.03
[생활코딩]-JS Execute context & closure  (0) 2022.02.02
[생활코딩][웹브라우저JS]- 창 제어(window객체)  (0) 2022.01.27
[생활코딩][웹브라우저JS]- Navigator 객체  (0) 2022.01.27
[생활코딩][웹브라우저JS]- Location 객체  (0) 2022.01.26
댓글