두 개의 클래스가있는 getElementsByClassName ()
모든 요소를 클래스로 가져 a
오거나 한 번만 b
사용할 getElementsByClassName()
수 있습니까? 바닐라 자바 스크립트를 선호합니다.
쉼표로 구분 된 클래스 선택기와 함께 getElementsByClassName()
메서드를 사용 querySelectorAll()
하는 대신 메서드를 사용할 수 없습니다 .
document.querySelectorAll('.a,.b')
공백으로 구분하여 둘 이상의 클래스 이름을 전달할 수 있습니다getElementsByClassName()
.
var elems = document.getElementsByClassName("class1 class2 class3");
이제 이것은 "or"대신 "and" 라는 분리가 아닌 접속사를.querySelectorAll(".class1,.class2,.class3")
적용한다는 점에서 접근 방식 과 다릅니다 . 그러므로
var elems = document.getElementsByClassName("class1 class2 class3");
처럼
var elems = document.querySelectorAll(".class1.class2.class3");
때로는 하나를 원하고 때로는 다른 하나를 원합니다. .querySelectorAll()
훨씬 더 많은 유연성 을 제공 하는 것은 확실히 사실입니다 .
조금 더 지원을 추가하기 위해 다음은 이전 버전의 IE와 호환되고 순수한 바닐라 js를 사용하는 버전입니다.
function getElementsByClassNameOr(root, classNameString) // classNameString like '.a, .b' don't forget the comma separator
{
var arr = [],
rx = new RegExp('(^|[ \n\r\t\f])' + classNameString + '([ \n\r\t\f]|$)'),
elements = root.getElementsByTagName("*");
var elem;
for (i=0 ; i < elements.length ; i++) {
elem = elements[i];
if (rx.test(elem.className)) {
arr.push(elem);
}
}
return arr; // will contain all the elements that have one of the classes in ClassNameString, root can be document or a div.
}
아니요, 한 번의 document.getElementsByClassName()
전화 만으로는 달성 할 수 없습니다 . 이 함수는 첫 번째 인수에 지정된 모든 클래스를 공백으로 구분 된 문자열로 포함하는 요소를 반환 합니다.
두 가지 가능한 해결책이 있습니다. 첫 번째는 document.querySelectorAll()
CSS 선택자를 사용 하는 대신 사용하는 것입니다.
document.querySelectorAll(".a, .b")
두 번째 해결책은 document.getElementsByClassName()
두 번 호출 Array.from()
하고를 사용 하여 결과를 배열로 변환하고을 사용 하여 병합하는 것 Array.prototype.concat()
입니다. 중복을 방지하려면 (예 : 요소에 및 클래스 가 모두있는 경우 ) 해당 배열에서 새 Set 을 만든 다음 .a
b
Array.from()
const classA = Array.from(document.getElementsByClassName("a"))
,classB = Array.from(document.getElementsByClassName("b"))
,result = Array.from(new Set(classA.concat(classB)))
아래 데모를 참조하십시오.
console.log("first solution", document.querySelectorAll(".a, .b"))
const classA = Array.from(document.getElementsByClassName("a"))
,classB = Array.from(document.getElementsByClassName("b"))
,result = Array.from(new Set(classA.concat(classB)))
console.log("second solution", result)
<div class="a"></div>
<div class="b"></div>
<div class="a b"></div>
<div class="c"></div>
첫 번째 솔루션은 배열과 유사한 NodeList
객체를 제공하는 반면 두 번째 솔루션은 배열 만 제공합니다.
참조 URL : https://stackoverflow.com/questions/37255293/getelementsbyclassname-with-two-classes
'Development Tip' 카테고리의 다른 글
numpy 배열의 요소 이동 (0) | 2020.12.29 |
---|---|
Webview는 onReceivedSslError 구현시 Google Play의 보안 경고를 방지합니다. (0) | 2020.12.29 |
Kotlin에서 "수신자"는 무엇입니까? (0) | 2020.12.29 |
Dockerfile에서 WORKDIR의 요점은 무엇입니까? (0) | 2020.12.29 |
다른 div 내에서 두 div를 가로로 배치하는 방법 (0) | 2020.12.29 |