[Javascript] 자바스크립트에서 DOM 요소를 선택하는 여러 가지 방법 -2-

자바스크립트에서 DOM 요소를 선택하는 여러 가지 방법

이전 글에서는 getElementsBy...와 같은 전통적인 방식으로 DOM 요소를 선택하는 방법에 대해 간단히 다뤄봤습니다.
이번 글에서는 가장 범용적으로 쓰이는 querySelector 함수에 대해 예제 중심으로 정리해보겠습니다.

🎯querySelector / querySelectorAll

quertSelector 함수는 "CSS 선택자"를 인자로 받아서 조건에 맞는 DOM 요소하나를 반환합니다.

querySelectorAll 함수는 조건에 맞는 모든 요소를 NodeList 형태로 반환합니다.

const one = document.querySelector('.example');       // 가장 첫 번째 .example 요소
const all = document.querySelectorAll('.example');    // 모든 .example 요소들

이 글에서는 예제의 일관성을 위해 querySelector 중심으로 설명하겠습니다.

실제로 응용하게 될 경우 단 건의 요소를 가져올지, 여러 건의 요소를 가져올지에 따라 구분하여 사용해주시면 되겠습니다.

✅ 기본 선택자를 이용한 방법

1. 아이디로 선택하기 : #id

getElementById() 함수와 동일합니다. CSS 선택자를 인자로 넘기기 때문에 ID를 의미하는 '#'이 매개변수에 포함됩니다.

 

2. 클래스로 선택하기 : .className

getElementsByClassName() 함수와 동일합니다. Class를 의미하는 '.'이 매개변수에 포함됩니다.

한 가지 차이점이 있다면, getElementsByClassName() 함수는 결과를 HTML Collection으로 반환합니다.

 

3. HTML 태그로 선택하기 : tagName

getElementsByClassName() 함수와 동일합니다. 다른 기호 없이 태그 명만 매개변수로 넘겨줍니다.

 

4. DOM 내 모든 요소 선택하기 : *

document.querySelector('#header');
document.querySelector('.btn');
document.querySelector('section');
document.querySelector('*');

✅ 의사 클래스 선택자

📌상태 기반 선택

document.querySelectorAll('input:checked');
document.querySelectorAll('input:disabled');

📌순서 기반 선택

document.querySelectorAll('li:first-child');
document.querySelectorAll('li:nth-child(2)');
document.querySelectorAll('li:nth-child(3)');
document.querySelectorAll('li:last-child');

✅ 속성 선택자

📌 특정 속성이 있는 요소

'readonly', 'disalbed' 등 속성명을 이용해 요소를 찾을 수 있습니다. data-set을 활용해서 요소를 찾는 것도 가능합니다.

document.querySelector('[readonly]');
document.querySelector('[disabled]');
document.querySelector('[data-role]');

📌 속성값이 정확히 일치하는 경우

 

[type="text"], [class="fruits"] 등 속성 명이 정확히 일치하는 요소를 반환합니다.

document.querySelector('[id="apple"]')
document.querySelector('[type="text"]')
document.querySelector('[class="fruits"]')

✅ 속성 선택자 와일드카드처럼 활용하기

특정 값으로 시작되거나 특정 값으로 끝나거나 특정 값이 포함되는 공통된 패턴을 가진 요소들을 한 번에 찾을 때 [매우] 유용합니다.

 

📌 특정 값으로 시작 (^=)

document.querySelector('[class^="label"]')
document.querySelector('input[name^="email"]')

📌 특정 값으로 끝남 ($=)

 

document.querySelector('[src$=".png"]')
document.querySelector('a[href$=".pdf"]')
document.querySelector('label[class$="label"]')

📌 특정 값을 포함 (*=)

 

document.querySelector('input[class*="number"]')
document.querySelector('textfield[name*="email"]')
document.querySelector('[data-id*="user"]')

✅ 여러 가지 선택자 조합하기

querySelector의 꽃은 여러가지 선택자를 "문법적으로 허용하는 내에서" 자유롭게 조합할 수 있다는 것입니다.

그 패턴과 범위를 알기 위해 이 글이 작성되었으니 다양한 예제를 통해 지피티의 몰락과 지능퇴행에 대비하도록 하겠습니다.

 

📌 태그 + 속성

document.querySelector('div#main');
document.querySelector('a.link');

📌 자식 요소 선택 (>)

 

document.querySelector('ul > li');
document.querySelector('nav > a');

📌 모든 자손 요소 선택 (공백)

 

document.querySelector('div span');
document.querySelector('section p');

📌 인접 형제 요소 선택 (+)

 

document.querySelector('h1 + p');
document.querySelector('label + input');

📌 모든 형제 요소 선택 (~)

 

document.querySelector('li#id ~ li')
document.querySelector('div#className ~ div')

📌 부모 요소의 특정 자식 선택

 

document.querySelector('div:first-child')
document.querySelector('div#id:first-child')
document.querySelector('div#id:nth-child(2)')
document.querySelector('div#id:nth-child(3)')
document.querySelector('div#id:last-child')

📌 특정 요소 제외 (:not())

 

document.querySelector('button:not(.btn-primary)')
document.querySelector('div[class^="item-"]:not(:last-child)');

📝 마치며

querySelector는 단순하면서도 매우 유연한 선택자입니다. 자유도가 높다는 것은 그 만큼 가능성이 많다는 의미가 되지만,

오히려 처음엔 복잡하게 느껴질 수 있는 것 같습니다.

모든 문법을 다 활용할 수는 없지만, 이런 활용이 가능하다는 것을 아는 것만으로도 유연하고 세련된 UI 작업이 가능해질 것 같습니다.

 

감사합니다!