-
HTML 요소를 동적으로 읽고 쓰기js 2020. 8. 17. 19:35
지금까지 이벤트 처리기를 등록하는 방법을 배웠습니다.
이제는 js를 활용하여 html 요소 안의 내용을 동적으로 읽고 쓰는 방법을 배워보겠습니다.
HTML 요소의 innerHTML 프로퍼티로 읽고 쓰기
요소 객체의 innerHTML 프로퍼티는 그 HTML요소의 내용을 가리키며 이것으로 HTML 요소의 내용을 읽거나 쓸 수 있습니다.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script> window.onload = function() { var startbutton = document.getElementById("start"); var stopbutton = document.getElementById("stop"); var time = document.getElementById("time"); var starttime, endtime; var resulttime; startbutton.onclick = start; function start() { starttime = new Date(); console.log(starttime); stopbutton.onclick = stop; } function stop() { endtime = new Date(); console.log(endtime); resulttime = (endtime - starttime) / 1000; time.innerHTML = resulttime; } } </script> </head> <body> <input type="button" id="start" value="start" /> <input type="button" id="stop" value="stop" /> <p id="time">?</p> </body> </html>위 프로그램은 스톱워치 프로그램이다
기존의 html속성에 이벤트 처리기를 등록하지 않고 js부분과 html부분을 완전히 분리하여 js부분에서 이벤트 처리기를 등록하였다.
일단 먼저 window.onload를 사용하여 html문서를 다 읽어 드린후 각 id의 요소 객체를 가져온다.
start 버튼을 누르면 그 때의 시간이 저장되고 end버튼을 누르면 현재의 시간이 저장된다. 이때 end버튼을 누른 시간에서 start버튼을 누른 시간을 빼고 innerHTML 프로퍼티를 활용하여 그 시간을 time이라는 id속성을 가진 p태그에 넣어준다
document.write
처리 결과를 출력하는 유일한 수단! 보통 위의 방식으로 Dom을 사용하여 html요소를 생성하거나 처리 결과를 html문서로 출력하는 것이 일반적인데 간편한 출력수단으로 document객체의 write프로퍼티를 사용하기도 합니다.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script> window.onload = function() { var now = new Date(); var month = now.getMonth()+1; var day = now.getDate(); document.write("오늘은"+month+"월"+day+"일 입니다."); } </script> </head> <body> </body> </html>현재 날짜를 알려주는 프로그램
'js' 카테고리의 다른 글
문자열자르기 (0) 2021.06.29 클라이언트 자바스크립트 (0) 2020.08.18 이벤트 처리기 등록하기 (0) 2020.08.17 대화상자 표시하기 (0) 2020.08.17 js - 객체 (0) 2020.08.17