태그의 속성은 = .로 접근함
태그가 객체임을 이해하면 쉽다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h3>태그의 속성 제어하기</h3>
<input type="text" value="" id="input" required>
<div class="msg"></div>
<button type="button" id="btn">확인</button>
<script>
//태그의 속성은 = .속성명으로 접근합니다.
var input = document.getElementById("input");
//console.log(input.type);//type속성
// console.log(input.id);//id속성
// console.log(input.value);//value속성
// console.log(input.required);//required속성
//input.value='변경';
//태그의 사이값을 HTML형식으로 얻음 innerHTML
var btn=document.querySelector("#btn");
//console.log(btn.innerHTML);
//버튼을 누르면 사용자가 입력한 value가지고와서 msg태그사이에 출력.
var msg=document.querySelector(".msg");
btn.addEventListener("click",function(){
var a =input.value;
msg.innerHTML=a;
});
</script>
</body>
</html>
'JS' 카테고리의 다른 글
| 221229 JS DOM, 속성제어 실습 2 (0) | 2022.12.29 |
|---|---|
| 221229 JS DOM,속성제어 실습1 (0) | 2022.12.29 |
| 221229 JS DOM (0) | 2022.12.29 |
| 221229 JS BOM &DOM (0) | 2022.12.29 |
| 221229 JS 이벤트핸들러 실습 (0) | 2022.12.29 |
