Development Tip

두 개의 클래스가있는 getElementsByClassName ()

yourdevel 2020. 12. 29. 08:02
반응형

두 개의 클래스가있는 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 을 만든 다음 .abArray.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

반응형