HTML에서 입력값 또는 텍스트 문자열을 자바스크립트에서 취득하는 방법을 알아보겠습니다.
입력값 또는 문자열을 취득하기 위해서는 getElementById를 사용합니다.
getElementById는 HTML 태그 안에 지정한 id 이름으로 해당 요소를 취득하는 메서드입니다.
샘플 소스를 보면서 사용 방법을 알아보도록 하겠습니다.
getElementById 메서드
getElementById 메서드는 HTML 태그 안에서 지정한 id 이름으로 해당 요소를 취득해오는 메서드입니다.
getElementById 사용 방법은 아래와 같습니다.
document.getElementById(“id 이름”)
getElementById에는 파라미터로 HTML 태그 안에 지정한 id 이름을 설정합니다.
예를 들어 p태그에 id 이름을 지정하고, getElementById를 사용해 해당 요소를 취득하는 샘플을 보겠습니다.
<p id="test1">안녕하세요</p>
<script type="text/javascript">
// onload 이벤트
window.onload = function() {
// test1 요소 취득
alert(document.getElementById("test1"));
}
</script>
p태그에 id 이름을 test1이라고 지정했습니다.
p태그 요소 안에는 안녕하세요 라는 문자열을 작성했습니다.
document.getElementById를 사용할 경우 요소 정보를 제대로 취득해오는지 알아보기 위해 HTML이 표시될 때 자바스크립트가 자동으로 실행되도록 onload 이벤트를 작성했습니다.
HTML이 표시되면서 팝업창에 test1 정보가 표시됩니다.
표시내용은 [object HTMLParagraphElement]가 표시됩니다.
p태그 정보는 취득해왔지만 태그 안에 문자열이 어떤 내용인지는 알 수 없습니다.
textContent 프로퍼티
이번에는 태그 안에 작성한 문자열을 취득하는 방법을 알아보겠습니다.
태그 안에 표시되고 있는 문자열을 취득하기 위해서는 textContent 프로퍼티를 사용합니다.
샘플을 보도록 하겠습니다.
<p id="test1">안녕하세요</p>
<script type="text/javascript">
// onload 이벤트
window.onload = function() {
// test1 요소 취득
var strTest1 = document.getElementById("test1").textContent alert(strTest1);
}
</script>
먼저 p태그에 id 이름을 test1이라고 지정하고, 요소 안에는 안녕하세요 라는 문자열을 작성했습니다.
이번에도 스크립트 동작확인을 위해 onload 이벤트를 작성했습니다.
변수 strTest1에는 document.getElementById(“test1”).textContent 사용해 표시하고 있는 문자열을 취득하고 있습니다.
여기서 문자열을 취득하기 위해서 textContent 프로퍼티를 사용했습니다.
문자열이 취득이 되었는지 확인하기 위해 alert으로 취득 값을 표시하고 있습니다.
팝업창에 안녕하세요 라는 문자열이 표시되는 것을 확인할 수 있습니다.
value 프로퍼티
텍스트 문자열 값을 취득하기 위해 textContent을 사용해 취득했습니다.
이번에는 입력이 가능한 텍스트 박스에 입력값을 취득하기 위한 방법을 보겠습니다.
입력한 값을 취득하기 위해서는 value 프로퍼티를 사용합니다.
value 프로퍼티 사용 방법은 다음과 같습니다.
document.getElementById(“id 이름”).value
해당 항목에 입력한 모든 문자열을 취득할 수 있습니다.
value 프로퍼티 샘플을 보겠습니다.
<div style="background-color : #CCC;">
<input type="text" id="dat_in" placeholder="값을 일력해주세요.">
</br></br> <nobr>
<input type="button" value="표시" onClick="valuetest()">
</br></br>
<input type="text" id="dat_out" placeholder="입력 내용이 표시됩니다.">
</div>
<script type="text/javascript">
// 표시버튼 클릭 이벤트
function valuetest() {
// 입력값 취득
var textString = document.getElementById("dat_in").value;
// 입력값 출력
document.getElementById("dat_out").value = textString;
}
</script>
첫 번째 텍스트 박스에 입력한 값을 표시 버튼을 누르면 아래 텍스트 박스에 표시하는 샘플입니다.
스크립트 작성 내용을 간단히 보겠습니다.
textString 변수에 document.getElementById(“dat_in”).value를 사용해 텍스트 박스에 입력한 값을 취득해왔습니다.
취득한 값을 텍스트 박스에 출력하기 위해서는 document.getElementById(“dat_out”).value = textString;을 사용했습니다.
값을 취득하거나 대입할 때 모두 document.getElementById(“id 이름”).value 사용합니다.
문자열 요소를 출력하는 태그나 입력이 가능한 텍스트 박스에서 값을 취득해 오는 방법을 알아봤습니다.
댓글