[책] 자바스크립트 코드 레시피 278 - 119일차

셀렉터 사용하기

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

구문

document.querySelector('셀렉터명');

실습

셀렉터 요소를 가져옵니다.

index.html

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

---

script.js

const element = document.querySelector('.foo');
console.log(element);
const itemNthChild = document.querySelector('.list .item:nth-child(2)');
console.log(itemNthChild);

셀렉터 조건 만족하는 요소 읽어오기

• 셀렉터명과 일치하는 요소를 정리하여 작업을 처리하고 싶을 때

구문

document.querySelectorAll('셀렉터명');

실습

셀렉터명 일치 요소 모두 가져옵니다. 셀렉터명과 일치하는 HTML 요소를 모두 가져오며, 반환값은 요소를 하나의 배열로 정리한 객체입니다. 배열 요소의 값은 forEach() 를 사용해 접근할 수 있습니다. 콜백 함수를 사용한 요소의 처리도 가능합니다.

index.html

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

---

script.js

const elements = document.querySelectorAll('.item');
console.log(elements); // .item 요소 배열로 다 가져옵니다.
elements.forEach((i) => {
    console.log(i); // 각 요소 반환합니다.
});

id의 각 요소 값 읽어 오기

• id 데이터와 일치하는 요소를 가져오고 싶을 때

구문

document.getElementById(ID명);

실습

index.html

<div id="id_foo">id 요소 가져오기</div>

---

script.js

const idFoo = document.getElementById('id_foo');
console.log(idFoo);

클래스명으로 요소 읽어 오기

• 클래스명과 일치하는 요소를 모두 가져오고 싶을 때

구문

document.getElementsByClassName(클래스명);

실습

index.html

<ul class="class_list">
  <li class="class_item">class_li</li>
  <li class="class_item">class_li</li>
  <li class="class_item">class_li</li>
</ul>

---

script.js

const classItems = document.getElementsByClassName('class_item');
for (let i = 0; i < classItems.length; i++) {
    console.log(classItems[i]); // 각 요소 반환됩니다.
}