[JavaScript] 선택자

Javascript에서 DOM의 특정 요소(element)를 찾는 방법은 크게 아래와 같다.

1. 아이디 이름을 이용하여 선택하는 방법
2. 클래스 이름을 이용하여 선택하는 방법
3. 태그 이름을 이용하여 선택하는 방법
4. CSS 선택자를 이용하여 선택하는 방법

#. 선택자 별 선택 방법

선택자	구분
getElementById	아이디 이름으로 선택
getElementsByClassName	클래스 이름으로 선택
getElementsByTagName	태그 이름으로 선택
*	전체 선택자	(*CSS 선택자)
#	id 선택자
.	class 선택자

예시 코드로 알아보기 

- HTML 코드

<div class="container">
  <h1>제목</h1>
  <p>오늘의 날씨는 무엇일까요</p>
  <ul>
    <li class="item">
      <p>rainy</p>
    </li>
    <li class="item">
      <p>sunny</p>
    </li>
    <li class="item">
      <p>cloudy</p>
    </li>
  </ul>
  <button id="weather-button">The weather is changeable</button>
</div>

1. 아이디 이름을 이용하여 선택하는 방법

아이디란 특성상 같은 ID 명을 사용하지 않고 하나의 HTML 문서에서 고유한 값을 가지기 때문에 복수인 getElements가 아닌 단수인 getElement가 사용된다. 따라서 doucument.getElementById를 사용해서 요소를 선택해도 주어지는 값은 단 하나의 요소이다. 

const getId = document.getElementById("weather-button");

getId.textContent = "I hope the weather is clear";

기존 화면 -> 결과 화면

.getElementById() 함수를 사용해서 기존 button에 담겨있던 문구인 'The weather is changeable'을 'I hope the weather is clear'으로 변경했다.

2. 클래스 이름을 이용하여 선택하는 방법

.getElementsByClassName() 함수를 사용해서 변수에 할당하면 배열과 유사한 형태(유사 배열)을 띈다. 함수의 이름에도 getElement's'로 복수 형태인데, 이 이유는 유사 배열의 형태를 반환하기 때문이다. 유사 배열에 담긴 요소들은 HTML Element이므로 선택할 때는 배열의 인덱스를 위치를 이용하여 선택한다.

// item 클래스를 가진 "모든 요소들"을 선택하여 `$listItems` 변수에 대입
const $listItems = document.getElementsByClassName("item");

// container 클래스를 가진 "모든 요소들"을 선택하여 `$container` 변수에 대입
const $container = document.getElementsByClassName("container");

// getElementsByClassName의 결과값은 배열과 유사한 형태이므로 인덱스로 접근하여 사용한다.
$listItems[0].textContent = "List 1";
$listItems[1].textContent = "List 2";
$listItems[2].textContent = "List 3";

// HTML 상에서 해당 클래스를 가진 요소가 단 하나 뿐이더라도,
// getElementsByClassName의 결과값은 배열과 유사한 형태이므로 인덱스로 접근하여 사용한다.
$container[0].style.backgroundColor= "green";

기존 화면 -> 결과 화면

.getElementsByClassName() 함수를 사용해서 기존 class명 item에 담겨있던 문구들이 수정되었고, container 의 배경색을 수정했다. 

3. 태그 이름을 이용하여 선택하는 방법

.getElementsByTagName() 함수를 사용하면 클래스 이름을 이용해서 선택한 것과 같이 배열과 유사한 형태(유사 배열)을 띈다. 함수의 이름에도 getElement's'로 복수 형태인데, 이 이유는 유사 배열의 형태를 반환하기 때문이다. 유사 배열에 담긴 요소들은 HTML Element이므로 선택할 때는 배열의 인덱스를 위치를 이용하여 선택한다.

// li 태그를 이용한 "모든 요소들"을 선택하여 `$listItems` 변수에 대입
const $listItems = document.getElementsByTagName("li");

// p 태그를 이용한 "모든 요소들"을 선택하여 `$paragraphs` 변수에 대입
const $paragraphs = document.getElementsByTagName("p");

// getElementsByTagName의 결과값은 배열과 유사한 형태이므로 인덱스로 접근하여 사용한다.
$listItems[0].textContent = "List 1";
$listItems[1].textContent = "List 2";
$listItems[2].textContent = "List 3";

// 위치와 상관없이 모든 p 태그를 선택하게 되므로 $paragraphs에는 총 4개의 요소가 선택되고,
// 그 중 첫번째 요소의 배경 색깔을 수정합니다.
$paragraphs[0].style.backgroundColor = "green";

TagName을 이용해서 선택하면 유사 배열의 형태를 띄기 때문에 배열의 인덱스 위치를 이용해서 배열을 지정한다.

기존 화면 -> 결과 화면

4. querySelector() - CSS 선택자를 이용하여 선택하는 방법

