Select Elements(요소 선택하기)

2. Select Elements

요소 선택하기

화면 속 요소를 선택하는 4가지 방법을 알아보겠다.

1. "ID" 를 이용하여 선택

// x-button 아이디를 가진 요소를 선택한다.(유일한 값)
const $el  = document.getElementById("x-button");
$el.textContext = "This is X button";

아이디는 HTML문서에서 고유한 값이다.
document.getElementById함수를 이용하여 요소를 선택하면 주어지는 값은 단 하나의 요소이다.

2. "class"를 이용하여 선택

// '$listItems'변수는 item 클래스를 가진 "모든 요소"를 선택한다.
const $listItems  = document.getElementByClassName("item");
// getElementByClassName의 결과 값은 배열과 유사한 형태이므로 인덱스로 접근
$listItems[0].textContent = "item 1";
$listItems[1].textContent = "item 2";
$listItems[2].textContent = "item 3";
// getElementByClassName의 결과 값이 하나 뿐이라도 배열과 유사한 형태

getElementByClassName함수의 결과 값은 배열과 유사한 형태이므로 인덱스로 접근해 사용한다.

3. "tag name"을 이용하여 선택

// '$listItems'변수는 <a>태그를 이용한 "모든 요소"를 선택한다.
const $listItems  = document.getElementByTagName("a");
// getElementByTageName의 결과 값은 배열과 유사한 형태이므로 인덱스롤 접근
$listItems[0].textContent = "Home";
$listItems[1].textContent = "Menu";
$listItems[2].textContent = "Settings";
// getElementByTagName의 결과 값이 하나 뿐이라도 배열과 유사한 형태

getElementByTagName함수의 결과 값은 배열과 유사한 형태이므로 인덱스로 접근해 사용한다. getElementByClassName의 결과값가 동일한형태(HTML Element가 담긴 유사 배열)이다.

4. "CSS Selector"를 이용하여 선택

const $id  = document.querySelector("#id");
const $class  = document.querySelector(".class");
// 주어진 CSS 선택자와 일치하는 요소가 여러개일 경우 가장 첫번째 요소를 반환
const $item  = document.querySelector(".item");
// querySelectorAll은 주어진 CSS 선택자와 일치하는 "모든 요소들"을 유사배열의 형태로 반환
const $listItems  = document.querySelectorAll(".item");
$listItems[0].textContent = "item 1";
$listItems[1].textContent = "item 2";
$listItems[2].textContent = "item 3";