class = “ class ” (한국어)

Pure JS vs jQuery

Pure JavaScript는 이 jsPerf 에서 볼 수 있듯이 훨씬 더 빠릅니다. document.getElementByClassName 대 jQuery 선택기. 여기 Chrome 25의 결과는 다음과 같습니다.

• $(".class")– 4355 초당 작업
• getElementsByClassName("class")– 94636 초당 작업

보시다시피이 간단한 작업의 경우 jQuery 옵션은 순수 자바 스크립트보다 약 22 배 느립니다. jQuery 개발 소스 를 확인하면 이러한 이유를 쉽게 알 수 있습니다. jQuery “선택기 기능”이 너무 일반적이므로 많은 작업을 수행해야하기 때문입니다. 입력이 무엇인지 확인합니다.

Pure JS 구현

jQuery click 이벤트를 떠났습니다. 이미 jQuery에 대한 종속성이있는 것처럼 보이므로 “이벤트 연결 방식을 변경할 필요가 없습니다.

jsFiddle

$("#Button").click(function() { var items = document.getElementsByClassName("class"); for (var i = 0; i < items.length; i++) alert(items[i].name); }); 

getElementsByClassName

또한 getElementsByClassName를 사용했습니다. 성능에 관심이 있다면 이상적인 선택자를 선택하는 것이 매우 중요합니다. 특정 클래스의 모든 요소에 관심이 있으므로 getElementsByTagName 및 querySelectorAll와 같은 다른 요소를 즉시 닫고 빌드 된 함수를 선택할 수 있습니다. 특정 클래스의 요소를 찾기위한 것입니다.

jQuery 구현

이것은 jQuery를 사용한 구현입니다. (예 : $(this)) 일반 자바 스크립트 속성이이 경우 훨씬 쉽기 때문입니다.

jsFiddle

$("#Button").click(function() { $(".class").each(function() { alert(this.name); }); }); 

댓글

• 완벽합니다. jQuery를 좋아하지만 순수한 자바 스크립트로 쉽게 수행 할 수있을 때는 피하세요. 어떤 이유로 ' 이전에 작동하게 만들 수 없었습니다. 아마도 멍청한 구문 오류 일 것입니다.
• 동의합니다. 모든 JS 기능을 살펴 보는 데 시간이 걸리므로 ' 브라우저 오류를 확인하여 디버깅하는지 확인하세요.
• name로 수행하려는 작업에 따라 jQuery s .map() 배열을 가져옵니다.
• @RoToRa 이 경우에는 감사합니다!

저장하는 대신 배열을 반복하는 데 $.each 함수를 사용할 수 있습니다. 이와 같이 :

$("#Button").click(function() { $(".class").each( function() { alert( $(this).attr("name") ); } }); 

이 작업은 “순수”입니다. JavaScript의 경우 ES6 구문을 사용하는 경우 다음과 같이합니다.

var elements = document.getElementsByClassName("class"); elements.forEach(e => { alert(e.name) }); 

ES6를 지원하지 않는 모든 브라우저 (모든 버전의 IE 포함) :

var elements = document.getElementsByClassName("class"); elements.forEach(function(e) { alert(e.name); }); 

IE8 지원이 필요한 경우 :

var elements = document.querySelectorAll(".class"); for (var i = 0; i < elements.length; i++) { alert(elements[i].name); } 

jQuery를 사용할 때보 다 약간 더 빠릅니다. . 그러나 jQuery는 여전히 가장 짧은 코드입니다.

$(".class").each(e => { alert(e.name); }); 

댓글

• 감사합니다. 이것은 주석 섹션에서 사용될 것이기 때문에 100 개 이상의 요소를 다룰 수 있습니다. 저는 ' 두 코드로 벤치마킹을 수행하고 모든 작업이 완료되면 피드백을 제공합니다. 대신 document.getElementsByClassName() 및 for 루프를 사용할 수 있는지 궁금합니다. 시도했지만 ' 작동하지 못했습니다.동일한 for 루프와 document.getElementsByClassName('class')[i].name

를 사용했습니다. document.querySelectorAll를 사용하여 원하는 요소를 검색 할 수 있습니다.

var namedEls = document.querySelectorAll("input.class"); for (var i=0;i<namedEls.length;i+=1){ console.log(namedEls[i].name); } //=> 1, 3 

또는 하나의 라이너로 이름을