• querySelector은 css 선택자를 이용해 html 문서 내 첫번째 타겟 요소를 반환한다. 동일한 선택자 형태를 갖고 있는 객체가 있더라도 html 문서 내 첫번째를 나타내는 요소 하나만 반환한다.
• DOM에 일치하는 항목이 없으면 null을 반환한다. 
• 매개변수로 유효한 CSS 선택자를 지정하지 않으면 SyntaxError 예외를 발생시킨다.

4-1. querySelector() - ID로 선택하기

const $button = document.querySelector('#weather-button');

$button.textContent = "I hope the weatehr is clear!";

Id를 선택하는 CSS 선택자인 '#'을 붙여 파라미터로 넘겨준다. 위 예제는 Id가 "weatehr-button"인 element를 찾아서 반환한다.

기존 화면 -> 결과 화면

4-2. querySelector() - class 이름으로 선택하기

const $button = document.querySelector('.item');

$button.textContent = "Hello, world!";

class를 선택하는 CSS 선택자인 '.'을 붙여 파라미터로 넘겨준다. 위 예제는 class가 "item"인 element들 중 첫 번째 요소만 찾아서 반환한다.

기존 화면 -> 결과 화면

4-3. querySelector() - Tag 이름으로 선택하기

const $button = document.querySelector('p');

$button.textContent = "Hello, world!";

태그 이름으로 element를 선택할 때는 태그명을 문자열로 작성한다. 위 예제는 p태그 element들 중 첫 번째 요소를 찾아서 반환한다.

기존 화면 -> 결과 화면

4-4. querySelector() - ','로 구분하여 선택하기

const $button = document.querySelector('.item1, .itme2, item3');

$button.textContent = "Hello, world!";

querySelector()에서 선택자를 ','를 구분해서 전달하면 여러개의 선택자 중  첫 번째로 발견되는 요소를 반환한다. 이때 콤마로 구분해서 여러개의 class들을 전달하더라도 여러개를 넘긴게 아니라 첫 번째로 전달된 파라미터만 전달된다.

기존 화면 -> 결과 화면

5. querySelectorAll() - CSS 선택자를 이용하여 선택하는 방법

• querySelectorAll은 querySelector과 사용법이 동일하지만 일치하는 요소가 다중이더라도 첫 번째 요소만을 검색하는 querySelector과 다르게 querySelectorAll은 일치하는 모든 요소들을 유사 배열의 형태로 반환한다.
• 선택자 사이에 (,)를 이용하면 여러 요소를 함께 가져올 수 있다. 배열 형태를 반환하기 때문에 요소를 조작할 때 for이나 forEach와 같은 반복문을 사용해주어야한다.
• DOM에 일치하는 항목이 없으면 빈 node list를 반환한다.

5-1. querySelectorAll() - for 문으로 값 변경하기

const $abc = document.querySelectorAll('.item');

for (i=0 ; i < $abc.length; i++){
    $abc[i].textContent = "Hello, World!";
  }

querySelectorAll()은 nodeList 형태로 값을 반환하기 때문에 반복문을 이용해서 값을 변경해줘야한다.

기존 화면 -> 결과 화면

5-2. querySelectorAll() - ','로 구분하여 선택하기

const $abc = document.querySelectorAll('.item, #weather-button, p, h1');

for (i=0 ; i < $abc.length; i++){
    $abc[i].textContent = "Hello, World!";
  }

querySelectorAll은 괄호안에 콤마로 구분하여 ("요소명, 요소명")을 사용하면 위 예시와 같이 서로 다른 종류와 이름의 요소들을 한꺼번에 가져올 수 있다.

기존 화면 -> 결과 화면

---

선택자 Practice

/*

  < Selecting Elements basic 1 >

  💬 를 적절한 값으로 고쳐주세요!

*/

const $p1 = document.getElementById("first-item");
const $p2 = document.getElementsByClassName("third-item");

const text1 = $p1.textContent;
const text2 = $p2[0].textContent;

const result = text1 + text2;

if (result === 💬) {
  alert("🎉");
}

A : 'FirstThird'

/*

  < Selecting Elements basic 2 >

  💬 를 적절한 값으로 고쳐주세요!

*/

const $li = document.getElementsByTagName("li");
const $p = document.getElementsByTagName("p");

const text1 = $li[2].textContent;
const text2 = $p[1].textContent;

const result = text1 + text2;

if (result === 💬) {
  alert("🎉");
}

A : 'List3Paragraph2'

/*

  < Selecting Elements basic 3 >

  💬 를 적절한 값으로 고쳐주세요!

*/

const $item = document.querySelectorAll(".item");
const $li = document.querySelectorAll("li");

const length1 = $item.length;
const length2 = $li.length;

const result = length1 + length2;

if (result === 💬) {
  alert("🎉");
}

A = 9