Dom (Document Object Model) : 문서 객체 모델
웹페이지를 핸들링하기 위한 프로그램 인터페이스(문서 구조)이다.
javascript는 Dom을 통해 html을 제어한다.
Dom을 이용한 getElementById/onclick 사용 예시
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<p id="demo">안녕하세요!</p> <!-- 일반태그 -->
<input type="text" id="text" value="버튼 클릭!" size="20"> <!-- form태그 -->
<br>
<input type="button" value="클릭" onclick="btnClick()"> <!-- 버튼눌릴때 btnClick() 호출 -->
<script type="text/javascript">
function btnClick() {
document.getElementById("demo").innerHTML = "반갑습니다.";
document.getElementById("text").value = "잘 클릭하셨네요";
}
</script>
</body>
</html>
실행화면
안녕하세요!
설명
<p id="demo">안녕하세요!</p>p태그에 id="demo" 설정
<input type="text" id="text" value="버튼 클릭!" size="20">form태그에 id="text" 설정
<input type="button" value="클릭" onclick="btnClick()">onclick="btnClick()" 사용자가 클릭을 할 경우 이벤트가 발생하여 btnClick() 메서드로 이동
document.getElementById("demo").innerHTML = "반갑습니다.";getElementById(id명)으로 연결되어 (Id=demo)의 문자열을 "반갑습니다."으로 변경
innerHTML = (p 태그)의 문자열 변경
document.getElementById("text").value = "잘 클릭하셨네요";getElementById(id명)으로 연결되어 (Id=text)의 문자열이 "잘 클릭하셨네요"으로 변경
value = (input type="text")의 문자열 변경
'IT > JavaScript' 카테고리의 다른 글
| [Html+JavaScript] 진수 변환하기/10진수를 2진수, 8진수, 16진수 변환하기/toString(feat.Dom) (0) | 2021.06.06 |
|---|---|
| [Html+JavaScript]Date()사용법/날짜,시간 설정하기(setter)/년,월,일,요일,시,분,초 출력하기(getter)(feat.Dom) (0) | 2021.06.06 |
| [Html+JavaScript]1초당 갱신되는 시계 만들기(feat.Dom)/setInterval()/Date() (0) | 2021.06.06 |
| [JavaScript] 변수 선언 방식/데이터 타입의 종류/데이터 타입 확인/ 주석 (0) | 2021.06.04 |
| [JavaScript] 자바스크립트 정의/작성 위치 (0) | 2021.06.04 |