[JS] 셀렉터 종류 - getElementById, getElementsByClassName, querySelector

1.  id로 html 요소를 찾아주는 경우, getElementById()

<div class="alert-box" id="alert">알림창입니다.</div>

<script>
	document.getElementById('alert').style.display = "none"
</script>

document.getElementById('alert')~

뜻 : getElementById로 alert라는 id를 가진 html요소를 가져와 주세요.

---

2. class 이름으로 html 요소를 찾아주는 경우, getElementsByClassName()[]

<div class="alert-box" id="alert">알림창</div>
<script>

	document.getElementsByClassName('alert-box')[0].style.display = "none"

<script>

document.getElementByClassName('alert-box')[0].~

 뜻 : 'alert-box'라는 className을 가진 html요소를 가져와주세요

 

Q. 왜 뒤에 인덱싱이 붙을까?

A. className과 일치하는 모든 요소들을 찾아주기 때문에

예를들어 

<div class="alert-box" id="alert">알림창</div>
<div class="alert-box" id="alert1">알림창</div>
<div class="alert-box" id="alert2">알림창</div>

<script>

	document.getElementsByClassName('alert-box')[0].style.display = "none"

<script>

이런식으로 'alert-box'라는 className을 가지고 있는 html요소가 많을 경우에

위에서 부터 인덱싱하도록 한다.

ex) id = "alert"를 가진 알림창이 [0]

id = "alert1"을 가진 알림창이 [1]

id = "alert2"을 가진 알림창이 [2]

이런식으로 되기 때문에 끝에 꼭 [인덱싱 번호]를 적어주어야 한다.

---

3. 1번과 2번을 다른 방식으로 방법, querySelector()

-> 이것을 쓰면 css잘하는 분들은 편하게 사용 가능하다.

<div class="test1">안녕하세요</div>
<div class="test2" id="2">안녕하세요</div>

<script>
	document.getElementsByClassName('test1')[0].innerHTML = '안녕';
    document.getElementById('2').innerHTML = '녕안';
</script>

 

이렇게 긴 내용을

<div class="test1">안녕하세요</div>
<div class="test2" id="2">안녕하세요</div>

<script>
	document.querySelector('.test1').innerHTML = '안녕';
    document.querySelector('#2').innerHTML = '녕안';
</script>

이런식으로 querySelector를 통해서 찾을 수 있다. 

이때 #은 id

.은 class를 나타낸다.

 

Q. 만약 className이 중복된 경우

<div class="test1">안녕하세요</div>
<div class="test1">안녕하세요</div>

<script>
	document.querySelectorAll('.test1')[0].innerHTML = '안녕';
</script>

querySelectorAll로 className이 동일한 요소들을 다 찾아 [](리스트)에 넣고, 인덱싱으로 원하는 요소를 찾아준다.

참고로 querySelector는 제일 위에 있는 요소 1개만 찾아준다.