classList
class명을 원하는 요소에 추가
셀렉터로찾은요소.classList.add(’클래스명’)
class명을 원하는 요소에서 제거
셀렉터로찾은요소.classList.remove(’클래스명’)
.classList.toggle()
클래스명이 있으면 제거하고
없으면 붙여준다.
querySelector
<div class="test1">안녕하세요</div>
<div id="test2">안녕하세요</div>
<script>
document.querySelector('.test1').innerHTML = '안녕';
document.querySelector('#test2').innerHTML = '안녕';
</script>querySelector() 안에는 css 셀렉터 문법을 사용가능합니다.
‘.’ 은 class, ‘#’은 id
다만 맨 위의 한개 요소만 선택 해줍니다.
querySelectorAll
<div class="test1">안녕하세요</div>
<div class="test1">안녕하세요</div>
<script>
document.querySelectorAll('.test1')[1].innerHTML = '안녕';
</script>test1 이라는 클래스가 중복으로 여러개 있는데 X번째 요소를 선택하고 싶은 경우 querySelectorAll() 을 쓰면 됩니다.
해당하는 걸 다 찾아서 배열에 담아 반환해주기 때문에 [숫자]를 뒤에 붙여서 원하는 위치에 있는 요소를 사용하면 됩니다.
