이 문서에서는 JavaScript를 사용하여 본문에 특정 클래스가 있는지 확인하는 방법을 보여줍니다.
JavaScript를 사용하여 본문에 특정 클래스가 있는지 확인하는 방법은 무엇입니까?
본문에 JavaScript를 사용하여 특정 클래스가 있는지 확인하려면 다음 접근 방식을 적용하십시오.
- “ 클래스리스트 ' 재산 및 ' 포함() ' 방법.
- “ getElementsByTagName() ' 그리고 ' 성냥() 방법.
- “ jQuery '.
각 접근 방식을 하나씩 설명하겠습니다!
접근법 1: classList 속성 및 contains() 메서드를 사용하여 본문에 JavaScript의 특정 클래스가 있는지 확인
“ 클래스리스트 ” 속성은 요소의 CSS 클래스 이름을 제공합니다. 반면 “ 포함() ” 메서드는 노드가 자손인 경우 true를 제공합니다. 결합된 이러한 메서드를 적용하여 연결된 요소에 포함된 클래스에 액세스할 수 있습니다.
통사론
마디. 포함 ( 적나라한 )
위 구문에서:
- “ 적나라한 ”는 연결된 노드의 노드 자손에 해당합니다.
예시
아래 주어진 예에 대한 개요를 살펴보겠습니다.
< 센터 >< 신체 수업 = '포함하다' >
< h2 > 리눅스힌트 홈페이지입니다 h2 >
센터 > 신체 >
< 스크립트 유형 = '텍스트/자바스크립트' >
만약에 ( 문서. 신체 . 클래스리스트 . 포함 ( '포함하다' ) ) {
콘솔. 통나무 ( '본체 요소에 클래스가 있습니다' ) ;
}
또 다른 {
콘솔. 통나무 ( '본문 요소에 클래스가 없습니다' ) ;
}
스크립트 >
위의 코드에 제공된 대로 아래에 설명된 단계를 적용합니다.
- 먼저 '를 포함하십시오. <몸> ” 속성이 설정된 요소 “ 수업 '.
- 또한 특정 요소( ) 내에 표제를 추가합니다.
- JS 코드에서 ' 클래스리스트 '와 결합된 속성 포함() ' 방법.
- 이는 결과적으로 연결된 '의 클래스에 액세스합니다. <몸> ” 메소드의 매개변수에 지정된 클래스 이름을 기반으로 하는 요소.
- 조건이 만족되면 ' 만약에 ” 조건이 실행됩니다.
- 반대로 “ 또 다른 ” 명령문 코드 블록이 실행됩니다.
산출
위의 출력에서 특정 클래스가 ' <몸> ' 요소.
접근법 2: getElementsByTagName() 및 match() 메서드를 사용하여 JavaScript에서 본문에 특정 클래스가 있는지 확인
“ getElementsByTagName() ” 메서드는 특정 태그 이름을 가진 모든 요소의 컬렉션을 제공합니다. “ 성냥() ” 메서드는 지정된 값을 문자열과 일치시킵니다. 이러한 메서드는 태그로 필요한 요소에 액세스하고 특정 클래스를 확인하는 데 활용할 수 있습니다.
통사론
문서. getElementsByTagName ( 꼬리표 )제공된 구문에서:
- “ 꼬리표 ”는 요소의 태그 이름을 나타냅니다.
예시
다음 예에서는 논의된 개념을 보여줍니다.
< img src = '템플릿2.png' 키 = '150픽셀' 너비 = '150픽셀' >
센터 > 신체 >
< 스크립트 유형 = '텍스트/자바스크립트' >
허락하다 가져 오기 = 문서. getElementsByTagName ( '신체' ) [ 0 ] . 클래스 이름 . 성냥 ( /포함/ )
만약에 ( 가져 오기 ) {
콘솔. 통나무 ( '본체 요소에 클래스가 있습니다' ) ;
}
또 다른 {
콘솔. 통나무 ( '본문 요소에 클래스가 없습니다' ) ;
}
스크립트 >
위의 코드 조각에서:
- 마찬가지로 ' <몸> ” 지정된 클래스를 갖는 요소.
- 또한 이전 단계에서 명시된 요소 내에 설정된 크기의 이미지를 포함합니다.
- JavaScript 코드 라인에서 ' <몸> ” 요소를 ' getElementsByTagName() ' 방법.
- “ [0] ”는 이전 단계에서 명시된 태그에 해당하는 첫 번째 요소를 가져올 것임을 나타냅니다.
- “ 클래스 이름 ” 재산 및 “ 성냥() ' 메소드는 ' <몸> ' 요소.
- '에서 이전 진술 만약에 ” 조건은 이전 단계의 모든 조건이 충족될 때 실행됩니다.
- 그렇지 않으면 후자의 설명이 표시됩니다.
산출
위의 출력은 특정 클래스에 대해 적용된 조건이 충족되었음을 나타냅니다.
접근법 3: jQuery를 사용하여 Body에 JavaScript의 특정 클래스가 있는지 확인
이 접근 방식은 필요한 요소에 직접 액세스하고 해당 메서드의 도움으로 해당 요소에 대한 특정 클래스를 찾기 위해 구현할 수 있습니다.
예시
아래 주어진 예를 살펴 보겠습니다.
< 센터 >< 신체 수업 = '포함' >
< 텍스트 영역 자리 표시자 = '텍스트를 입력하세요...' > 텍스트 영역 >
센터 > 신체 >
만약에 ( $ ( '신체' ) . hasClass ( '포함' ) ) {
알리다 ( '본체 요소에 클래스가 있습니다' )
}
또 다른 {
알리다 ( '본문 요소에 클래스가 없습니다' )
}
스크립트 >
위의 코드 줄에서:
- '를 포함 jQuery ” 라이브러리의 기능을 활용합니다.
- 마찬가지로 ' <몸> ” 명시된 클래스를 갖는 요소.
- 또한 ' <텍스트 영역> ” 이전 단계에서 명시된 요소 내의 요소.
- JS 코드에서 ' <몸> ' 요소. 또한 ' hasClass() ” 메서드를 사용하여 가져온 요소에서 명시된 클래스를 검색합니다.
- 결과적으로 만족된 조건에 대해 이전 메시지에 경고합니다.
- 다른 경우에는 후자의 문이 표시됩니다.
산출
위의 결과는 원하는 요구 사항이 달성되었음을 의미합니다.
결론
“ 클래스리스트 ' 재산 및 ' 포함() ” 방법, “ getElementsByTagName() ' 그리고 ' 성냥() ' 방법 또는 ' jQuery ”는 JavaScript를 사용하여 본문에 특정 클래스가 있는지 확인하는 데 사용할 수 있습니다. 이러한 접근 방식은 해당 요소를 직접 참조하거나 해당 태그를 사용하거나 jQuery 메서드를 사용하여 요소 내의 특정 클래스를 검색하는 데 활용할 수 있습니다. 이 블로그는 자바스크립트에서 본문에 특정 클래스가 있는지 확인하는 방법에 대해 설명했습니다.