DOM : HTML Tag & Element (태그와 엘리먼트 차이)

Ryan·2020년 10월 17일
0

DOM

목록 보기
2/3
post-thumbnail

HTMLElement 인터페이스는 모든 종류의 HTML 요소를 나타낸다.
일부 요소는 이 인터페이스를 직접 구현하지만 나머지 요소는 HTMLElement를 상속한 자식 인터페이스를 구현한다.

  • element : HTML에서 시작 태그와 종료태그로 이루어진 전체 명령어를 의미한다.
  • tag : element의 일부로 시작태그와 종료 태그 두종류로 구분된다.

1. HTML Element

<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>
  • li의 콘솔값은 HTMLLIElement
  • lis의 콘솔값은 HTMLCollection

2. HTML Element : Type

: HTML element 들은 약간씩 다른 이름을 가지고 있다.

<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>
  • list : HTMLLIElement
  • anchor : HTMLAnchorElement
  • button : HTMLInputElement
  • 각각의 엘리먼트는 이름에서 느껴지듯 약간씩 차이가 있다. 태그에 추가할 수 있는 속성들이 다르듯
  • 모두 HTMLElement의 자식 객체이다. 따라서 상속을 받는다.

3. HTML Collection

: 받아온 HTML 엘리먼트가 복수인 경우 사용하게 되는 객체이다.

profile
"꾸준한 삽질과 우연한 성공"

0개의 댓글