[자바스크립트] 선택자

소요 시간: 10분 조회수: 124

자바스크립트에서 HTML 요소를 선택하는 방법에는 여러 가지가 있습니다. 아래는 자주 사용되는 메서드들을 정리한 것입니다.


요소 선택

HTML 문서는 트리 구조로 되어 있으며, 이를 DOM(Document Object Model)이라고 합니다. DOM은 HTML 문서를 계층적 구조로 나타내어 자바스크립트를 통해 접근하고 조작할 수 있게 합니다. 각 HTML 태그는 DOM의 노드로 표현되며, 이러한 노드에 접근하고 조작하기 위해 자바스크립트에서는 다양한 요소 선택 방법을 제공합니다.

요소 선택 후 수행할 수 있는 작업 예

이러한 작업들은 웹 애플리케이션을 동적으로 만들고 사용자 경험을 향상시키는 데 필수적입니다. 적절한 선택자와 메서드를 사용하여 효율적인 코드를 작성할 수 있습니다.


선택자 종류

선택자는 크게 기본 선택자, 조합 선택자, 속성 선택자, 계층 선택자, 필터 선택자로 나눌 수 있습니다. 각각의 선택자에 대해 자세히 설명하겠습니다.

기본 선택자

기본 선택자는 가장 간단하고 자주 사용되는 선택자입니다.

ID 선택자

특정 ID를 가진 요소를 선택합니다. HTML 문서 내에서 유일한 ID를 가져오는 데 사용됩니다.

<!-- HTML -->
<div id="myId">Hello, World!</div>
// JavaScript
let element = document.getElementById('myId');
console.log(element.textContent); // "Hello, World!"

클래스 선택자

특정 클래스를 가진 모든 요소를 선택합니다. 반환되는 결과는 HTMLCollection으로, 배열처럼 인덱스로 접근할 수 있지만 배열 메서드는 사용할 수 없습니다.

<!-- HTML -->
<div class="myClass">First</div>
<div class="myClass">Second</div>
<div class="myClass">Third</div>
let elements = document.getElementsByClassName('myClass');

태그 선택자

특정 태그 이름을 가진 모든 요소를 선택합니다. getElementsByTagName 메서드는 특정 태그 이름을 가진 모든 요소를 선택합니다. 반환되는 결과는 HTMLCollection입니다.

<!-- HTML -->
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
// JavaScript
let elements = document.getElementsByTagName('p');
console.log(elements[1].textContent); // "Paragraph 2"
console.log(elements.length); // 3

CSS 선택자

querySelector와 querySelectorAll을 사용하여 CSS 선택자로 요소를 선택합니다.

querySelector 메서드는 CSS 선택자를 사용하여 일치하는 첫 번째 요소를 선택합니다. 이 메서드는 매우 유연하며, 다양한 CSS 선택자를 사용할 수 있습니다.

<!-- HTML -->
<div class="container">
  <p class="text">Paragraph</p>
</div>
// JavaScript
let element = document.querySelector('.container .text');
console.log(element.textContent); // "Paragraph"

querySelectorAll 메서드는 CSS 선택자를 사용하여 일치하는 모든 요소를 선택합니다. 반환되는 결과는 NodeList로, 배열처럼 인덱스로 접근할 수 있으며 배열 메서드도 사용할 수 있습니다.

<!-- HTML -->
<ul>
  <li class="item">Item 1</li>
  <li class="item">Item 2</li>
  <li class="item">Item 3</li>
</ul>
// JavaScript
let elements = document.querySelectorAll('ul .item');
elements.forEach(element => console.log(element.textContent));
// "Item 1"
// "Item 2"
// "Item 3"

이름 선택자

getElementsByName 메서드는 특정 이름을 가진 모든 요소를 선택합니다. 주로 폼 요소에서 사용되며, 반환되는 결과는 NodeList입니다.

<!-- HTML -->
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female
// JavaScript
let elements = document.getElementsByName('gender');
elements.forEach(element => console.log(element.value));
// "male"
// "female"

조합 선택자

조합 선택자는 여러 기본 선택자를 결합하여 더 구체적인 선택을 할 수 있습니다. 아래는 조합 선택자의 HTML 코드와 자바스크립트 사용 예시입니다.

다중 클래스 선택자

여러 클래스를 동시에 가진 요소를 선택합니다.

<!-- HTML -->
<div class="class1 class2">Content</div>
<div class="class1">Another Content</div>
// JavaScript
let element = document.querySelector('.class1.class2');
console.log(element.textContent); // "Content"

클래스와 태그 조합

특정 태그와 클래스를 동시에 가진 요소를 선택합니다. 반환되는 결과는 첫 번째 일치하는 단일 요소입니다.

<!-- HTML -->
<p class="class1">First Paragraph</p>
<p class="class2">Second Paragraph</p>
<p class="class1">Third Paragraph</p>
// JavaScript
let element = document.querySelector('p.class1');
console.log(element.textContent); // "First Paragraph"

그룹 선택자

querySelectorAll 메서드는 쉼표(,)로 구분하여 여러 선택자를 동시에 선택합니다. 반환되는 결과는 NodeList로, 일치하는 모든 요소를 포함합니다.

