JavaScript DOM 요소에 특정 클래스가 포함되어 있는지 효율적으로 확인하려면 어떻게 해야 합니까?

JavaScript에서 요소에 클래스가 포함되어 있는지 확인

JavaScript에서는 DOM 요소에 클래스가 포함되어 있는지 확인해야 하는 시나리오가 발생할 수 있습니다. 특정 수업. element.className 및 switch 문을 사용하는 현재 접근 방식은 작동할 수 있지만 요소에 여러 클래스가 있는 경우에는 제한이 있습니다.

element.classList.contains() 사용

보다 나은 브라우저 간 호환성을 위해 element.classList.contains()를 활용할 수 있습니다. 메서드:

element.classList.contains(className);

이 메서드는 요소에 지정된 클래스가 있는지 여부를 나타내는 부울을 반환합니다. 모든 주요 브라우저에서 지원됩니다.

indexOf를 사용한 대체 접근 방식

element.classList를 지원하지 않는 레거시 브라우저를 다루는 경우 다음을 수정할 수 있습니다. 기존 indexOf 접근 방식은 다음과 같습니다.

function hasClass(element, className) {
    return (' ' + element.className + ' ').indexOf(' ' + className+ ' ') > -1;
}

이렇게 하면 찾고 있는 클래스가 true인 경우에만 검사가 true를 반환하도록 보장됩니다. 다른 클래스 이름에 포함되어 있지 않습니다.

구현 예

업데이트된 기술을 예에 적용:

var test = document.getElementById("test"),
    classes = ['class1', 'class2', 'class3', 'class4'];

test.innerHTML = "";

for(var i = 0, j = classes.length; i < j; i++) {
    if(hasClass(test, classes[i])) {
        test.innerHTML = "I have " + classes[i];
        break;
    }
}

이 접근 방식으로 사례를 처리합니다. 테스트 요소에 여러 클래스가 있는 경우 해당 순서나 추가 클래스가 있더라도 올바른 클래스가 감지되도록 합니다.

위 내용은 JavaScript DOM 요소에 특정 클래스가 포함되어 있는지 효율적으로 확인하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!