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는 단 하나만 등장 가능)

<!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 출력
    console.log(apple.id); // 'active'
    // 요소의 id 변경
    apple.id = 'deactive';
    console.log(apple.id); // 'deactive'
  </script>
</body>
</html>

Element.className

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

<!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" class="test">apple</li>
    <li>orange</li>
  </ul>
  
  <script>
    var apple = document.getElementById('active');
    // 요소의 class명 출력
    console.log(apple.className); // 'test'
    
    // 요소의 class명 변경 기존 class명은 사라짐
    apple.className = 'test2 test3';
    
    console.log(apple.className); 
    
    // 추가를 하기위해서는 원래 className에 추가할 문자열을 더해줘야함
    apple.className += ' test';
    
    console.log(apple.className); 
  </script>
</body>
</html>

Element.classList

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

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

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

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

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

<!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" class="test">apple</li>
    <li>orange</li>
  </ul>
  
  <script>
    var apple = document.getElementById('active');
    // 유사배열 DOMTokenList 출력
    console.log(apple.classList);

    // index로 접근가능
    console.log(apple.classList[0]);
    
    // test2 클래스 추가
    apple.classList.add('test2');
    console.log(apple.classList);
    // test 클래스 제거
    apple.classList.remove('test');
    console.log(apple.classList);
    
  </script>
</body>
</html>

PreviousElement 객체NextElement 조회 API

Last updated

Was this helpful?