HTML Element

document.getElement* 메소드를 통해 얻은 객체

constructor.name

DOM을 가져와서 constructor.name 프로퍼티를 조회하면 객체가 단수인지 복수인지 알수있음
HTMLElement : 단수
HTMLCollection: 복수(유사배열)

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
</head>
<body>
  <ul>
    <li id="banana">banana</li>
    <li>apple</li>
    <li>orange</li>
  </ul>
  <script>
    // HTMLLIElement 객체 반환(단수)
    var item = document.getElementById('banana');
    document.write('document.getElementById("banana"); : ' + item.constructor.name + '<br />');
    
    // HTMLCollection 객체 반환(복수, 유사배열)
    var items = document.getElementsByTagName('li');
    document.write('document.getElementsByTagName("li"); : ' + items.constructor.name)
  </script>
</body>
</html>

HTMLElement

각 태그들은 HTMLElement 객를 상속받는 인터페이스로 공통적으로 HTMLElement 객체의 속성을 사용할 수 있고, 각 태그별로 사용가능한 속성이 다르기 때문에 프로퍼티도 다름(HTMLLIElement, HTMLAnchorElement, HTMLInputElement 등)
HTMLElement는 Element의 자식이고, Element는 Node의 자식이다. Node는 Object의 자식이다. 이러한 계를 DOM Tree 라고 함

PreviousjQuery로 제어대상 찾기 NextHTMLCollection

Last updated 3 years ago

Was this helpful?

HTML Element

document.getElement* 메소드를 통해 얻은 객체

constructor.name

DOM을 가져와서 constructor.name 프로퍼티를 조회하면 객체가 단수인지 복수인지 알수있음
HTMLElement : 단수
HTMLCollection: 복수(유사배열)

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
</head>
<body>
  <ul>
    <li id="banana">banana</li>
    <li>apple</li>
    <li>orange</li>
  </ul>
  <script>
    // HTMLLIElement 객체 반환(단수)
    var item = document.getElementById('banana');
    document.write('document.getElementById("banana"); : ' + item.constructor.name + '<br />');
    
    // HTMLCollection 객체 반환(복수, 유사배열)
    var items = document.getElementsByTagName('li');
    document.write('document.getElementsByTagName("li"); : ' + items.constructor.name)
  </script>
</body>
</html>

HTMLElement

각 태그들은 HTMLElement 객를 상속받는 인터페이스로 공통적으로 HTMLElement 객체의 속성을 사용할 수 있고, 각 태그별로 사용가능한 속성이 다르기 때문에 프로퍼티도 다름(HTMLLIElement, HTMLAnchorElement, HTMLInputElement 등)
HTMLElement는 Element의 자식이고, Element는 Node의 자식이다. Node는 Object의 자식이다. 이러한 계를 DOM Tree 라고 함

PreviousjQuery로 제어대상 찾기 NextHTMLCollection

Last updated 3 years ago

Was this helpful?