<!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>ex05DOM실습</title>
</head>
<body>
<input type="text">
<button>클릭</button>
<script>
// 1. 태그들 가져오기
let input = document.querySelector('input')
let btn = document.querySelector('button')
// 2. 이벤트 처리하기
btn.addEventListener('click',function(){
// 3. input태그 안에 있는 텍스트를 가져와서
// 알림창으로 띄워주기
// -> input 태그는 닫는 태그가 존재하지 않는다.
// -> value라는 attribute를 기준으로 안에 있는 글자를 가져올 수 있다.
alert(input.value)
// 텍스트 공간 비워주기
input.value = ''
})
// DOM의 요소들을 가져왔을 때 사용할 수 있는 property
// 1. 태그.innerHTML
// : 닫는 태그가 존재하는 태그들에 내부 내용을 가져오거나
// 변경하고 싶을 때 사용하는 기능
// 2. 태그.attribute
// : 각각의 태그들의 속성을 가져오거나 변경할 수 있는 방법
// ex) input.value / img.src / a.href
// 3. 태그.style.스타일속성명
// : 각각의 태그들의 스타일 속성을 가져오거나 변경할 수 있는 방법
// ex) div.style.width = '300px'
</script>
</body>
</html>
