getElementById() + 요소,태그,속성,속성값이란

Posted by ITPangPang
2016.08.01 23:15 웹(Web)/JavaScript


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"이 속성값



* 공부하면서 포스팅 하는 중이라 혹시나 틀린내용이 있다면

댓글로 남겨주시면 감사하겠습니다!!



저작자 표시 비영리 변경 금지
신고
이 댓글을 비밀 댓글로
    • 하이랭커
    • 2017.08.11 17:11 신고
    그러니까 id에 맞는 요소를 찾아 그 요소의 value값을 읽어 출력해주고 싶을때 쓰는것인가요