자바스크립트에서 특정 태그내
1. 여러개의 클래스 명 가져오기 - 태그명.classList
(반환값 : 리스트로 반환 ['클래스1','클래스2','클래스3',value : '클래스1 클래스2 클래스3'])
2. 클래스 리스트 중 포함여부 확인 - 태그명.classList.contains(찾는 클래스명)
(반환값 : true, false)
3. 클래스 추가 - 태그명.classList.add(추가할 클래스명)
(반환값 : 없음)
4. 클래스 삭제 - 태그명.classList.remove(삭제할 클래스명)
(반환값 : 없음)
5. 클래스 토글 - 태그명.classList.toggle(없으면 추가, 있으면 삭제할 클래스명)
(반환값 : true, false)
샘플 예제 ↓
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test</title>
</head>
<body>
<div id="classList-sample" class="contains add remove toggle">Javascript ClassList 예제</div>
</body>
</html>
1. 클래스 리스트 가져오기
//해당 태그 SELECT
var divTag = document.querySelector('#classlist-sample');
//태그 내 클래스 목록 GET (.classList)
var class_list = divTag.classList;//리스트 형식 리턴
console.log(class_list);
결과 : ['contains', 'add', 'remove', 'toggle', value : 'contains add remove toggle']
2. 클래스 추가하기
//해당 태그 SELECT
var divTag = document.querySelector('#classlist-sample');
//태그 내 클래스 목록 GET (.classList)
var class_list = divTag.classList;
//태그 내 클래스 추가 (.add(추가원하는 클래스이름))
class_list.add('add-class');
console.log(class_list);
결과 : ['contains', 'add', 'remove', 'toggle', 'add-class' , value : 'contains add remove toggle add-class']
3. 클래스 삭제하기
//해당 태그 SELECT
var divTag = document.querySelector('#classlist-sample');
//태그 내 클래스 목록 GET (.classList)
var class_list = divTag.classList;
//태그 내 클래스 삭제 (.remove(삭제 원하는 클래스이름))
class_list.remove('toggle');
console.log(class_list);
결과 : ['contains', 'add', 'remove' , value : 'contains add remove']
4. 클래스 토글
//해당 태그 SELECT
var divTag = document.querySelector('#classlist-sample');
//태그 내 클래스 목록 GET (.classList)
var class_list = divTag.classList;
//태그 내 클래스 toggle (.toggle(없다면 추가, 있다면 삭제))
class_list.toggle('selected');
console.log(class_list);
//태그 내 클래스 toggle (.toggle(없다면 추가, 있다면 삭제))
class_list.toggle('selected');
console.log(class_list);
결과 : ['contains', 'add', 'remove', 'toggle' , 'selected' , value : 'contains add remove toggle selected']
['contains', 'add', 'remove', 'toggle' , value: 'contains add remove toggle']
'프론트엔드 > Javascript' 카테고리의 다른 글
| [Javascript] 기본 이벤트 삭제 event.preventDefault() (0) | 2021.02.01 |
|---|---|
| [Javascript] 노드복사 importNode (3) | 2021.02.01 |
| [Javascript] 부모 태그 찾기 .parentElement (0) | 2021.01.31 |
| [Javascript] 이벤트 Event (0) | 2021.01.31 |
| [Javascript] Wrapping Class (래핑 클래스) (0) | 2021.01.29 |
댓글