Element 식별자 API

엘리먼트를 제어하기 위한 식별자 API

Element.tagName

  • 해당 엘리먼트의 태그 이름을 알아냄 (변경은 불가능)

<!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>banana</li>
    <li id="active">apple</li>
    <li>orange</li>
  </ul>
  
  <script>
    var apple = document.getElementById('active');
    // id가 active인 요소의 태그명을 출력
    console.log(apple.tagName); // 'LI'
  </script>
</body>
</html>

Element.id

  • id값을 읽고 변경할 수 있음(문서에서 id는 단 하나만 등장 가능)

Element.className

  • class명을 조회하거나 변경하는데 사

Element.classList

  • Element.className을 이용해 class를 다루는 것을 훤씬 편리하게 해주는 API

  • DOMTokenList(유사배열)을 반환(index로 값 접근 가능, length 사용 가능)

  • add('추가할 클래스명') : 클래스 추가

  • remove('제거할 클래스명') : 클래스 제거

  • toggle('클래스명') : 추가와 제거를 현재 상태에 따라 변경

PreviousElement 객체NextElement 조회 API

Last updated

Was this helpful?