document.querySelector

안녕하세요 찐망고입니다.

 

CSS 도 선택자가 중요하잖아요!

선택자 관련 CSS 만 해도 엄청 많죠~ 

 

`document.querySelector()`는 웹 개발에서 사용되는 JavaScript의 메서드 중 하나입니다.

문서 객체 모델(Document Object Model, DOM)에서 요소를 선택하는 데 사용하죠.

 

이 메서드는 CSS 선택자를 통해 문서 내에서 요소를 선택하고 반환하는데요,

CSS선택자를 사용하여 원하는 요소를 찾을 수 있습니다.

일치하는 요소가 없는 경우엔 `null`을 반환합니다.

const elementId = document.querySelector("#myElement");
// id선택자 요소 선택

const elementClass = document.querySelector(".myElement");
// class선택자 요소 선택

 

`querySelector() ` 는 단일요소만 반환하기 때문에

여러 요소를 선택하려면 `querySelectorAll()` 메서드를 사용해야 합니다.

 

 

 

`document.querySelector()` 메서드가 도입되기 이전에

웹 개발에서 요소를 선택하기 위한 다양한 방법들을 아래서 확인해 보세요.

var element = document.getElementById('myElement');
// 문서 내에서 특정 ID를 가진 요소를 선택하는 데 사용

var elements = document.getElementsByClassName('highlight');
// 문서 내에서 특정 클래스를 가진 모든 요소를 선택하는 데 사용

var elements = document.getElementsByTagName('div');
// 문서 내에서 특정 태그명을 가진 모든 요소를 선택

var elements = document.getElementsByName('username');
// 특정 이름을 가진 모든 요소를 선택하는 데 사용, 주로 폼 요소에서 사용

 

 

---

 

 

 

찐망고 포스팅에서만 볼 수 있는 몰라도 되지만 알면 피가 되고 살이 되는 이야기.

 

`document.querySelector()` 메서드는 HTML Living Standard의 일부로 도입되었는데,

이는 HTML5가 아닌 HTML Living Standard이라는 점에 주목해야 하는데요.

참고로  HTML Living Standard는 지속적으로 업데이트되는 HTML표준의 최신버전을 의미합니다.

 

https://html.spec.whatwg.org/

HTML Standard

 

위 사이트에 접속하면 최신버전을 확인할 수 있어요!

 

 

W3C와 WHATWG, 언어를 개발하던 개발팀 사이에 개발 방향의 차이가 있어서 생긴 

두 표준이 HTML5와 HTML Living Standard인데요.

HTML 5.0 이후에는 HTML Living Standard로 넘어가고, 

공식적으로 HTML 5.1, 5.2 등의 버전을 발표하는 대신, 

지속적으로 최신 기능과 표준을 반영하고 업데이트하는 방식으로

HTML 표준을 발전시킨다고 생각하면 될 것 같아요.

 

`document.querySelector()` 는 다양한 웹 브라우저에서 지원되는 비교적 최근 기능이므로, 

이 메서드의 정확한 도입 버전은 명확하게 정의되어 있지 않지만,

아마도 주요 브라우저들은 상당히 오래전부터 이 메서드를 지원하고 있으며,

일반적으로 IE 8 및 이전 버전을 포함한 오래된 브라우저를 제외하고는

대부분의 최신 브라우저에서 사용 가능 하다고 보면 됩니다.