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