JavaScript에서 클래스 이름을 기반으로 요소 가져오기

  2. 어떻게
  3. JavaScript 하우투
  4. JavaScript에서 클래스 이름을 기반으로 요소 가져오기
Nithin Krishnan 2023년12월11일
JavaScript
  1. Javascript .getElementsByClassName() 함수를 사용하여 CSS 클래스 이름을 기반으로 요소 가져오기
  2. Javascript .querySelector() 함수를 사용하여 CSS 클래스 이름을 기반으로 요소 가져오기
  3. .querySelectorAll() 함수를 사용하여 CSS 클래스 이름을 기반으로 여러 HTML 요소 가져오기
JavaScript에서 클래스 이름을 기반으로 요소 가져오기

런타임에 스타일을 동적으로 변경하려면 DOM에서 요소를 쿼리해야 할 수도 있습니다. Javascript에는 우리의 목적을 달성할 수 있는 다양한 내장 기능이 있습니다. 그 중 유명한 것이 .getElementById()입니다. 그러나 .getElementById()는 HTML id가 함수에 전달된 매개변수와 일치하는 첫 번째 요소인 하나의 요소만 반환합니다. .getElementById() 함수 접근 방식은 여러 요소의 스타일을 동시에 변경하는 경우 번거로울 수 있습니다. HTML 요소에 여러 ID를 추가하고 한 번에 하나씩 쿼리하는 작업이 포함됩니다. 더 나은 방법으로 할 수 있습니까? 다음 섹션에서는 CSS 클래스 이름을 기반으로 DOM에서 요소를 가져오는 방법에 대해 자세히 설명합니다.

Javascript .getElementsByClassName() 함수를 사용하여 CSS 클래스 이름을 기반으로 요소 가져오기

Javascript에는 CSS 클래스 이름을 기반으로 하나 이상의 HTML 요소를 쿼리할 수 있는 내장 메서드 .getElementsByClassName()이 있습니다. Document 인터페이스에서 사용 가능한 메소드이며 일반적으로 document.getElementsByClassName()과 같이 인터페이스에서 사용됩니다. 함수는 함수 매개변수에 지정된 CSS 클래스 이름을 가진 모든 요소에 대해 문서(DOM)를 검색합니다.

MDN Docs에 따라 이 함수는 HTML 요소의 라이브 컬렉션을 반환합니다. 이는 DOM 요소를 직접 수정하는 코드 조각이 있는 경우 getElementsByClassName() 함수에서 반환된 요소가 런타임에 수정될 수 있음을 의미합니다.

getElementsByClassName 구문

let el = document.getElementsByClassName(cssClassName);

cssClassName은 원하는 CSS 클래스를 나타내는 문자열이어야 합니다. 여러 CSS 클래스가 있는 경우 공백으로 구분하여 언급할 수 있습니다(예: css-class1 css-class2 등).

getElementsByClassName 인수

이 함수는 하나의 매개변수인 CSS 클래스 이름을 사용합니다. 어떤 경우에는 요소를 선택하기 위해 CSS 클래스 이름의 조합이 필요할 수 있습니다. 이러한 시나리오에서는 공백으로 구분된 여러 CSS 클래스 이름을 전달할 수 있습니다.

예시

기능을 이해하기 위해 다음 코드를 참조하십시오.

<div class="bold">Element 1: Bolder text</div>
<div class="green">Green text</div>
<div class="bold">Element 2: Bolder text</div>

window.onload = function() {
  let els = document.getElementsByClassName('bold');
  console.log(els);
}

출력:

HTMLCollection(2) [div.bold, div.bold]

위의 코드는 콘솔에 HTML 요소 모음을 기록합니다. Google 크롬 콘솔은 위와 같이 출력을 표시합니다. window.onload 내부에 document.getElementsByClassName("bold") 코드를 작성하면 HTML이 렌더링된 후에만 코드가 실행됩니다. .getElementById() 함수와 달리 getElementsByClassName() 함수는 HTML 요소 배열을 반환합니다. .getElementById()에 대해 수행하는 것처럼 getElementsByClassName()에 의해 출력된 요소에 대해 직접 작업할 수 없습니다. 위 코드의 bold 스타일을 첫 번째 요소에 대해 normal로 변경하려면 다음 코드를 사용할 수 있습니다.

let els = document.getElementsByClassName('bold');
els[0].style.fontWeight = '100';

Javascript .querySelector() 함수를 사용하여 CSS 클래스 이름을 기반으로 요소 가져오기

