javascript getElementsByClassName function_javascript 기술

오늘 인터넷에서 ClassName을 기반으로 요소를 가져오는 스크립트를 보았습니다. 나중에 사용할 수 있도록 여기에 기록해 두었습니다.

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

var getElementsByClassName = function(searchClass, node, tag) {
if (document.getElementsByClassName) {
return document.getElementsByClassName(searchClass)
} else {
node = node || document; ;
var 클래스 = searchClass.split(" "),
elements = (tag === "*" && node.all) ? node.all : node.getElementsByTagName(tag),
patterns = [],
returnElements = [],
current,
match;
var i = class.length;
while (--i >= 0) {
패턴. push(new RegExp("(^|\s)" 클래스[i] "(\s|$)"))
}
var j = elements.length
while(--j; >= 0) {
current = elements[j];
match = false
for (var k = 0, kl = Patterns.length; k < kl; k ) {
일치 = 패턴 [k].test(current.className);
if (!match) break
}
if (match) returnElements.push(current)
}
return returnElements;
}
}

다음은 인터넷에 떠도는 관련 소개들인데 함께 참고하시면 됩니다.

DOM의 GetElementsByClassName은 다음과 같이 설명됩니다. DOM API는 요소를 가져오는 세 가지 방법(getElementById, getElementsByName, getElementsByTagName)을 제공합니다. CSS를 자주 작성하는 사람들은 자연스럽게 질문을 갖게 됩니다. 불행히도 DOM1/2에는 그런 메소드가 없습니다. 프로토타입은 DOM 메소드를 아주 일찍 확장하고 getElementsByClassName을 추가했습니다. 메소드 이름으로 보면 매우 정통적인 것으로 보이며 이전 세 메소드의 이름은 다음과 같습니다. 코드를 분석해봐도 여전히 getElementsByTagName을 통해 구현되는 것으로 나타났습니다. 이 메서드는 모든 요소를 ​​순회하고 요소에 대상 스타일 클래스 이름이 포함되어 있는지 검색하고 조건을 충족하는 요소 배열을 반환해야 하기 때문에 우아하지 않습니다. 검색해 봤지만 더 우아하고 효율적인 대안을 찾을 수 없었습니다.

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

function getElementsByClassName(className, parentElement){
var elems = ($(parentElement)||document.body).getElementsByTagName("*");
var result=[]
for (i=0; j=elems[i]; i ){
if ((" " j.className " ").indexOf(" " className " ")!=-1){
result.push(j)
}
}
결과 반환
}

getElementsByClassName이 있으므로 getElementsByAttribute(예: getElementsByValue, getElementsByStyle, getElementsByType)도 가질 수 있습니다.

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

document.getElementsByClassName = function(className,oBox) {
//특정 클래스를 가져오는 데 적합합니다. HTML 블록에 포함된 className
this.d= oBox || document;
var children = this.d.getElementsByTagName('*')
var elements = new Array();
for (var ii = 0; ii < children.length; ii ) {
var child = children[ii]
var classNames = child.className.split(' ' );
for (var j = 0; j < classNames.length; j ) {
if (classNames[j] == className) {
elements.push(child)
break ;
}
}
}
return elements;
}

document.getElementsByType = function(sTypeValue,oBox) {
//동일한 값을 얻는 데 적합합니다. HTML 블록 내의 콘텐츠 입력, 스크립트, 링크 등과 같은 특정 유형의 모든 HTML 요소
this.d= oBox || document
var children = this.d.getElementsByTagName('* ') || document.all;
var elements = new Array();
for (var ii = 0; ii < children.length; ii ) {
if (children[ii].type == sTypeValue) {
elements.push(children[ii]);
}
}
return elements
}

function $() {
var elements = new Array( );
for (var ii = 0; ii < 인수.길이; ii ) {
var element = 인수[ii]
if (typeof element == 'string ')
element = document.getElementById(element);
if (arguments.length == 1)
return 요소;
elements.push(element)
return 요소;
}

$Cls = 함수(s,o){
return document.getElementsByClassName(s,o)
}; (s,o){
return document.getElementsByType(s,o);
};

$Tag = function (s,o){
this.d=o || document;
return this.d.getElementsByTagName(s);

$Name = function(s){ //name 메소드는 전체 문서에만 사용할 수 있습니다. 제한됨
return document.getElementsByName(s)