jQuery 선택기 querySelector 사용 가이드_jquery

소개

HTML5는 DOM에서 요소를 보다 편리하게 선택할 수 있도록 document.querySelector 및 document.querySelectorAll이라는 두 가지 새로운 메서드를 Web API에 도입합니다. 해당 기능은 jQuery의 선택기와 유사합니다. 이렇게 하면 기본 JavaScript 코드 작성이 훨씬 쉬워집니다.
사용법

두 메서드는 비슷한 구문을 사용하며 둘 다 문자열 매개변수를 받습니다. 이 매개변수는 유효한 CSS 선택 구문이어야 합니다.

코드 복사 코드는 다음과 같습니다.

요소 = document.querySelector('selectors');
elementList = document.querySelectorAll('selectors');

selectors 매개변수에는 쉼표로 구분된 여러 CSS 선택기가 포함될 수 있습니다.

코드 복사 코드는 다음과 같습니다.

요소 = document.querySelector('selector1,selector2,...');
elementList = document.querySelectorAll('selector1,selector2,...');

이 두 가지 방법을 사용하면 의사 클래스 상태의 요소를 찾을 수 없습니다. 예를 들어 querySelector(':hover')는 예상한 결과를 얻지 못합니다.

쿼리선택기

코드 복사 코드는 다음과 같습니다.

element = document.querySelector('div#container');//컨테이너 ID를 가진 첫 번째 div
를 반환합니다. element = document.querySelector('.foo,.bar');//foo 또는 bar 스타일 클래스가 있는 첫 번째 요소 반환

querySelectorAll

이 메소드는 조건을 만족하는 모든 요소를 ​​반환하며 그 결과는 nodeList 컬렉션입니다. 검색 규칙은 앞서 설명한 것과 동일합니다.

elements = document.querySelectorAll('div.foo');//foo 클래스 스타일을 사용하여 모든 div 반환
반환된 nodeList 컬렉션의 요소는 실시간이 아니라는 점에 유의해야 합니다.