웹 페이지를 개발할 때 대부분의 경우 동일한 클래스 이름, 즉 동일한 클래스의 요소를 가진 요소를 작동해야합니다. 어제 서면 시험을 보았고 관련 질문에 대답하지 않았습니다.
JavaScript 페이지에서 클래스 테스트가있는 노드를 가져옵니다.
그래서 나는 관련 정보를 수집하고 더 나은 두 가지 방법을 나열했습니다. 단점도 필요합니다. 나는 모두가 그들을 비판하고 수정하기를 바랍니다. 더 나은 방법이 있다면 공유 할 수 있기를 바랍니다.
솔루션 1 Jeremy Keuth 솔루션
Jeremy Keuth 삼촌은 "JavaScript Dom Programming Art"(2nd Edition) (English : JavaScript 및 Document Object Model)의 세 번째 및 네 번째 섹션에서 GetElementsByclass 메소드에 대해 이야기 했으며이 속성을 지원하지 않는 브라우저 에이 방법을 적용하는 방법에 대해 이야기했습니다 (IE6, IE7 및 IE8, Desp Fise 8, Despise). 발췌문이 여기에 있으며 어떤 곳에서는 수정이 있습니다.
새로운 메소드가 HTML5 DOM에 추가되어 클래스 속성의 클래스 이름을 통해 요소에 액세스 할 수 있습니다. 이 방법은 비교적 새롭기 때문에 일부 DOM 구현에는 아직 포함되지 않으므로 사용할 때주의하십시오. 먼저이 방법이 우리에게 도움이 될 수있는 것을 살펴 보고이 방법을 안정적으로 사용하는 방법에 대해 논의합시다.
getElmentsByTagName 메소드와 유사하게 GetElementsByClassName은 클래스 이름 인 하나의 매개 변수 만 허용합니다.
코드 사본은 다음과 같습니다.
getElementsByClassName (클래스)
이 메소드의 반환 값은 getElementsByTagName과 유사합니다. 둘 다 동일한 클래스 이름을 가진 요소 배열입니다. 다음 줄의 코드는 클래스 이름 "Sale"의 모든 요소를 포함하는 배열을 반환합니다.
코드 사본은 다음과 같습니다.
document.getElementsByClassName ( "판매")
이 방법을 사용하여 여러 클래스 이름의 요소를 찾으십시오. 여러 클래스 이름을 지정하려면 문자열 매개 변수의 공백으로 클래스 이름을 분리하십시오. 예를 들어 <Script> 태그에 다음 코드 줄을 추가하십시오.
코드 사본은 다음과 같습니다.
Alert (document.getElementsByClassName ( "판매 중요"). 길이);
완전한 코드
코드 사본은 다음과 같습니다.
<! doctype html>
<html>
<헤드>
<meta charset = "utf-8">
<title> 쇼핑 목록 </제목>
</head>
<body>
<H1> 무엇을 사야하는지 </h1>
<p>이 물건을 사는 것을 잊지 마십시오. </p>
<ul id = "구매">
<li> 얇은 콩 </li>
<li> 치즈 </li>
<li> 우유 </li>
</ul>
<cript>
Alert (document.getElementsByClassName ( "판매 중요"). 길이);
</스크립트>
</body>
</html>
경고 상자에 1이 표시되며, 하나의 요소 만 "중요한"및 "판매"클래스 이름을 모두 갖기 때문에 하나의 요소 만 일치 함을 나타냅니다. 요소의 클래스 속성에서도 클래스 이름의 순서는 매개 변수에 지정된 "중요한 판매"보다는 "판매"입니다. 여전히 요소와 일치합니다. 실제 클래스 이름의 실제 순서는 중요하지 않을뿐만 아니라 요소에 클래스 이름이 더 많은 경우에도 중요하지 않습니다. getElmentsByTagName을 사용하는 것과 같이 getElementsByClassName 및 GetElementById를 조합하여 사용할 수도 있습니다. ID 구매가있는 요소에 몇 개의 클래스 이름이 테스트 목록 항목이 포함되어 있는지 알고 싶다면 먼저 해당 특정 객체를 찾은 다음 getElementsByClassName을 호출 할 수 있습니다.
코드 사본은 다음과 같습니다.
var 쇼핑 = document.getElementById ( "구매");
var sales = shopping.getElementsByClassName ( "판매");
이러한 방식으로 판매 배열에는 "구매"목록에있는 "판매"클래스가있는 요소 만 포함되어 있습니다. 다음 코드 줄을 실행하면 판매 배열에 두 가지 항목이 포함되어 있음을 알 수 있습니다.
코드 사본은 다음과 같습니다.
경고 (Sales.Length);
이 getElmentsByClassName 메소드는 매우 유용하지만 최신 브라우저 (Safari 3.1, Chorme, Firefox 3 및 Opera 9.5 이상) 만 지원합니다. 이 단점을 보충하기 위해 DOM 스크립트 프로그래머는 기존 DOM 메소드를 사용하여 자신의 GetElementsByClassName을 구현해야합니다. 이는 다가오는 선물과 비슷합니다. 대부분의 경우 구현 프로세스는 다음 getElementsByClassName과 거의 유사하며, 이는 새롭고 오래된 브라우저에 적용 할 수 있습니다.
코드 사본은 다음과 같습니다.
함수 getElementsByClassName (노드, 클래스 이름) {
if (node.getElementsByClassName) {
return node.getElementsByClassName (className);
}또 다른{
var results = [];
var elems = node.getElementsByTagName ( "*");
for (var i = 0; i <elems.length; i ++) {
if (elems [i] .classname.indexof (classname)! = -1) {
결과 [results.length] = elems [i];
}
}
반환 결과;
}
}
getElementsByClassName 함수는 두 매개 변수를 수락합니다. 첫 번째 노드는 DOM 트리의 검색 시작점을 나타내고 두 번째 클래스 이름은 검색 할 클래스 이름입니다. 적절한 getElementsByClassName 함수가 들어오는 노드에 이미 존재하는 경우이 새 함수는 해당 노드 목록을 직접 반환합니다. getElementsByClassName 함수가 존재하지 않으면 새 함수는 모든 태그를 통과하고 해당 클래스 이름의 요소를 찾습니다.
이 방법의 단점은 여러 클래스 이름에 적용되지 않는다는 것입니다.
이 기능을 사용하여 쇼핑 목록을 얻는 이전 작업을 시뮬레이션하는 경우 다음과 같이 쓸 수 있습니다.
코드 사본은 다음과 같습니다.
var 쇼핑 = document.getElementById ( "구매");
var sales = shopping.getElementsByClassName (쇼핑, "테스트");
Console.log (판매);
따라서 기사의 시작 부분에서 문제를 해결하기 위해 사용 된 코드는 다음과 같습니다.
코드 사본은 다음과 같습니다.
<! doctype html>
<html>
<헤드>
<meta charset = "utf-8">
<title> 쇼핑 목록 </제목>
</head>
<body>
<H1> 무엇을 사야하는지 </h1>
<p>이 물건을 사는 것을 잊지 마십시오. </p>
<ul id = "구매">
<li> 얇은 콩 </li>
<li> 치즈 </li>
<li> 우유 </li>
</ul>
<cript>
함수 getElementsByClassName (노드, 클래스 이름) {
if (node.getElementsByClassName) {
return node.getElementsByClassName (className);
}또 다른{
var results = [];
var elems = node.getElementsByTagName ( "*");
for (var i = 0; i <elems.length; i ++) {
if (elems [i] .classname.indexof (classname)! = -1) {
결과 [results.length] = elems [i];
}
}
반환 결과;
}
}
var body = document.getElementsByTagName ( "body") [0];
var sales = getElementsByClassName (Body, "Sales");
Console.log (판매);
</스크립트>
</body>
</html>
솔루션 2 Robert Nyman 솔루션
일치하는 DOM 요소를 검색하는 방법에는 여러 가지가 있지만 실제로는 효율적이지 않습니다. Jeremy Keuth 삼촌의 방법의 한 가지 단점은 여러 클래스 이름에 사용할 수 없다는 것입니다. 2008 년 Robert Nyman은 ANNO 2008의 Ultimate GetElementsByclassName 기사에서 자신의 솔루션을 제공했습니다. 2005 년 Robert 삼촌은 이미 GetElementsByClassName 기능을 제공했습니다. 2008 년에 그는 일부 코드를 수정하고 많은 새로운 기능을 추가했습니다.
1. 현재 브라우저가 getElementsByClassName 함수를 지원하는 경우 기본 함수가 호출됩니다.
2. 현재 브라우저가 지원하는 경우 xpath를 사용하십시오. // Xiaofeiyu : 브라우저에 내장 된 XML 문서를 찾는 강력한 방법이지만 브라우저 지원은 통합되지 않았습니다.
3. 순서에 관계없이 여러 클래스 이름을 검색합니다.
4. 기본 노드가 아닌 실제 노드 어레이를 반환합니다. // Xiaofeiyu : 기본 getElementsByClassName 메소드는 길이 및 숫자 인덱스 특성이있는 배열과 매우 유사하지만 배열은 아니며 POP 및 PUSH와 같은 배열 별 메소드를 사용할 수는 없습니다. Robert가 제공 한 코드에서 Nodelist 객체는 배열로 변환됩니다. Nodelist 객체를 배열로 변환 할 수있는 방법 :
코드 사본은 다음과 같습니다.
mylist = array.prototype.slice.call (mynodelist)
이것은 로버트 삼촌의 방법입니다. 아직 이해하지 못한 것들을 이해하지 못합니다. 공부 한 후에는 업데이트하겠습니다.
코드 사본은 다음과 같습니다.
/*
Robert Nyman, http://www.robertnyman.com에 의해 개발되었습니다
코드/라이센스 : http://code.google.com/p/getelementsbyclassname/
*/
var getElementsByClassName = function (className, tag, elm) {
if (document.getElementsByClassName) {
getElementsByClassName = function (className, tag, elm) {
elm = elm || 문서;
var elements = elm.getElementsByClassName (className),
nodename = (태그)? new regexp ( "// b" + tag + "// b", "i") : null,
returnElements = [],
현재의;
for (var i = 0, il = elements.length; i <il; i+= 1) {
전류 = 요소 [i];
if (! nodename || nodename.test (current.nodename)) {
returnElements.push (현재);
}
}
반환 returnElements;
};
}
else if (document.evaluate) {
getElementsByClassName = function (className, tag, elm) {
태그 = 태그 || "*";
elm = elm || 문서;
var classment = classname.split ( ""),
classestocheck = "",
xhtmlnamespace = "http://www.w3.org/1999/xhtml",
namespaceresolver = (document.documentElement.namespaceuri === xhtmlnamespace)? xhtmlnamespace : null,
returnElements = [],
강요,
마디;
for (var j = 0, jl = classs.length; j <jl; j+= 1) {
classestocheck + = "[concat ( '', @class ',' '),' + classe [j] +" ') ";
}
노력하다 {
elements = document.evaluate ( ".//" + tag + classestocheck, elm, namespaceresolver, 0, null);
}
캐치 (e) {
elements = document.evaluate ( ".//" + tag + classestocheck, elm, null, 0, null);
}
while ((node = elements.iteratenext ())) {
returnElements.push (노드);
}
반환 returnElements;
};
}
또 다른 {
getElementsByClassName = function (className, tag, elm) {
태그 = 태그 || "*";
elm = elm || 문서;
var classment = classname.split ( ""),
classestocheck = [],
elements = (tag === "*"&& elm.all)? Elm.All : Elm.GetElementsByTagName (TAG),
현재의,
returnElements = [],
성냥;
for (var k = 0, kl = classs.length; k <kl; k+= 1) {
classestocheck.push (new regexp ( "(^| // s)" + classe [k] + "(// s | $)");
}
for (var l = 0, ll = elements.length; l <ll; l+= 1) {
current = 요소 [l];
매치 = 거짓;
for (var m = 0, ml = classestocheck.length; m <ml; m+= 1) {
match = classestocheck [m] .test (current.className);
if (! match) {
부서지다;
}
}
if (일치) {
returnElements.push (현재);
}
}
반환 returnElements;
};
}
return getElementsByClassName (className, tag, elm);
};