getElementByClassName
<body>
<ul class='list-group' id='list'>
<li class='list-group-item'>list1</li>
<li class='list-group-item'>list2</li>
<li class='list-group-item'>list3</li>
</ul>
<script>
document.getElementById('list').addEventListener('click', function(){
document.getElementsByClassName('list-group')
[0].classList.toggle('show')
})
</script>
</body>- id를 이용해 찾는 경우와는 다르게, classname을 이용해 찾는 getElementsByClassName Selector는 같은 classname을 갖는 개체가 다중이기 때문에 변경하고자 하는 개체 대상을 인덱스로 표기해주어야 한다 > getElementsByClassName('list-group')[0]
- (참고) 해당 classname을 갖는 개체가 하나여도 인덱스를 붙여주어야 한다
- (참고) class를 추가할 때는 classList.add or classList.toggle을 사용할 수 있다
querySelector
<body>
<ul class='list-group' id='list'>
<li class='list-group-item'>list1</li>
<li class='list-group-item'>list2</li>
<li class='list-group-item'>list3</li>
</ul>
<script>
document.querySelector('#list').addEventListener('click', function(){
document.querySelector('.list-group').classList.toggle('show')
})
</script>
</body>- querySelector는 css 문법을 그대로 사용하여 선택을 할 수 있다(ex. id > #list, class > .list-group)
- querySelector는 중복되는 개체 중 최상위 하나 개체만 찾아준다
- 다중 요소 중 하나를 특정하기 위해서는 querySelectorAll('.list-group-item')[1] 와 같이 querySelectorAll 문법에 마찬가지로 인덱스를 붙여 사용할 수 있다
eunji yang