안녕하세요 오늘은 저번 글에 이어
자바스크립트 중 클래스 이름을 이용하여
속성을 바꾸는 방법을 알아보겠습니다.
클래스를 가지고 자바스크립트로 가져오는 방법은 저번 글을 참고해주세요
https://didimdol20.tistory.com/76?category=1032931
javascript / 버튼 가져오기 / 버튼 클릭시 동작/ getElementByClassName / 클래스로 자바스크립트 에서 사
안녕하세요 오늘은 HTML에 작성된 태그를 클래스 이름으로 가져와서 자바스크립트에서 사용하는 방법을 알아보겠습니다. 다른 글 찾아보면서 이해하면서 하는 게 실력은 늘 테지만, 설명 글은
didimdol20.tistory.com
먼저 간단하게 만든 HTML 구조입니다.
이번에는 바로 js 파일을 연동시켜 놓은 상태입니다.
<!DOCTYPE html>
<html lang="ko">
<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>
<p class="text">안녕하세요</p>
<button class="btn">버튼</button>
<script src="blog.js"></script>
</body>
</html>
버튼을 클릭하게 되면 안녕하세요라는 글자가
반갑습니다로 변경하게 해 보겠습니다.
var btn = document.getElementsByClassName("btn")[0];
var text = document.getElementsByClassName("text")[0];
btn.addEventListener("click",function(){
text.textContent = "반갑습니다.";
});
이렇게 먼저 text를 만들어준 다음 아래에서 textContent를 이용하는 방법이 있습니다.
이 외에도 짧은 코드에서 확인이 가능하다면
text라는 변수를 만들 필요 없이 바로도 가능합니다.
var btn = document.getElementsByClassName("btn")[0];
btn.addEventListener("click",function(){
document.getElementsByClassName("text")[0].textContent = "반갑습니다.";
});
이렇게 버튼을 클릭하게 되면 '반갑습니다.'로 바뀌는 것을 확인하실 수 있습니다.
정리
- 변경하고자 하는 글에 클래스를 붙인 다음 자바스크립트 파일에 getElementsByClassName을 통해 가져옵니다.
- 이후 버튼 클릭시 변경하고자 하는 글에 위에서 선언한 변수를 가져온 다음 textContent를 이용하여 변경합니다.
ex) 변수명.textContent = "고칠 말";
- 또는 다음과 같이 변수를 선언하지 않고도 가능합니다.
ex) document.getElementsByClassName("클래스명")[0].textContent = "반갑습니다.";
감사합니다.
'프로그래밍 > JavaScript' 카테고리의 다른 글
| javascript / 자바스크립트 / textContent innerHTML value 차이 (0) | 2021.08.22 |
|---|---|
| javascript / 자바스크립트 아이디로 가져오기 / 아이디로 텍스트 변경하기 / getElementById / innerHTML / textContent (0) | 2021.08.22 |
| javascript / 글자 바꾸는 법 / innerHTML / <HTML> 태그 넣기 (0) | 2021.08.18 |
| javascript / 버튼 가져오기 / 버튼 클릭시 동작/ getElementByClassName / 클래스로 자바스크립트 에서 사용하기 (0) | 2021.08.16 |
| 주말에 뭐할까? / 주말에 뭐할지 테스트 질문을 통한 추천 /HTML Javascript (0) | 2021.07.02 |