logo

TechCodeview

자바스크립트 쿼리선택기

querySelector는 요소 검색에 중요한 역할을 하는 JavaScript 메소드입니다.

이번 장에서는 querySelector() 메소드와 그 사용법을 이해하고 논의하며, querySelector() 메소드의 개념을 실질적으로 이해하기 위해 예제를 살펴보겠습니다.

JavaScript querySelector() 메소드 소개

문서 내의 첫 번째 요소를 검색하고 반환할 수 있는 요소 인터페이스 메서드입니다. 지정된 CSS 선택기 또는 선택기 그룹과 일치하는 요소를 찾습니다. 그러나 일치하는 요소가 없으면 null을 반환합니다. querySelector() 메소드는 Document 인터페이스만의 메소드입니다. 문서 인터페이스는 html, XML 또는 기타 모든 종류의 문서에 대한 속성뿐만 아니라 일반적인 메서드를 설명하는 인터페이스입니다.

querySelector() 메소드는 어떻게 검색을 수행합니까?

우리는 요소 검색에 사용할 수 있는 검색 유형이 다양하다는 것을 알고 있습니다. 그러나 querySelector() 메소드는 깊이 우선 선주문 문서의 노드 순회. 여기서 순회는 문서 마크업의 첫 번째 요소에서 시작한 다음 하위 노드 수의 순서에 따라 순차적 노드를 통해 순회합니다.

C 언어로 작성된 매트릭스 프로그램

통사론 

 element = document.querySelector(selectors);

querySelector() 메소드는 문서 인터페이스의 메소드이므로 이러한 문법을 ​​가지고 있습니다.

여기에는 DOM 문자열인 'selectors'라는 매개변수가 하나 있으며 하나 이상의 유효한 CSS 선택기가 있습니다.

반환 유형

일치하는 항목이 없으면 'null'을 반환할 수 있으며, 첫 번째 요소가 지정된 CSS 선택기(있는 경우)와 일치하면 해당 요소를 반환합니다.

그러나 유효한 CSS 선택기가 없으면 'SyntaxError' 예외가 발생합니다.

이제 구현 예를 살펴보기 전에 다양한 유형의 CSS 선택기에 대해 알아야 합니다. 혹시 모르신다면 저희 홈페이지를 방문해주세요 https://www.javatpoint.com/css-selector CSS 튜토리얼 섹션.

이제 CSS 선택기를 다루고 querySelector() 메소드를 사용하여 첫 번째 요소 값을 유지하는 예제를 구현하겠습니다.

querySelector() 구현 예

다음은 querySelector() 메소드의 작동을 이해하는 데 도움이 되는 예제 코드입니다.

Java에서 날짜 형식 지정 
 class=&apos;colors&apos;&gt;Colors <p> Myclass</p> <p> It is the div p paragraph</p> <p> div p class</p> <p id="myid"> It is p id</p> It is div id //Element selector var e = document.querySelectorAll (&apos;p&apos;); console.log(e);

이제 첫 번째 예에서 querySelector() 메서드를 사용하여 첫 번째로 일치하는 선택기 값만 출력한 코드의 차이점을 확인할 수 있습니다. 그러나 이 두 번째 예제의 출력을 관찰하면 지정된 선택기 또는 선택기 그룹의 일치하는 값이 모두 반환되었음을 알 수 있습니다. 위 코드의 출력은 다음과 같습니다.

자바스크립트 쿼리선택기

코드 설명

  • 위의 코드는 html과 JavaScript의 조합입니다.
  • 우리는 코드에 다양한 CSS 선택기를 구현했습니다.
  • JavaScript 섹션에서는 querySelectorAll() 메소드를 사용하고 CSS의 요소 선택기를 호출했습니다.
  • 따라서 querySelectorAll() 메소드는 이제 Depth-first pre-order 메소드를 사용하여 탐색하기 위한 코드로 이동하고 querySlectorAll() 메소드 매개변수로 지정된 일치하는 요소 값을 모두 반환합니다.

따라서 같은 방식으로 다양한 다른 유형의 CSS 선택자에도 querySelectorAll() 메서드를 사용할 수 있으며 인수로 지정된 선택자의 일치하는 값을 모두 반환합니다. 메서드를 구현하려면 다양한 선택기에 대해 querySelector() 메서드를 querySelectorAll() 메서드로 바꾸면 메서드가 일치하는 항목을 찾아 지정된 요소와 일치하는 값을 하나 이상 반환합니다.