JavaScript에서 특정 요소에 지정된 클래스가 있는지 확인하는 방법은 무엇입니까?

개요

특정 작업을 수행하려면 먼저 클래스나 ID로 해당 특정 요소에 액세스해야 하므로 해당 요소에 액세스하기 전에 해당 특정 요소에 클래스가 존재하는지 확인합니다. classList 객체에는 JavScript의 내장 메서드 classList.contains()가 포함되어 있습니다. 이 메소드는 주어진 요소가 지정된 클래스에 속하는지 여부를 확인합니다. 먼저 getElementById(), getElementsByClassName() 또는 기타 메소드를 통해 요소에 액세스해야 하기 때문에 전체 프로세스가 발생합니다. 액세스한 후 classList.contains() 메서드를 사용하여 클래스를 확인해야 합니다.

문법

이 질문에 사용된 구문은 -

• classList - 특정 요소에 포함된 클래스 배열을 받는 JavaScript의 개체입니다.

• contains - 지정된 클래스가 지정된 요소에 존재하는지 확인하는 classList 객체의 메서드입니다.

• className - 주어진 요소에서 검색해야 하는 지정된 이름입니다.

알고리즘

• 1단계 - body 태그 안에 HTML 요소를 만듭니다. 각 요소에 일부 클래스를 할당합니다.

• 2단계 - HTML 버튼에 onclick() 이벤트 메소드를 지정합니다.

• 3단계 - JavaScript 화살표 함수를 만듭니다. HTML에 액세스하여 변수에 저장합니다.

• 4단계 - classList 객체의 Contains() 메서드를 사용합니다. 변수를 Contains() 메서드에 인수로 전달합니다.

• 5단계 - true를 반환하면 특정 클래스가 HTML 요소에 존재하는 것이고, 그렇지 않으면 false를 반환하면 특정 클래스가 요소에 존재하지 않는 것입니다.

예 1: 요소에 지정된 클래스가 포함된 경우

body 태그에 클래스 이름이 포함된 "

" 태그를 사용했습니다. class = "my-para first lorems"이므로 이것이 클래스 이름입니다. 우리의 임무는 요소가 지정된 요소를 포함하고 있는지 확인하는 것입니다. 이를 위해 classList 객체의 메소드인 contain() 메소드를 사용합니다. 따라서 확인하려는 클래스는 클래스의 확실성을 확인하는 "contains()" 메서드에 매개변수로 전달됩니다.

위 예제의 출력은 "요소에 지정된 클래스가 포함되어 있음"의 출력이 true이기 때문입니다.

예 2: 요소에 지정된 클래스가 포함되어 있지 않은 경우

아래 이미지에는 "요소에 지정된 클래스가 포함되어 있지 않습니다."가 표시됩니다. 이는 classList.contains()를 확인할 때 false를 반환했음을 의미합니다. 따라서 오류 조건이 종료되었습니다.

결론

classList의 반환 유형은 배열 유형인 DOMTokenList입니다. 여기에는 특정 요소에 존재하는 클래스 목록이 포함됩니다. DOMTokenList는 for 루프나 맵을 사용하여 반복하여 볼 수 있습니다.

"contains()" 메서드는 true 또는 false인 부울 결과를 반환합니다. classList 객체에는 클래스 배열이 포함되어 있습니다. 따라서 Contains() 메서드가 지정된 클래스를 확인할 때 DOMTokenList를 확인하고 이를 대신하여 결정을 내린 다음 true 또는 false를 반환합니다.

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