동일한 이름의 여러 클래스 선택
document.querySelectorAll('.tablinks')document.getElementsByClassName('tablinks')tablinks[index]로 동일한 이름의 특정 클래스 선택가능
--
classList
Element.prototype.classList 프로퍼티는 class 어트리뷰트의 정보를 담은 DomTokenList 객체를 반환한다.
클래스만들기
var newDiv = document.createElement("div"); //div태그만들기
newDiv.id = 'modal-content_newScenario'; //div태그의 아이디는~로 설정
document.body.insertBefore(newDiv, document.body.lastChild); //body끝에 위치
클래스 스타일추가, 제거
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li id="active" class="marked current">Javascript</li>
<!-- <input type="button" value="darkbtn" id="darkbtn"> -->
</ul>
<script>
var a = document.querySelector('#active')
console.log(a.classList[0])
console.log(a.classList[1])
for(var i = 0; i<a.classList.length; i++){
console.log(a.classList[i])
}
// < li id = "active" class="marked current important" > Javascript</li >
console.log(a.classList.add('important'))
// < li id = "active" class="marked current" > Javascript</li >
console.log(a.classList.remove('important'))
</script>
</body>
</html>classList.add('active')대신에 classList += active도 가능
있으면 없애고 없으면 만들고
a.class.toggle('important')
있는지 없는지(true, false)
classList.contains('active')
대체
classList.replace(' active', '')
classList.item
반응형
'Frontend > dom' 카테고리의 다른 글
| checkbox, button, input select (0) | 2021.05.12 |
|---|---|
| attribute로 속성 조정하기(+jquery attr) (0) | 2021.05.09 |
| 제어대상찾기(querySelector, querySelectorAll) (0) | 2021.05.09 |
| dom제어 기초(inline vs script태그)+toggle (0) | 2021.05.09 |
| insertAdjacentHtml(position, text), parentNode (0) | 2020.10.09 |
