JavaScript - Selector
Selector 선택자
※ selector: 선택장치, 선택자
요소를 제어하기 위해서는 어떠한 요소를 제어할 것인지 선택을 하여 컴퓨터에게 알려주어야 합니다.
컴퓨터에게 명령을 할 때는 자세히, 구체적으로 명령을 해주어야하기 때문에 어떤 요소인지
알려주는 방법이 바로 Selector(선택자)입니다.
선택자를 어떻게 사용할지 함께 연습해보겠습니다.
※ 저는 자바스크립트를 연습할 때 Brackets라는 프로그램을 사용했습니다.
※ 혹은 codepen.io를 사용하셔도 손 쉽게 HTML과 JavaScript를 실행시켜서 보실 수 있습니다.
-> https://codepen.io/pen/?template=WNjggVm (codepen.io를 사용하여 Selector를 작성한 것입니다.)
html 코드에서 자바스크립트는 <script></script>태그 안에 작성하셔야 합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1 id="hello">안녕하세요</h1>
<script>
</script>
</body>
</html>위와 같이 html을 작성하시고 실행을 하시면 아래와 같은 화면을 보실 수 있습니다.
그러면 우리는 '안녕하세요'란 문구를 '안녕'으로 바꿔달라고 컴퓨터에게 명령을 해보겠습니다.
document.getElementById('hello').innerHTML = '안녕';위와 같이 작성해주시고 인터넷창을 새로고침 해주시면 문구가 바뀌는 것을 보실 수 있습니다.
위의 코드는 어떠한 명령일지 하나씩 뜯어보겠습니다.
document.getElementById('hello').innerHTML = '안녕'; => 색칠된 부분이 Selector(선택자) 입니다.
document : 문서, 웹문서 = html 파일을 의미합니다.
. : ~의, ~안에 있는
getElement
get : 가져와 + Element : 요소 (html 요소) = html의 요소를 가져와
ById : Id에 의해서~
getElementById('hello') : Id가 'hello'인 HTML 요소를 가져와
innerHTML : HTML 내부 요소, 이 부분에는 다양한 명령어가 들어갈 수 있습니다.
innerHTML 자리에 사용할 수 있는 명령어는 간단하게는 style.fontSize, style.color 등등이
있으며 더 많은 명령어는 구글을 통해 확인하실 수 있습니다. (너무나 다양하기 때문에 직접
알려드리는 것 보다 사용하실 때 필요한 기능에 맞는 명령어를 찾아서 사용하시는게 효율적입니다.)
=> "웹문서, html 안에 아이디가 'hello'인 요소를 가져와서 '안녕'으로 바꿔줘" 라는 명령어가 됩니다.
※ 아이디 명은 본인이 정하신 아이디 명을 넣어주시면 됩니다.
innerHTML 부분에는 다양한 명령이 들어갈 수 있습니다.
※ 실습하기~!!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1 id="hi">올때메로나</h1>
<script>
/*
1. 올때메로나 -> 올때바밤바 변경해보기
2. 폰트 색상을 바꿔보기 (원하는 색상으로)
3. 폰트 크기 조절해보기 (30px로)
*/
</script>
</body>
</html>풀이
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1 id="hi">올때메로나</h1>
<script>
/* 문구 변경 */
document.getElementById('hi').innerHTML = '올때바밤바';
/* 폰트 색상 변경 */
document.getElementById('hi').style.color = 'blue';
/* 폰트 크기 변경 */
document.getElementById('hi').style.fontSize = '80px';
</script>
</body>
</html>왜 이렇게 길게 써야 하나요?
모든 명령어는 우리가 컴퓨터에게 하는 명령입니다.
컴퓨터는 간단하게 말하면 혼동이 오기 때문에 구체적으로 명령을 해주어야 하며
그렇기 때문에 길게 쓰여질 수 밖에 없습니다.
문구 변경을 예로 들면
저거를 '안녕'으로 바꿔달라고 명령을 하면 컴퓨터는 저거가 뭔지 모르기 때문에 명령을 이행하지 못합니다.
하지만 아이디가 'hello'인 요소를 '안녕'으로 바꿔줘 라고 한다면 컴퓨터는 바로 명령을 이행하게 됩니다.
= : 대입, 오른쪽 값을 왼쪽에 넣어 주세요
'' : 모든 문자 표현, 문자자료형
Next > JavaScript (Alert)
'Programing > JavaScript' 카테고리의 다른 글
| JavaScript (EventListener) (0) | 2021.08.06 |
|---|---|
| JavaScript (Parameter) (0) | 2021.08.05 |
| JavaScript (Function) (0) | 2021.08.04 |
| JavaScript (Alert) (0) | 2021.08.02 |
| Ajax Tutorial (0) | 2021.07.13 |
