javascript querySelector

예전에는 javascript에서 html dom을 선택하기 위해서는 아래의 방식을 사용했다.

document.getElementById("ID명");

document.getElementsByClassName("클래스 이름");

document.getElementsByTagName("태그 이름");

IE에서만 호환되는 document.all("id, class, tag") 도 있었다.

 

 

그 이후 jquery에서 혁신적인 selector 방식이 나온다.

$("#id"); id로 검색

$(".class"); class명으로 검색

$("tag"); tag 명으로 검색

$(":checked"); check 되어 있는 경우 검색

 

 

그 이후 w3c에 의해서 아래 문법들이 표준화 되었다.

document.querySelector("#id"); id로 검색

document.querySelectorAll(".class"); class명으로 여러개 검색

document.querySelectorAll("TAG"); tag명으로 여러개 검색

:checked, :button, :visible 식의 속성 검색은 지원하지 않는다.

jquery를 따라서 적용되었으며

API1에서는 querySelector, querySelectorAll만 사용되지만

API2에서는 .find(), .findAll(), .matches()가 추가 되었다. 이 기능들은 jquery 부분과 동일하다.

이왕이면 document.selector("") 로 간략하게 해도 괜찮지 않았나싶다.

querySelector()는 모든 브라우저에 대해 지원하고 ie는 9부터 지원한다.