자바스크립트 선택자 (Selector) vs 제이쿼리 비교

(자바스크립트를 시작할때 선택자를 많이 쓰는데요, 저는 요즘 제이쿼리를 많이 써서 비교해 보고자 기록 해봅니다.)

 

자바스크립트와 제이쿼리(jQuery)는 모두 웹 개발에서 DOM(Document Object Model) 요소를 선택하기 위해 사용하는 선택자를 지원합니다. 기본적으로 제이쿼리는 자바스크립트의 기능을 확장하여 사용하기 쉽고 간결하게 작성할 수 있도록 도와주는 라이브러리입니다. 따라서 대부분의 제이쿼리 선택자는 기본 자바스크립트의 선택자와 비슷하거나 동일합니다. 하지만 제이쿼리는 선택자를 더 간단하게 사용할 수 있는 몇 가지 추가적인 기능을 제공합니다.

다음은 자바스크립트와 제이쿼리의 선택자를 비교하는 예시입니다.

 

1. 요소 선택자 (Element Selector)

자바스크립트: document.querySelector('selector')
제이쿼리: $('selector')
예를 들어, id가 "myElement"인 요소를 선택하려면

document.querySelector('#myElement') //자바스크립트
$('#myElement') // 제이쿼리

 

2. 클래스 선택자 (Class Selector)

자바스크립트: document.querySelector('.className')
제이쿼리: $('.className')
예를 들어, class가 "highlight"인 요소를 선택하려면

document.querySelector('.highlight') // 자바스크립트
$('.highlight') // 제이쿼리

 

3. 여러 요소 선택자 (Multiple Elements Selector)

자바스크립트: document.querySelectorAll('selector')
제이쿼리: $('selector')
예를 들어, 모든 p 요소를 선택하려면

document.querySelectorAll('p') // 자바스크립트
$('p') // 제이쿼리

 

4. 자식 요소 선택자 (Child Elements Selector)

자바스크립트: element.querySelector('selector')
제이쿼리: $('selector', element)
예를 들어, id가 "parentElement"인 요소의 자식 중에서 class가 "childElement"인 요소를 선택하려면

document.querySelector('#parentElement .childElement') // 자바스크립트
$('.childElement', '#parentElement') // 제이쿼리

 

5. 속성 선택자 (Attribute Selector)

자바스크립트: document.querySelector('[attribute=value]')
제이쿼리: $('[attribute=value]')
예를 들어, data-id 속성이 "123"인 요소를 선택하려면

document.querySelector('[data-id="123"]') // 자바스크립트
$('[data-id="123"]') // 제이쿼리

 

이처럼, 기본적인 선택자의 사용은 비슷하나, 제이쿼리는 단순하고 간결한 문법을 제공하여 더 편리하게 요소를 선택할 수 있도록 도와줍니다. 하지만 최근에는 브라우저의 웹 표준이 발전하면서, 자바스크립트도 제이쿼리와 비슷한 선택자를 더 직관적으로 사용할 수 있도록 많은 개선이 이루어지고 있습니다. 따라서 자바스크립트에서도 많은 선택자를 제이쿼리 없이 쉽게 사용할 수 있게 되었습니다.