getElementsByClassName()은 널리 사용되는 메서드이며 CSS 클래스 이름을 기반으로 HTML 요소를 선택하는 것으로 제한됩니다. Javascript에는 Document 인터페이스에서 사용할 수 있는 또 다른 내장 기능인 querySelector()가 있으며, 이는 본질적으로 더 일반적입니다. CSS 클래스 이름을 기반으로 요소를 쿼리하는 데 사용할 수 있습니다. 이 기능은 querySelector()의 실제 기능 중 일부일 뿐입니다. Javascript의 querySelector() 함수는 인수로 전달된 선택 매개변수를 충족하는 첫 번째 요소를 반환하므로 .getElementById()와 비슷합니다.

.querySelector() 구문

구문은 .getElementsByClassName()의 구문과 유사합니다.

let el = document.querySelector('.cssQuerySelector');

.querySelector() 매개변수

querySelector()는 css 쿼리 선택기를 나타내는 매개변수로 문자열 데이터 유형을 허용합니다. CSS 선택기를 사용하여 선택한 요소에 특정 스타일을 적용하는 것과 같은 방식입니다. 여기에는 id를 기반으로 HTML 요소를 선택하기 위한 #<id>, CSS 스타일 클래스 이름을 기반으로 요소를 선택하기 위한 .<css-class-name>, 그리고 #<id>.<css-class-name>, 요소를 선택하는 데 사용할 수 있습니다.

예시

다음 코드는 .querySelector()의 사용법을 설명합니다.

<div class="bold">Element 1: Bolder text</div>
<div class="green">Green text</div>
<div class="bold">Element 2: Bolder text</div>

window.onload = function() {
  let els = document.querySelector('.bold');
  console.log(els);
}

출력:

<div class="bold">Element 1: Bolder text</div>

출력은 Google 크롬 브라우저 콘솔에 표시되는 것과 같습니다. .querySelector() 함수는 컬렉션을 반환하는 .getElementsByClassName()과 달리 HTML 요소를 하나만 반환합니다. 따라서 처리해야 하는 경우 변경 사항을 직접 적용할 수 있습니다. 예를 들어 선택한 요소의 글꼴을 일반으로 변경하려는 경우 다음 코드를 사용하여 변경할 수 있습니다.

window.onload = function() {
  let els = document.querySelector('.bold');
  els.style.fontWeight = '100';
}

.querySelectorAll() 함수를 사용하여 CSS 클래스 이름을 기반으로 여러 HTML 요소 가져오기

이름에서 알 수 있듯이 Javascript의 .querySelectorAll() 함수는 선택 기준을 충족하는 HTML 요소 모음을 반환합니다. .querySelector()와 마찬가지로 querySelectorAll()은 CSS 쿼리 선택기 문자열을 매개변수로 받아들입니다. 라이브가 아닌 HTML 요소의 정적 목록을 반환합니다. 이를 기반으로 쿼리된 여러 HTML 요소를 반환하므로 .getElementsByClassName()과 유사하게 작동하지만 이에 국한되지 않습니다. querySelector()와 마찬가지로 .querySelectorAll()을 사용하여 ID 또는 CSS 클래스 이름을 기반으로 요소를 가져올 수 있습니다. CSS 스타일 시트에서 쿼리 선택기로 요소를 선택하는 것처럼.

.querySelectorAll() 구문

document.querySelectorAll('<css-selector-string>');

.querySelectorAll() 매개변수

이 함수는 CSS 쿼리 문자열을 유일한 입력 매개변수로 받아들입니다. id를 기반으로 요소를 선택하려면 #<id> 매개변수를 사용해야 합니다. 그리고 CSS 클래스 이름을 기준으로 선택하려면 .<css-class-name>이어야 합니다. 둘의 조합을 위해 #<id>.<css-class-name> 형식을 사용할 수 있습니다.

예시

<div class="bold">Element 1: Bolder text</div>
<div class="green">Green text</div>
<div class="bold">Element 2: Bolder text</div>

let els = document.querySelectorAll('.bold');
console.log(els);

출력:

NodeList(2)
0: div.bold
1: div.bold

출력은 node list 유형의 배열입니다. 배열에서 노드를 선택하고 요구 사항에 따라 CSS 클래스 값을 변경하여 이러한 노드를 추가로 처리할 수 있습니다. 예는 다음 코드와 같습니다. els[0].style.fontWeight = "100"; 첫 번째 선택된 HTML 노드를 일반 글꼴 두께로 만듭니다.

<div class="bold">Element 1: Bolder text</div>
<div class="green">Green text</div>
<div class="bold">Element 2: Bolder text</div>

let els = document.querySelectorAll('.bold');
els[0].style.fontWeight = '100';
console.log(els);

출력:

NodeList(2)
0: div.bold
1: div.bold