HTML5 실제 전투 및 CSS 선택기 분석 - getElementsByClassName() 메소드

이전 글에서 HTML5의 querySelector() 메소드와 querySelectorAll() 메소드에 대해 소개한 적이 있는데, 얼마나 잘 이해하셨는지 궁금하시죠? 여기서는 querySelector() 메소드의 첫 번째 요소를 살펴보겠습니다. CSS 선택기와 일치하며, querySelectorAll() 메서드는 전달된 CSS 선택기(NodeList 객체)와 일치하는 모든 요소를 ​​반환합니다. 간략한 검토 후 새로운 method-getElementsByClassName() 메소드를 공유하겠습니다.

HTML4는 웹 개발 분야에서 널리 사용되면서 HTML4에도 많은 변화를 가져왔습니다. 클래스 이름은 CSS에서 널리 사용되므로 JavaScript 코드를 작성할 때 얻어야 하는 것은 ID가 아니라 클래스 이름인 경우가 많습니다. 그 이후로 HTML5에는 getElementsByClassName() 메서드가 추가되었습니다. getElementsByClassName() 메소드는 문서 객체와 모든 HTML 요소를 통해 호출될 수 있습니다. 요소의 클래스 이름을 얻는 방법은 많은 JavaScript 라이브러리에서 처음 등장했으며 모두 DOM 기능을 통해 구현되므로 성능 측면에서 많은 비용이 소요됩니다. 이 기본 getElementsByClassName() 메서드를 사용하면 많은 성능이 절약됩니다.

getElementsByClassName() 메서드는 매개변수를 받습니다. 이 매개변수는 하나 또는 여러 개일 수 있는 CSS 선택기의 문자열이기도 합니다. getElementsByClassName() 메서드는 지정된 클래스의 모든 요소가 포함된 NodeList를 반환합니다. 여러 클래스 이름이 전달되는 경우 클래스 이름의 순서는 중요하지 않습니다. 여기서는 먼저 이론적 근거를 소개하겠습니다. 작은 예를 살펴보겠습니다.

1. 클래스 이름 상자를 모두 가져오고 빨간색 배경을 추가합니다.

HTML 코드

<p id="box1" class="box">梦龙小站p</p>
<p>梦龙小站p</p>
<section id="box2">
	<i id="oi123123" class="oi">梦龙小站i</i>
	<p class="box">梦龙小站p</p>
</section>
<section id="box3" class="box3">
	<em class="op">梦龙小站em</em>
</section>
<p>
	<em class="box">梦龙小站em</em>
	<em id="op123123" class="op">梦龙小站em</em>
</p>

JavaScript 코드

var allBox = document.getElementsByClassName("box"),
	i, len;

alert(allBox[0].id) //[object NodeList]

for(i=0, l = allBox.length; i < l; i++){
	allBox[i].style.background = "red";
}

미리보기 효과

2. ID 이름이 box2인 요소에서 클래스 이름이 box인 요소를 가져오고, 빨간색 배경

HTML 코드

<p id="box1" class="box">梦龙小站p</p>
<p>梦龙小站p</p>
<section id="box2">
	<i id="oi123123" class="oi">梦龙小站i</i>
	<p class="box">梦龙小站p</p>
</section>
<section id="box3" class="box3">
	<em class="op">梦龙小站em</em>
</section>
<p>
	<em class="box">梦龙小站em</em>
	<em id="op123123" class="op">梦龙小站em</em>
</p>

JavaScript 코드

//获取类名是oi和op的元素，并加上红色背景
var allBox = document.getElementById("box2").getElementsByClassName("box"),	i, len;

alert(allBox[0].id) //[object NodeList]


for(i=0, l = allBox.length; i < l; i++){	allBox[i].style.background = "red";
}

미리보기 효과

이 메소드가 호출되면 일치하는 요소가 있는 경우에만 NodeList가 반환됩니다. 찾을 수 있습니다. 문서 객체에서 getElementsByClassName() 메서드를 호출하면 항상 클래스 이름과 일치하는 모든 요소가 반환됩니다. 요소에 대해 getElementsByClassName() 메서드를 호출하면 하위 요소 중에서 일치하는 요소만 반환됩니다.

이 방법을 사용하면 특정 클래스 이름을 가진 요소에 이벤트 핸들러를 더 편리하게 추가할 수 있으므로 더 이상 ID나 태그를 사용하여 이벤트 핸들러를 추가하는 것으로 제한될 필요가 없습니다. 반환된 객체는 NodeList이기 때문에 이 메서드를 사용하면 getElementsByTagName() 메서드 및 NodeList를 반환하는 기타 DOM 메서드를 사용하는 것과 동일한 성능 문제가 발생합니다. 모두 for 루프를 사용하여 추가해야 합니다. 따라서 Menglong은 요소를 얻기 위해 JavaScript 라이브러리의 메서드를 사용하는 것과 요소를 얻기 위해 getElementsByClassName() 메서드를 사용하는 것에는 장단점이 있다고 믿습니다.

getElementsByClassName() 메소드는 IE9+, Firefox3+, Safari3.1+, Chrome 및 Opera9.5+와 같은 일부 최신 브라우저를 지원합니다.

이것으로 HTML5 실제 전투 소개와 CSS selector-getElementsByClassName() 메소드 분석을 마칩니다. 요약하자면, getElementsByClassName() 메서드는 JavaScript 기본 메서드를 사용하여 요소 클래스 이름을 가져옵니다. getElementsByClassName() 메소드는 HTML5에 새로 추가된 메소드입니다. HTML5 관련 내용은 Menglong Station의 HTML5 관련 업데이트를 참고하세요. 여러분의 지원에 감사드립니다.

위 내용은 HTML5 실제 전투 내용과 CSS selector-getElementsByClassName() 메소드 분석 내용입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!