javascript getElementsByClassName 구현 code_javascript 기술-JS 튜토리얼-php.cn

javascript getElementsByClassName 구현 code_javascript 기술

WBOY

풀어 주다： 2016-05-16 18:18:43

원래의

1039명이 탐색했습니다.

먼저 코드를 살펴보겠습니다. (다중 클래스 쿼리 및 특정 범위 내 쿼리 지원)

코드 복사 코드는 다음과 같습니다.

 
/* 
* clsssName 요소에 따라 요소 컬렉션을 가져옵니다. 
* @param fatherId 상위 요소의 ID, 기본값은 document 
* @ tagName 하위 요소의 태그 이름 
 * @className 공백으로 구분된 ClassName 문자열 
*/ 
function getElementsByClassName(fatherId,tagName,className){ 
node = fatherId&&document.getElementById(fatherId) || document; 
tagName | "*"; 
className.split(" ") 
for(var i=0,j=classNameLength) ;i//클래스 이름에 대한 정규 일치 생성
className[i]= new RegExp("(^|\s)" className[i].replace(/-/g , "\-") "(\s |$)"); 
} 
var elements = node.getElementsByTagName(tagName) 
var result = [] 
for(var i= 0,j=elements.length,k= 0;ivar element = elements[i] 
while(className[k ].test(element.className) )){//최적화 루프
 if(k === classNameLength){ 
result[result.length] = 요소 
break 
} 
k = 0 ; 
} 
결과 반환 ; 
} 

 
자, 테스트해 보겠습니다. 

코드를 복사하세요. > 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다. window.onload = function(){

alert(getElementsByClassName(document,"div ","aaa ccc").length);//2

alert(getElementsByClassName("container","div","aaa ccc") .length);//1 
alert(getElementsByClassName("container ","span","aaa zzz").length);//1 
} 

 
결과 가져오기 바르게. 예, 기본 효율성은 매우 높습니다. 여러 클래스 조건이 있는 쿼리를 지원하지만 가장 큰 문제는 태그 지정이 필요한 getElementsByClassName("container", "div", "aaa ccc")를 지원하지 않는다는 것입니다. . 지정된 요소가 지정된 클래스에 속하는 상황을 찾습니다. 

그래서 여기서는 기본 메서드 호출이 중단되었습니다.
루프 최적화 정보
코드에서 효율성을 향상시킬 수 있는 배열 길이를 캐시하는 것을 볼 수 있습니다. 사실 여기에는 매우 숨겨진 문제가 있습니다. 즉, 배열의 길이 속성에 액세스하는 것과 HtmlCollection의 길이에 액세스하는 것에는 큰 차이가 있습니다. 배열에서는 length가 일반적인 속성이고, 접근 시 추가적인 연산이 수행되지 않습니다. HTMLCollection을 살펴보겠습니다. 우리는 HTMLCollection을 배열로 자주 사용하지만 실제로는 DOM 구조에 따라 자동으로 변경되는 개체입니다. . 물체. HTMLCollection 객체의 속성에 액세스할 때마다 DOM의 모든 노드에서 완전한 일치가 수행됩니다. 즉, HtmlCollection 개체의 길이에 접근할 때마다 컬렉션 개체가 업데이트되므로 성능이 많이 소모됩니다. 따라서 일반적인 상황에서는 이러한 종류의 HtmlCollection 루프 작업에 대한 캐시 길이를 권장합니다.
추가 이득
요소를 배열에 넣는 방법 간의 효율성 비교에 관한 것입니다
코드 보기:

코드 복사

코드는 다음과 같습니다. //방법 1 var arr = []; var start = new Date()

for( var i =0;i<100000;i ){

arr.push(i); 
} 
//방법 2
var arr = [] 
var start = new Date () ; 
for(var i=0;i<100000;i ){ 
arr[arr.length]=i 
} 


어느 것이 더 효율적인지 맞춰보세요! 테스트 후에는 두 번째 방법이 첫 번째 방법보다 더 효율적입니다. 
알림: 
이 버전은 IE5와 호환되지 않습니다. 다음은 내 설명입니다. 
1. 수천 분의 1의 통계를 보면 클릭 수가 너무 많아서 미친 돈 IE5 테스터를 보십시오. IE5에 대한 전문 프로그래머들의 호기심으로 인해 IE5가 타버린 뒤에는 잿더미만 남은 것으로 추정됩니다. 
2. 재의 사용 가치가 0이 되는 경향이 있다고 믿어야 합니다
3. 아직 확신하지 못했다면 이 경우에도 여전히 전문가라고 말하고 싶습니다! IE3, IE2, IE?FF1,NN4..., 모두 구현해야 한다고 생각합니다. 
고백: 별로 설득력이 없습니다. IE5에 대한 해결책을 제시해 보겠습니다. 
IE5는 getElementByTagName("*") 형식을 지원하지 않으므로 여기서 처리해야 합니다. 
var elements = (tagName===='*'&&node.all)?node.all:node.getElementsByTagName(tagName); 
알겠습니다. 말할 것도 없이 이 함수는 간단하고 실용적입니다. 코드 주석을 읽은 후에는 문제가 없을 것입니다.