JS의 경우, 새로운 사람은 모두 불평해야한다고 생각합니다. 왜 수업을 통해 요소를 얻을 수있는 방법이 없는지. 더 높은 버전의 브라우저는 이제 getElementsByClassName () 함수를 지원하지만 여전히 낮은 버전의 브라우저와 호환되지 않습니다. 다른 라이브러리를 떠날 때는 여전히 메소드를 직접 캡슐화해야합니다.
방법 1
함수 getByclass1 (부모, cls) {var res = []; // 일치하는 결과를 저장하는 배열 var ele = parent.getElementsByTagName ( '*'); for (var i = 0; i <ele.length; i ++) {if (ele [i] .classname == cls) {res.push (ele [i]); }} return res;}물론 클래스에 값이 하나만 있으면 위의 방법은 괜찮지 만 여러 값이 있으면 문제가 발생합니다.
<div> </div> <div> </div> <cript> getByclass1 (문서, '테스트'); // 첫 번째 div </script> 만 가져옵니다
방법 2
문제가 발생하면 개선하려고 노력할 것입니다. 멀티 클래스 이름의 경우 정기적 인 매칭을 사용하여 클래스 이름이 포함되어 있는지 확인할 수 있으므로 다음과 같은 글쓰기 방법이 나타납니다.
함수 getByclass2 (부모, cls) {var res = []; var reg = new regexp ( '// b' + cls + '// b', 'i'); // 일치 CLS는 독립 단어 var ele = parent.getElementsByTagName ( '*')입니다. for (var i = 0; i <ele.length; i ++) {if (reg.test (ele [i] .classname)) {res.push (ele [i]); }} return res;}이 방법은 괜찮은 것으로 보이며 GetByClass1 ()의 문제를 해결했습니다. 나는 오랫동안 그것을 사용했지만 여전히 숨겨진 버그가 있습니다. 다음 예를 참조하십시오.
<div> </div> <div> </div> <div> </div> <cript> getByclass2 (문서, '테스트'); // 결과는 첫 번째 div이고 세 번째 div </script>입니다.
이론적으로 우리는 첫 번째를 얻어야하지만 예상 한 것과 다릅니다. 이 버그는 다음 코드에서 /b에서 비롯됩니다
var reg = new regexp ( '// b' + cls + '// b', 'i');
먼저 정기적으로 /b의 의미를 살펴 보겠습니다.
/b는 단어의 시작 또는 끝, 즉 단어의 경계를 나타내는 정규 표현식으로 지정된 특수 코드입니다.
간단히 말해서 : /b는 단어와 일치하는 것입니다 (왼쪽 테두리에서 오른쪽 경계까지).
문제는 여기에 있습니다. /b는 문자, 숫자 및 밑줄을 제외한 다른 모든 문자를 경계로 간주합니다. 위의 예에서는 제 3 등급 값이 테스트 박스입니다. /b 일치 할 때 하이픈 (-)은 단어 경계로 간주되므로 세 번째 div 와도 일치합니다.
방법 3
따라서 위의 방법을 추가로 개선해야합니다. 여기서 우리는 stackoverflow에 언급 된 방법을 참조합니다.
JavaScript에서 클래스별로 요소를 얻는 방법?
개선 된 코드는 다음과 같습니다.
함수 getByclass3 (부모, cls) {var res = []; var reg = 새로운 regexp ( '' + cls + '', 'i'); // CLS와 일치 할 때 양쪽에 공백이 있어야합니다. var ele = parent.getElementsByTagName ( '*'); for (var i = 0; i <ele.length; i ++) {if (reg.test ( '' + ele [i] .classname + '')) {res.push (ele [i]); }} return res;}이 방법은 /b의 사용을 포기하고 경계와 일치하는 공간을 사용합니다. 먼저 얻은 클래스 이름 값의 양쪽에 공백을 추가하여 클래스 이름의 각 값의 양쪽에 공백이있을 수 있도록 한 다음 정기적으로 일치시킵니다.
아직이 방법을 사용하는 데 문제가 없었지만이 방법을 사용할 때는 메소드의 단일 인용문 공간을 삭제해서는 안됩니다.
방법 4
함수 getByclass3 (부모, cls) {var res = []; var reg = new regexp ( '(^| // s)' + cls + '($ | // s)', 'i'); var ele = parent.getElementsByTagName ( '*'); for (var i = 0; i <ele.length; i ++) {if (reg.test (ele [i] .classname)) {res.push (ele [i]); }} return res;}공간은 규칙적으로 완전히 처리되어 쉬운 공간이 떨어지는 문제를 제거하고 코드는 더 아름답고 간단합니다.
그렇다면이 방법은 비교적 완벽합니까? 사실, 그렇지 않습니다. 더 나은 솔루션을 살펴 보겠습니다.
방법 5 (Perfect Edition)
기사의 시작 부분에서 언급했듯이, 더 높은 버전의 브라우저는 이미 getElementsByClassName () 메소드를 지원합니다. 성능의 이유로, 지원되는 브라우저에 기본 방법을 사용하는 것이 좋습니다. 하위 버전의 브라우저의 경우 위의 방법 4를 사용하십시오.
function getByClass (부모, cls) {if (parent.getElementsByClassName) {return parent.getElementsByClassName (cls); } else {var res = []; var reg = new regexp ( '' + cls + '', 'i') var ele = parent.getElementsByTagName ( '*'); for (var i = 0; i <ele.length; i ++) {if (reg.test ( '' + ele [i] .classname + '')) {res.push (ele [i]); }} return res; }}물론, 방법 5는 비교적 좋은 솔루션으로 간주됩니다. 더 나은 방법이 있으면 추가 할 메시지를 남겨 두십시오.