안녕하세요 오늘은 HTML에 작성된 태그를 클래스 이름으로 가져와서
자바스크립트에서 사용하는 방법을 알아보겠습니다.
다른 글 찾아보면서 이해하면서 하는 게 실력은 늘 테지만,
설명 글은 저보다 더 잘해주셔서 저는
그래서 무작정 해보는 걸로 작성하겠습니다.
혹시나 저처럼 일단 사용하는 것만 궁금하신 분이 있으시다면
도움이 되었으면 좋겠습니다.
혹시라도 빠르게 결과와 정리만 필요하시다면 아래를 정리를 봐주세요
먼저 HTMl 코드입니다.
<!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>
<button class="btn">버튼</button>
</body>
</html>
간단하게 버튼만 작성된 코드입니다.
아직 버튼 태그 외에 다른 것은 추가를 안 했기에 저렇게 휑하게 버튼 하나만 있습니다.
자 그럼 자바스크립트 코드로 가보겠습니다.
버튼을 클릭 시에 동작하기 위해서 document.getElementByClassName을 통해 가져와야 합니다.
해당 방법을 이용해서 가져오는 방법은 다양하나 저는 예시로 하나를 들도록 하겠습니다.
var btn = document.getElementsByClassName("btn")[0];
btn.addEventListener("click",function(){
alert("버튼 클릭");
})
이렇게 하시게 되면 비유가 완벽하지는 않으나 전혀 모르시는 분들에게
설명을 드리자면 button에 있는 클래스 이름을 통해 자바스크립트에서 연동되었다고
생각하시면 될 것 같습니다.
(다시 한번 말씀드리지만 초보자 분들이 이해하기 쉽게 비유한 것입니다. 적절한 비유는 아닙니다.)
클래스 이름으로 가져올 시에는 document.getElementByClassName 것을 사용하게 되는데
반드시 뒤에 [0]을 붙여주셔야 합니다.
즉,
document.getElementByClassName["클래스이름"][0];
이렇게 해주시면 됩니다.
하지만 이렇게 작성했다고 해서 바로 실행은 되지 않습니다.
html에 코드에서 자바 스크립트를 연동시켜주지 않았기 때문입니다.
<!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>
<button class="btn">버튼</button>
<script src="blog.js"></script>
</body>
</html>이렇게 html에서 자바스크립트 파일을 가져와야 하는데요
body태그 끝나는 부분에
<script src="js파일명.js"></script>
를 넣어주셔야 합니다.
간혹 head 태그에 넣어서 코드는 틀린 곳이 없는데 실행이 안된다 하시는 분들은
body태그 끝나는 부분 쪽에 넣어주시면 실행되는 것을 확인하실 수 있습니다.
이제 다시 돌아가서 버튼을 클릭하시면 이렇게
메시지가 뜨게 됩니다.
-----------------------------------------------------------------------------------------------------------
정리
1.
html에 body태그 끝나는 부분 위에 <script src="js파일명.js"></script>
를 통해 연동시켜주어야 한다.
2.
클래스로 가져오기 위해선
var 변수명 = document.getElementByClassName("클래스 이름")[0];
으로 가져오며 반드시 뒤에 [0] 을넣어줘야 합니다.
3.
addEventListener 은 이벤트를 등록하는 함수이며
변수명.addEventListener('click',function(){
//click은 클릭 시
// function은 익명 함수로 함수명을 작성하지 않고 즉시 실행하기 위해 있습니다.
})
4.
alert()는 경고 메시지로 위에 결과 화면처럼 메시지가 뜨게 되는 함수입니다.
-----------------------------------------------------------------------------------------------------------
감사합니다.
'프로그래밍 > 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 / JavaScript 클래스로 글자 바꾸기 / textContent (0) | 2021.08.17 |
| 주말에 뭐할까? / 주말에 뭐할지 테스트 질문을 통한 추천 /HTML Javascript (0) | 2021.07.02 |