Jade_o.o
[javascript] JavaScript DOM - 클래스 관련 메소드, 속성 변경 메소드 본문
JavaScript 클래스 관련 메소드에 대해 알아보기
먼저 전체 html, css 코드를 살펴보고 브라우저로 실행된 콘솔창도 함께 보자
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM class</title>
<style>
.box {
width: 100px;
height: 100px;
border: 1px solid black;
}
#green {
background-color: green;
}
#red {
background-color: red;
}
.d-none {
display: none;
}
</style>
</head>
<body>
<div class = "container">
<div class="box" id="green">1</div>
<div class="box" id="red">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
</div>
<button onclick="addClass()">addClass</button>
<button onclick="removeClass()">removeClass</button>
<button onclick="containsClass()">containsClass</button>
<button onclick="toggleClass()">toggleClass</button>
<hr/>
<input type="text" id="userName">
<script>
</script>
</body>
</html> // 클래스 관련 메소드
let greenBox = document.getElementById('green');
addClass() : 클래스 추가
// 클래스 추가
function addClass() {
greenBox.classList.add('box1');
console.log(greenBox.classList);
}
// html 코드
<div class = "container">
<div class="box" id="green">1</div>
<div class="box" id="red">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
</div>
<button onclick="addClass()">addClass</button>
<button onclick="removeClass()">removeClass</button>
<button onclick="containsClass()">containsClass</button>
<button onclick="toggleClass()">toggleClass</button>
<hr/>
<input type="text" id="userName">html 코드와 함께 보면 addClass button을 누르면
console.log에 2개의 배열로 데이터가 들어가 있음을 확인 할 수 있다.
removeClass() : 클래스 삭제
// 클래스 삭제
function removeClass() {
greenBox.classList.remove('box1');
console.log(greenBox.classList);
}
// html 코드
<div class = "container">
<div class="box" id="green">1</div>
<div class="box" id="red">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
</div>
<button onclick="addClass()">addClass</button>
<button onclick="removeClass()">removeClass</button>
<button onclick="containsClass()">containsClass</button>
<button onclick="toggleClass()">toggleClass</button>
<hr/>
<input type="text" id="userName">html 코드와 함께 보면 removeClass button을 누르면
console.log에 1개의 배열로 데이터가 들어가 있음을 확인 할 수 있다.
즉 클래스를 삭제하여 1개의 배열만 남았음
containsClass() : 클래스 유무 확인 true / false 반환
// 클래스 유무 확인, true / flase 반환
function containsClass() {
console.log(greenBox.classList.contains('box1'));
}
// html 코드
<div class = "container">
<div class="box" id="green">1</div>
<div class="box" id="red">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
</div>
<button onclick="addClass()">addClass</button>
<button onclick="removeClass()">removeClass</button>
<button onclick="containsClass()">containsClass</button>
<button onclick="toggleClass()">toggleClass</button>
<hr/>
<input type="text" id="userName">html 코드와 함께 보면 containsClass button을 누르면
console.log에 false를 반환함을 확인할 수 있다.
toggleClass() : 클래스가 있으면 제거, 없으면 추가
// 클래스가 있으면 제거, 없으면 추가
function toggleClass() {
greenBox.classList.toggle('d-none');
}
// html 코드
<div class = "container">
<div class="box" id="green">1</div>
<div class="box" id="red">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
</div>
<button onclick="addClass()">addClass</button>
<button onclick="removeClass()">removeClass</button>
<button onclick="containsClass()">containsClass</button>
<button onclick="toggleClass()">toggleClass</button>
<hr/>
<input type="text" id="userName">html 코드와 함께 보면 toggleClass button을 누르면
브라우저창에 1번 글이 작성되어있는 초록색 네모칸이 삭제되었음을 확인 할 수 있다.
placeholder : 속성 변경 메소드
// 속성 변경 메소드
let inputE1 = document.getElementById('userName');
inputE1.setAttribute('placeholder', 'name'); // 변경할려는 속성 값을 두번째 인자에 넣음
inputE1.placeholder = 'name2';
// html 코드
<input type="text" id="userName">
브라우저 가장 밑에 있는 input text칸 ('userName')은 원래 빈칸이였지만
inputE1.setAttribute('placeholder', 'name') 통해 input text칸에 name 글씨가 들어오고,
최종적으로 inputE1.placeholder = 'name2'; 코드를 통해
현 브라우저를 확인하면 알 수 있듯 name2 글씨가 작성되어있음
스타일 속성 기입 : .style
// 스타일 속성도 넣을 수 있음
inputE1.style = 'color:red'
//inputE1.style.color = 'red'; // 다른ver
// html 코드
<input type="text" id="userName">
input text 칸에 글씨 작성 시 빨간색 글씨가 기입됨을 확인 할 수 있다.
'JavaScript' 카테고리의 다른 글
| [javascript] JavaScript DOM - 요소 추가, 삭제 (0) | 2024.01.17 |
|---|---|
| [javascript] JavaScript DOM - 다른 노드 접근하기 (0) | 2024.01.17 |
| [javascript] JavaScript DOM - 요소 다루기, 요소 선택, 요소 추가 (0) | 2024.01.17 |
| [javascript] JavaScript 공부 정리14 - 이벤트 addEventListener (0) | 2024.01.16 |
| [javascript] JavaScript 공부 정리13 - 요소 선택, 요소 다루기, 요소 추가, 요소 삭제 (0) | 2024.01.16 |
'JavaScript' Related Articles
more
