티스토리 뷰
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
input.box:focus
{
background-color:yellow;
}
input.btn:hover
{
color : orange;
}
</style>
<script type="text/javascript">
//왼쪽에 txt박스에 있는 내용을 오른쪽에 붙여넣는다.
function btnA_onclick()
{
// document.getElementById('ID값')
var txt01 =document.getElementById("txtLeft");
var txt02 =document.getElementById("txtRight");
var leftStr = txt01.value;
txt02.value = leftStr;
}
//오른쪽 txt박스에 있는 내용을 왼쪽에 붙여넣는다.
function btnB_onclick()
{
var txt01 =document.getElementById("txtRight");
var txt02 =document.getElementById("txtLeft");
var RightStr=txt01.value;
txt02.value = RightStr;
}
function btnC_onclick()
{
var txt01 =document.getElementById("txt_su1"); //객체 자체를 가져왔으므로 그 객체의 value값을 또 얻어와야함.
var txt02 =document.getElementById("txt_su2");
var txt03 =document.getElementById("txt_result");
//객체의 value값을 객체에 담는건 불가능함.
//txt03 = txt01.value+txt02.value;
//연산 수행시 parseInt로 결과처리를 해야함 아니면 문자열 결합이됨.
//또는 Number로(이안에 value 값 넣기)
txt03.value = parseInt(txt01.value) + parseInt(txt02.value);
// or
//txtRes.value = Number(txt01.value) + Number(txt02.value);
}
</script>
</head>
<body>
<div>
<hr>
<input type="text" class="box" id="txtLeft">
<input type="button" value="A" class="btn" id="btnA" onclick="btnA_onclick()">
<input type="button" value="B" class="btn" id="btnB" onclick="btnB_onclick()">
<input type="text" class="box" id="txtRight">
<br>
<input type="text" class="box_su" id="txt_su1">
+
<input type="text" class="box_su" id="txt_su2">
<input type="button" value="=" class="btn" id="btnC" onclick="btnC_onclick()">
<input type="text" class="box_su" id="txt_result">
</div>
</body>
</html>Document.getElementById() 메서드는 주어진 문자열과 일치하는 id 속성을 가진 요소를 찾고, 이를 나타내는 Element 객체를 반환합니다. ID는 문서 내에서 유일해야 하기 때문에 특정 요소를 빠르게 찾을 때 유용합니다.
ID가 없는 요소에 접근하려면 Document.querySelector()를 사용하세요. 모든 선택자를 사용할 수 있습니다.
구문
document.getElementById(id);
매개변수
id찾으려는 요소 ID. ID는 대소문자를 구분하는 문자열로, 문서 내에서 유일해야 합니다. 즉, 하나의 값은 하나의 요소만 사용할 수 있습니다.
반환 값
주어진 ID와 일치하는 DOM 요소를 나타내는 Element 객체. 문서 내에 주어진 ID가 없으면 null.
예제
HTML
<html> <head> <title>getElementById 예제</title> </head> <body> <p id="para">어떤 글</p> <button onclick="changeColor('blue');">blue</button> <button onclick="changeColor('red');">red</button> </body> </html>
JavaScript
function changeColor(newColor) { var elem = document.getElementById('para'); elem.style.color = newColor; }
결과
Open in CodePenOpen in JSFiddle
용법
메서드 이름 중 "Id"의 대소문자가 정확해야 합니다. getElementByID()가 자연스러워 보일지라도 유효하지 않은 이름이기에 사용할 수 없습니다.
Document.querySelector()나 Document.querySelectorAll()과는 달리 getElementById()는 전역 document 객체의 메서드로만 사용할 수 있고, DOM의 다른 객체는 메서드로 가지고 있지 않습니다. ID 값은 문서 전체에서 유일해야 하며 "국지적"인 버전을 쓸 이유가 없기 때문입니다.
예제
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="parent-id"> <p>hello word1</p> <p id="test1">hello word2</p> <p>hello word3</p> <p>hello word4</p> </div> <script> var parentDOM = document.getElementById('parent-id'); var test1=parentDOM.getElementById('test1'); //throw error //Uncaught TypeError: parentDOM.getElementById is not a function </script> </body> </html>
id에 맞는 요소가 없을 때 getElementById()는 null을 반환합니다. 매개변수 id가 대소문자를 구분한다는 점을 기억하세요. document.getElementById("Main")는 <div id="main"> 대신 null을 반환하는데 "M"과 "m"을 구분하기 때문입니다.
문서에 없는 요소는 getElementById()가 팀색하지 않습니다. 요소를 동적으로 생성해서 ID를 부여하더라도, Node.insertBefore()나 비슷한 메서드로 문서 트리에 삽입해야 getElementById()로 접근할 수 있습니다.
var element = document.createElement('div'); element.id = 'testqq'; var el = document.getElementById('testqq'); // el이 null!
HTML이 아닌 문서. DOM 구현체는 요소의 어떤 속성이 ID인지 알고 있어야 합니다. 문서의 DTD가 정의하고 있지 않으면, 속성명이 "id"라고 해도 ID 유형인건 아닙니다. XHTML, XUL 등 자주 쓰이는 문서의 경우 id 속성을 ID 유형으로 정의하고 있습니다. ID 유형의 속성이 어떤 것인지 모르는 다른 구현의 경우 null을 반환합니다.
명세
'Web(국비) > 자바스크립트' 카테고리의 다른 글
| JavaScript - 동전반환 문제 (0) | 2019.10.17 |
|---|---|
| JavaScript -this활용 함수 (0) | 2019.10.17 |
| JavaScript - onclick() 를 통해 var유무 메모리 적재 알아보기 (0) | 2019.10.17 |
| JavaScript - WEB-INF에 대해 (0) | 2019.10.17 |
| JavaScript - 이벤트 등록 종류 (0) | 2019.10.17 |