안녕하세요 오늘은 자바스크립트에서 아이디를 통해 가져와서 사용하는
법을 알아보도록 하겠습니다.
클래스로 하는 방법은 아래 링크 남겨두도록 하겠습니다.
다른 간단한 설명도 아래 링크에 있습니다.
https://didimdol20.tistory.com/76?category=1032931
먼저 자바스크립트에서 html 파일에서 가져와서 사용하는 방법 3가지 중 이번에 두 번째 방법인
id로 가져오는 것을 하고자 하는데요
클래스로 가져오는 방법과는 달리 이번엔
document.getElementByID("ID명") 을 이용해주시면 됩니다.
클래스와는 달리 뒤에 [0] 안붙여주셔도 됩니다.
바로 코드로 알아보겠습니다.
기본 html입니다. 아래 script를 통해 꼭 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>
<h1 id="test">안녕하세요</h1>
<button id="btn">변경</button>
<script src="js.js"></script>
</body>
</html>
이제 여기에서 먼저 버튼을 가져와서 메세지를 띄우는 것을 해보겠습니다.
그전에 혹시라도 addEventListener이 나올 텐데 모르는 분이 있으시다면,
이벤트를 등록하는 함수입니다.
alert()함수는 메시지 창 이 나오게 하는 함수입니다.
var btn = document.getElementById("btn");
btn.addEventListener("click",function(){
alert("등록");
})
이렇게 해서 버튼을 클릭하게 된다면
제가 등록한 코드대로 동작하는 것을 확인할 수 있습니다.
이후 문장을 변경하고 싶을 경우 textContent나 innerHTML를 사용해주시면 됩니다.
var btn = document.getElementById("btn");
btn.addEventListener("click",function(){
document.getElementById("test").innerHTML = "반갑습니다.";
})
이렇게 추가 해주고 나서 다시 버튼을 클릭해보면
글이 바뀌게 됩니다.
정리
1. 아이디를 이용해서 가져올 경우
document.getElementById("ID명") 을 이용하면 된다.
2. class와 같은 방법으로 innerHTML 또는 textContent로 글자를 변경한다.
감사합니다.
'프로그래밍 > JavaScript' 카테고리의 다른 글
| visual Studio Code Live server / 비주얼 스튜디오 코드 라이브 서버 (0) | 2021.08.23 |
|---|---|
| javascript / 자바스크립트 / textContent innerHTML value 차이 (0) | 2021.08.22 |
| javascript / 글자 바꾸는 법 / innerHTML / <HTML> 태그 넣기 (0) | 2021.08.18 |
| JavaScript / JavaScript 클래스로 글자 바꾸기 / textContent (0) | 2021.08.17 |
| javascript / 버튼 가져오기 / 버튼 클릭시 동작/ getElementByClassName / 클래스로 자바스크립트 에서 사용하기 (0) | 2021.08.16 |