> For the complete documentation index, see [llms.txt](https://phg0644.gitbook.io/javascript-and-browser/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://phg0644.gitbook.io/javascript-and-browser/dom-document-object-model/element-api.md).

# Element 식별자 API

## Element.tagName

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

```markup
<!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>
```

{% embed url="<https://codepen.io/hyeongkyupark/pen/VwpGrEG?editors=1111>" %}

## Element.id

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

```markup
<!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>
```

{% embed url="<https://codepen.io/hyeongkyupark/pen/dyvqJWL?editors=1111>" %}

## Element.className

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

```markup
<!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>
```

{% embed url="<https://codepen.io/hyeongkyupark/pen/zYZJpEL?editors=1111>" %}

## Element.classList

* Element.className을 이용해 class를 다루는 것을 훤씬 편리하게 해주는 API
* DOMTokenList(유사배열)을 반환(index로 값 접근 가능, length 사용 가능)
* add('추가할 클래스명') : 클래스 추가
* remove('제거할 클래스명') : 클래스 제거
* toggle('클래스명') : 추가와 제거를 현재 상태에 따라 변경

```markup
<!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>
```

{% embed url="<https://codepen.io/hyeongkyupark/pen/BaWOJGp?editors=1111>" %}
