HTML 요소를 얻기 위한 JavaScript의 querySelector() 메서드 소개

QuerySelector()는 JavaScript에서 모든 HTML 요소를 감지하고 얻을 수 있는 메소드입니다. JavaScript에는 처음부터 HTML 요소를 얻을 수 있는 getElemenById() 및 getElemetnsByClasNamo()와 같은 메소드가 있지만 querySelector()를 사용하면 선택적으로 id 속성 값, class 속성 값 등을 알지 못한 채 jQuery 의미에서 HTML 요소를 지정합니다.

간단히 말하면, querySelector()를 사용하여 HTML 요소를 검색할 수 있습니다.

먼저 querySelector()의 기본 구문을 살펴보겠습니다.

일반적으로 querySelector()는 대상 범위에서 실행됩니다.

document.querySelector( CSS选择器 )

이 경우 querySelector()는 전체 문서에 대해 실행됩니다. 매개변수에 대해 jQuery와 유사한 CSS 선택기를 지정하여 임의의 HTML 요소를 얻을 수 있습니다.

첫 번째로 일치하는 HTML 요소를 얻으면 프로그램이 종료된다는 점에 유의하세요.

즉, 여러 요소를 얻으려면 루프 프로세스를 생성하거나 나중에 설명할 querySelectorAll()을 사용해야 합니다.

계속해서 querySelector() 사용 방법을 살펴보겠습니다.

ID 및 클래스 속성을 포함하는 HTML 요소 가져오기

예제는 다음과 같습니다

HTML

<h1 class="sample">标题示例</h1>
<p id="test">内容示例</p>

JavaScript

var elem1 = document.querySelector('.sample');
var elem2 = document.querySelector('#test');
console.log(elem1);
console.log(elem2);

실행 결과는 다음과 같습니다

querySelector의 각 매개변수를 확인할 수 있습니다. ()는 CSS 선택자로 지정됩니다.

따라서 동일한 querySelector()는 매개변수의 지정된 메소드에 따라 HTML 요소를 가져올 수도 있습니다.

실행 결과를 보면 해당 요소를 획득한 것을 알 수 있습니다.

querySelectorAll()

querySelectorAll()을 사용하여 여러 HTML 요소를 가져오는 방법을 살펴보겠습니다.

먼저 기본 구문을 살펴보겠습니다

document.querySelectorAll(CSS选择器)

이렇게 하면 지정된 매개변수의 메서드와 대상 범위는 querySelector()와 동일합니다.

가장 큰 차이점은 일치하는 모든 HTML 요소를 얻을 수 있다는 것입니다!

queryselector()는 일치하는 첫 번째 요소만 검색할 수 있으므로 querySelectorAll()을 사용하여 여러 요소를 가져올 수 있습니다.

구체적인 예를 살펴보겠습니다

HTML 코드

<ul>
  <li class="list">列表１</li>
  <li class="list">列表２</li>
  <li class="list">列表３</li>
</ul>

이 예에서는 여러 목록 요소가 배열되어 있습니다.

이 목록의 모든 요소를 ​​검색하려면 다음을 수행할 수 있습니다.

JavaScript

var elem = document.querySelectorAll('.list');
console.log(elem);

이 예에서는 클래스 속성 값 "list"가 querySelectorAll()의 매개 변수로 지정됩니다.

이것은 모든 목록 요소를 지정하므로 모든 목록 항목을 얻을 수 있습니다.

물론 "li" 요소를 그대로 둘 수 있지만 다른 목록 요소와 균형을 맞추는 데 주의하세요.

querySelectorAll()에서 얻은 요소를 NodeList라고 하며 배열과 유사한 데이터 구조를 저장합니다.

아래에서는 'forEach'를 사용하여 한 번에 하나의 요소를 처리하며, 이는 효과적으로 배열을 반복적으로 처리합니다.

var elem = document.querySelectorAll('.list');
elem.forEach(function(value) {
    console.log(value);
})

실행 결과는 다음과 같습니다

이 예에서는 querySelectorAll()을 사용하여 얻은 결과가 forEach 문에 의해 반복됩니다.

"value" 매개변수를 지정하면 위의 결과와 같이 각 HTML 요소를 얻을 수 있습니다.

참고: querySelectorAll()을 사용하여 얻은 HTML 요소에 대해 임의 처리를 수행할 수 있습니다!

위 내용은 HTML 요소를 얻기 위한 JavaScript의 querySelector() 메서드 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!