HTML5 실제 전투 및 CSS 선택기 분석 - querySelectorAll()

이전에는 HTML5에서 querySelector() 선택기를 도입했습니다. 오늘은 HTML5에 새로 추가된 선택기 querySelectorAll()을 계속해서 공유해 드리겠습니다.

querySelectorAll() 메소드에서 수신한 매개변수도 CSS 선택자이지만 일치하는 모든 요소가 반환되고, querySelector() 메소드는 일치하는 첫 번째 요소를 반환합니다.

querySelectorAll() 메서드는 NodeList의 인스턴스를 반환합니다. NodeList는 모든 속성과 메서드를 포함하는 인스턴스입니다. 기본 구현은 문서 검색을 위한 동적 쿼리가 아니라 요소 집합의 스냅샷과 동일합니다. 이렇게 하면 일반적으로 NodeList 개체 사용으로 인해 발생하는 성능 문제를 피할 수 있습니다.

querySelectorAll() 메소드에 전달된 매개변수가 유효한 한, 이 메소드는 발견된 요소 수에 관계없이 NodeList 객체를 반환합니다. 일치하는 요소가 없으면 NodeList는 비어 있습니다. 더 잘 설명하기 위해 작은 예를 살펴보겠습니다.

　HTML 코드

<p id="all" class="all">
	<i>梦龙小站</i>
	<p class="box">
		<em class="span">梦龙小站</em>
	</p>
	<i class="span">梦龙小站</i>
	<p class="box">
		<em>梦龙小站</em>
	</p>
</p>

JavaScript 코드

//获取类名为all的<p>中所有的<i>元素，类似于getElementsByTagName("i")
var i = document.getElementById("all").querySelectorAll("i");

//获取类名为span的所有元素
var span = document.querySelectorAll(".span");

//获取所有<p>标签中的所有<em>元素
var em = document.querySelectorAll("p em");

반환된 NodeList의 각 요소를 가져오려면 item() 메서드나 대괄호 구문을 사용할 수 있습니다. 간단한 예는 다음과 같습니다.

　HTML 코드

　JavaScript 코드

<p id="all" class="all">
	<i>梦龙小站</i>
	<p class="box">
		<em class="span">梦龙小站</em>
	</p>
	<i class="span">梦龙小站</i>
	<p class="box">
		<em>梦龙小站</em>
	</p>
</p>

브라우저에서 지원하지 않는 선택자가 querySelectorAll() 메서드에 매개변수로 전달되거나 선택자에 구문 오류가 있는 경우 querySelectorAll() 메서드는 오류를 보고할 것입니다.

HTML5 실제 전투 및 CSS 선택기 분석 - querySelectorAll()이 여기에 소개됩니다. querySelectorAll() 메소드는 HTML5의 일부일 뿐입니다. HTML5를 배우는 과정에서 우리는 모든 작은 지식을 소화하고 한 번에 한 단계씩 끝을 향해 나아갑니다. Menglong Station에 대한 귀하의 지원에 감사드립니다. HTML5의 실제 전투와 분석은 계속해서 진행됩니다.

위 내용은 HTML5 실제 전투 내용과 CSS 선택자(querySelectorAll()) 분석 내용입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(www. php.cn)!