getElementById() + 요소,태그,속성,속성값이란
getElementById()
ㆍ 이번글에서는 getElementById() 함수를 써보겠습니다.
ㆍ getElementById()는 자바스크립트에서 많이 중요한
함수입니다.
ㆍ 함수 뜻 그대로 생각해본다면 get(가져오다) Element(요소)
ById(Id로부터) 이 정도로 해석할 수 있을거 같습니다.
ㆍ 조금 더 자세히 접근해보자면 태그안의 ID값을 이용해서
오브젝트에 접근할 수 있습니다.
< >: 열린태그, </>닫힌태그
역시 개발은 코드를
통해서 이해하는 것이
가장 빠른것 같습니다.
간단한 코드를
먼저 보겠습니다
1 2 3 4 5 6 7 8 9 10 11 12 13 | <html> <head> <meta charset = "utf-8"> <title>Hello World</title> </head> <body> <input type="button" id="btn" value="button" /> <script> var btn = document.getElementById('btn'); alert(btn); </script> </body> </html> | cs |
얼마전에 HTML에서
사용했던 input태그를
써봤습니다.
버튼 하나를 생성하고
id의 속성값을 btn이라고 정의하고
value의 속성값을 button이라고 정의하였습니다
그 다음
자바스크립트 사용을 위해서
<script></script>를 둘러주고
그 안에 코드를 작성해줍니다.
변수(var) btn을 하나 만들어서
그 안에 document.getElementbyId('btn');
을 집어넣었습니다
(여기서 id가 btn인 요소들을 찾게됩니다)
getElementById는 document 객체의 내장함수이므로
앞에 document. 이 붙었습니다
이렇게 변수 btn에 id가 btn인 요소의 정보를
담은 후에 alert 대화상자에 그 정보를
넣어주는 코드입니다.
결과화면을 보겠습니다.
뭐 대충 짐작해보면
버튼이
HTML에서 input요소의 오브젝트라는
말 같습니다.
이 정보는 솔직히 실제로 쓸 일이
없을것 같으니 코드를 살짝만
변경해보면
1 2 3 4 5 6 7 8 9 10 11 12 13 | <html> <head> <meta charset = "utf-8"> <title>Hello World</title> </head> <body> <input type="button" id="btn" value="button" /> <script> var btn = document.getElementById('btn').value; alert(btn); </script> </body> </html> | cs |
9번째라인에서 마지막에
.value;만 추가해줬습니다
이 말은 예상하신대로
button의 value값이란
뜻입니다.
결과화면을
보겠습니다
button의 value값인
"button"이 잘 출력되었습니다
한번 더 다른 value값으로
테스트 해보면
1 2 3 4 5 6 7 8 9 10 11 12 13 | <html> <head> <meta charset = "utf-8"> <title>Hello World</title> </head> <body> <input type="button" id="btn" value="itpangpang" /> <script> var btn = document.getElementById('btn').value; alert(btn); </script> </body> </html> | cs |
value값을 "itpangpang"으로
변경한 후에 결과값을 보면
제대로 값이 나온것을
확인하였습니다.
getElementById()는
많이 사용하지만 사용법은
그리 어렵지 않으므로
여기서 마치고
기본 용어만 잠깐
훑어보면서 글을
끝내도록 하겠습니다
태그
<> 열린태그, </>닫힌태그
요소(Element)
<p> itpangpang </p>
전체를 통틀어 요소
속성
<input type : ~
type이 속성
속성값
<input type : "button"
"button"이 속성값
* 공부하면서 포스팅 하는 중이라 혹시나 틀린내용이 있다면
댓글로 남겨주시면 감사하겠습니다!!
'웹(Web) > JavaScript' 카테고리의 다른 글
| JavaScript 마우스 이벤트(mouse event) (0) | 2016.11.13 |
|---|---|
| prompt를 써보자 (1) | 2016.07.30 |
| confirm을 써보자 (0) | 2016.07.22 |
| JavaScript에서 document.write를 써보자 (0) | 2016.06.23 |
| JavaScript alert 사용해서 Hello World 띄우기 (0) | 2016.06.19 |