<!-- HTML -->
<div class="class1">Div with class1</div>
<p class="class2">Paragraph with class2</p>
<span id="myId">Span with id</span>
// JavaScript
let elements = document.querySelectorAll('.class1, .class2, #myId');
elements.forEach(element => console.log(element.textContent));
// "Div with class1"
// "Paragraph with class2"
// "Span with id"

속성 선택자

속성 선택자는 특정 속성을 가진 요소를 선택합니다.

특정 속성 선택

querySelector 메서드는 특정 속성을 가진 요소를 선택합니다. 

<!-- HTML -->
<input type="text" name="username" value="John">
<input type="password" name="password">
// JavaScript
let element = document.querySelector('[type="text"]');
console.log(element.name); // "username"

특정 값을 가진 속성 선택

특정 값을 가진 속성을 선택합니다. querySelectorAll 메서드는 특정 값을 가진 속성을 선택합니다. 반환되는 결과는 NodeList로, 일치하는 모든 요소를 포함합니다.

<!-- HTML -->
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female
// JavaScript
let elements = document.querySelectorAll('[name="gender"]');
elements.forEach(element => console.log(element.value));
// "male"
// "female"

속성 값이 있는 요소 선택

특정 속성이 존재하는 요소를 선택할 수 있습니다. 이런 경우에도 이전과 같은 메서드를 사용합니다. querySelectorAll 메서드는 특정 속성이 존재하는 요소를 선택합니다. 반환되는 결과는 NodeList로, 일치하는 모든 요소를 포함합니다.

<!-- HTML -->
<div data-info="123">Info 123</div>
<div data-info="456">Info 456</div>
// JavaScript
let elements = document.querySelectorAll('[data-info]');
elements.forEach(element => console.log(element.textContent));
// "Info 123"
// "Info 456"

계층 선택자

계층 선택자는 요소 간의 계층 구조를 기반으로 선택합니다.

자식 선택자

특정 요소의 자식을 선택합니다.

<!-- HTML -->
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>
// JavaScript
let elements = document.querySelectorAll('ul > li');
elements.forEach(element => console.log(element.textContent));
// "Item 1"
// "Item 2"
// "Item 3"

후손 선택자

특정 요소의 모든 후손을 선택합니다.

<!-- HTML -->
<div>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</div>
// JavaScript
let elements = document.querySelectorAll('div p');
elements.forEach(element => console.log(element.textContent));
// "Paragraph 1"
// "Paragraph 2"

형제 선택자

특정 요소의 형제 요소를 선택합니다. querySelector 및 querySelectorAll 메서드는 특정 요소의 형제 요소를 선택합니다. querySelector는 첫 번째 일치하는 형제 요소를, querySelectorAll은 모든 형제 요소를 선택하며, 반환 결과는 각각 단일 요소와 NodeList입니다.

<!-- HTML -->
<div>Div Element</div>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
// JavaScript
let nextSibling = document.querySelector('div + p');
console.log(nextSibling.textContent); // "Paragraph 1"

let allSiblings = document.querySelectorAll('div ~ p');
allSiblings.forEach(element => console.log(element.textContent));
// "Paragraph 1"
// "Paragraph 2"

필터 선택자

필터 선택자는 특정 조건을 만족하는 요소를 선택합니다.

첫 번째 요소 선택

첫 번째 요소를 선택합니다.

<!-- HTML -->
<ul>
  <li>First Item</li>
  <li>Second Item</li>
  <li>Third Item</li>
</ul>
// JavaScript
let firstElement = document.querySelector('li:first-child');
console.log(firstElement.textContent); // "First Item"

마지막 요소 선택

마지막 요소를 선택합니다. 반환되는 결과는 마지막 일치하는 단일 요소입니다.

<!-- HTML -->
<ul>
  <li>First Item</li>
  <li>Second Item</li>
  <li>Third Item</li>
</ul>
// JavaScript
let lastElement = document.querySelector('li:last-child');
console.log(lastElement.textContent); // "Third Item"

nth-child 선택

특정 순서의 요소를 선택합니다.

<!-- HTML -->
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>
// JavaScript
let secondElement = document.querySelector('li:nth-child(2)');
console.log(secondElement.textContent); // "Item 2"

속성 값이 부분적으로 일치하는 요소 선택

특정 속성 값이 부분적으로 일치하는 요소를 선택합니다.

<!-- HTML -->
<input type="text" name="part1" value="Value 1">
<input type="text" name="part2" value="Value 2">
<input type="text" name="other" value="Value 3">
let elements = document.querySelectorAll('[name*="part"]');


요약

자바스크립트에서 HTML 요소를 선택하는 다양한 선택자들은 기본 선택자, 조합 선택자, 속성 선택자, 계층 선택자, 필터 선택자로 분류할 수 있습니다. 이 선택자들은 각각의 용도에 맞게 사용되어 HTML 문서 내에서 특정 요소를 선택하고 조작하는 데 유용합니다. 다양한 선택자를 조합하여 보다 복잡하고 구체적인 요소 선택을 할 수 있습니다.

인기글

자바스크립트 리스트