[JavaScript] 자바스크립트 셀렉터 사용하기

129_자바스크립트 셀렉터 사용하기

[적용]

• 셀렉터를 사용해 지정 요소를 가져오고 싶을 때

---

[문법]

메소드	의미	반환
document.querySelector(셀렉터명)	셀렉터명 일치 요소 가져오기	요소(Element)

---

[내용]

HTML 요소를 다루기 위해서는 우선 대상 HTML 요소를 읽어 와야 한다.

자바스크립트는 셀렉터명, ID명, 클래스명 등의 지정을 통해 HTML 요소를 읽어 올 수 있다.

 

document.querySelector()는 인수의 셀렉터명과 일치하는 하나의 요소를 가져오는 메소드다.셀렉터는 요소 지정을 위한 조건식으로 CSS의 #ID명, .클래스면, :nth-child(번호) 등과 같다.일치하는 요소가 하나 이상이라면 첫 요소를 반환한다.

 

HTML                                                                                                                                                              index.html

<div id="foo"></div>
<ul class="list">
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
</ul>

JavaScript                                                                                                                                                          main.js

// foo 요소
document.querySelector('#foo');
// .list 요소 내 두 번째 .item 요소
document.querySelector('.list' .item:nth-child(2)');

 

---

[예시]

#log 요소를 가져와서 데이터를 변경하는 샘플을 확인해 보자.

 

HTML                                                                                                                                                              index.html

<div id="log"></div>

JavaScript                                                                                                                                                          main.js

const logElement = document.querySelector('#log');
logElement.innerHTML = '안녕하세요.';

---

[Appendix]

셀렉터명과 일치하는 요소가 하나 이상인 경우

document.querySelector('#log')에서 요소를 가져올 때

셀렉터명과 일치하는 요소가 하나 이상일 경우 첫 번째 요소를 반환한다. 

다음 코드는 첫 번째 .box 텍스트를 출력한다.

 

HTML                                                                                                                                                              index.html

...생략...
<div class="box">첫 번째 박스</div>
<div class="box">두 번째 박스</div>
<div class="box">세 번째 박스</div>

JavaScript                                                                                                                                                          main.js

// .box 요소 가져오기
const box = document.querySelector('.box');

// 텍스트 내 요소 출력
console.log(box.innerHTML);  // 결과: 첫 번째 박스

 

---

 

 

 

 

 

 

참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김