=====Definition and Usage=====
%%querySelector()%% 메서드는 문서에서 지정된 CSS 선택자와 일치하는 첫 번째 요소를 반환합니다.\\
\\
**Note:** %%querySelector()%% 메서드는 지정된 선택자와 일치하는 첫 번째 요소만 반환합니다.\\
모든 일치 항목을 반환하려면 대신 querySelectorAll () 메서드를 사용합니다.\\
\\
선택자가 여러 번 사용되는 문서의 %%ID%%와 일치하는 경우 (%%"id"%%는 페이지 내에서 고유해야 하며\\
두 번 이상 사용되지 않아야 함) 첫 번째 일치 요소를 반환합니다.\\
\\
CSS 선택자에 대한 자세한 내용은 [[https://www.w3schools.com/css/css_syntax.asp|CSS Selector Tutorial]] 및 [[https://www.w3schools.com/cssref/css_selectors.asp|CSS Selectors Reference]]를 참조하십시오.\\
=====Syntax=====
document.querySelector(CSS selectors)
=====Parameter Values=====
^ Parameter ^ Type ^ Description ^
| CSS Selectors | String | 필수입니다. 요소와 일치시킬 하나 이상의 CSS 선택기를 지정합니다. 이들은 %%ID%%, 클래스, 유형, 속성, 속성 값 등을 기반으로 %%HTML%% 요소를 선택하는 데 사용됩니다.\\ \\ 선택자가 여러 개인 경우, 각 선택자를 쉼표로 구분합니다. 반환되는 요소는 문서에서 처음 발견된 요소에 따라 다릅니다 ( "추가 예제"참조).\\ \\ **Tip:** 모든 %%CSS%% 선택자 목록은 [[https://www.w3schools.com/cssref/css_selectors.asp|CSS Selectors Reference]]를 참조하십시오.. |
\\
=====Technical Details=====
^ DOM Version ^ Selector Level1 Document Object ^
| Return Value(반환 값) | 지정된 CSS 선택자와 일치하는 첫 번째 요소를 나타내는 %%NodeList%% 객체입니다. 일치하는 항목이 없으면, %%null%%이 반환됩니다. 지정된 선택자가 유효하지 않은 경우, %%SYNTAX_ERR%% 예외가 발생합니다. |
\\
=====More Examples=====
문서의 첫 번째 %%%% 요소를 가져옵니다.\\
====Example====
This is a p element. This is also a p element. Click the button to add a background color to the first p element in the document.
====Example====
문서에서 %%class="example"%%가 있는 첫 번째 %%
%% 요소를 가져옵니다.\\
A paragraph with class="example"
Click the button to add a background color to the first p element
in the document with class="example".
This is a p element with id="demo" Click the button to change the text of the p element.
====Example====
%%id="demo"%%가 있는 요소의 텍스트 변경합니다:\\
A heading with class="example"
====Example====
%%
%% 요소를 가져옵니다.\\
I am a p element, my parent is a div element. I am a p element, my parent is also a div element.
Click the button to change the bacgkround color of the first p element
in the document where the parent is a div element.
The CSS selector a[target] makes sure that
all links with a target attribute gets a yellow background:
Click the button to add a red border to the first link that has a target attribute.
====Example====
문서에서 %%"target"%%속성을 가진 첫 번째 %%%% 요소를 가져옵니다.\\
H3 element
H3 element
====Example====
다음 예제는 여러 선택자가 작동하는 방식을 보여줍니다.\\
\\
두 개의 요소, 즉 %%%% 및 %%
%% 요소가 있다고 가정합니다.\\
\\
다음 코드는 문서의 첫 번째 %%
%% 요소에 배경색을 추가합니다.\\
\\
\\
그러나 %%A h2 element
A h3 element
%% 요소가 문서에서 %%
%% 요소 앞에 배치된 경우,\\
%%
%% 요소가 빨간색 배경색을 가지게 되는 요소입니다.\\
\\
{{tag>오션, Javascript HTML DOM Document querySelector()}}A h3 element
A h2 element