HTML 요소에 JavaScript의 특정 클래스가 포함되어 있는지 확실하게 확인하는 방법은 무엇입니까?

JavaScript에서 HTML 요소에 특정 클래스가 포함되어 있는지 확인하는 방법이 있나요?

문제:

JavaScript 초보자는 요소에 특정 항목이 포함되어 있는지 확인하기 위해 className 속성 비교에 의존하는 경우가 많습니다. 수업. 그러나 요소에 여러 클래스가 있고 원하는 클래스가 하나만 존재하지 않는 경우 이 접근 방식은 실패합니다.

해결책:

이 문제를 해결하기 위해 JavaScript는 다음을 제공합니다. classList 속성과 포함 메소드. classList 속성은 요소에 적용된 클래스 목록을 반환하고, Contains 메서드는 해당 목록에 특정 클래스가 포함되어 있는지 확인합니다.

const element = document.getElementById("test");
const hasClass1 = element.classList.contains("class1");

이 접근 방식은 요소에 존재하는 클래스 수에 관계없이 안정적으로 작동합니다. element.

대체 접근 방식:

classList가 대상에서 지원되지 않는 경우 브라우저에서는 indexOf 함수를 활용하는 대체 방법을 사용할 수 있습니다:

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

구현:

질문에 제공된 예에 이 접근 방식을 적용하려면 다음 코드가 포함된 원본 스위치 문:

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

element.textContent = "";

for (let i = 0; i < classes.length; i++) {
  if (element.classList.contains(classes[i])) {
    element.textContent = `I have ${classes[i]}`;
    break;
  }
}

이 코드는 예상 클래스를 반복하고 존재하는 첫 번째 클래스를 표시합니다. 요소에.

위 내용은 HTML 요소에 JavaScript의 특정 클래스가 포함되어 있는지 확실하게 확인하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!