DOM 2차시
기본원리 1. 원하는 대상 선택
기본원리 2. 선택한 대상을 조작하기
document.querySelector( ) 를 통해 태그를 변수( let )로 선택한다 - class 또는 id 사용
<ul class="list">
<li class="li">리스트1</li>
<li class="li">리스트2</li>
<li class="li">리스트3</li>
</ul><script>
let 리스트지정
리스트지정 = document.querySelector(".list")
console.log(리스트지정)
</script>선택한 태그를 조작한다
리스트지정.style.backgroundColor = "red"
*중복되는 클래스는 맨위의 하나만 지정 가능함
<script>
let li태그지정
li태그지정 = document.querySelector(".li")
console.log(li태그지정)
</script>리스트1 하나만 선택됨
이벤트
이벤트 : 브라우저 상에서 일어나는 동작들 (마우스 클릭, 키보드 입력, 로딩 완료, 브라우저 크기 변경 등등)
종류 : 마우스이벤트, 키보드이벤트, 브라우저이벤트 등등
마우스이벤트 : 클릭, 더블클릭, 마우스 이동, 마우스 누르는거, 마우스 때는거 등
키보드이벤트 : 버튼입력
브라우저이벤트 : 스크롤, 로딩 완료, 브라우저 크기 변경, 등등
이벤트 설정하는 법
1. 원하는 대상 지정
2. 그 대상에게 이벤트가 일어날 경우, 이벤트 별로 무엇을 할지 입력한다.
<button id="button">버튼</button>
<script>
let 버튼
버튼 = document.querySelector("#button")
버튼.addEventListener("이벤트 종류", function () { alert("버튼 클릭")})
</script>마우스이벤트 종류
click / dblclick / mouseover / mouseout / mousedown / mouseup
===================================================================================================
<!DOCTYPE html>
<html lang="ko">
<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>DOM 2차시</title>
</head>
<body>
<h1>DOM 배우는 시간</h1>
<p>기본원리 1. 원하는 대상 선택</p>
<p>기본원리 2. 선택한 대상을 조작하기</p>
<hr>
<ul class="list">
<li class="li">리스트1</li>
<li class="li">리스트2</li>
<li class="li">리스트3</li>
</ul>
<div class="divbox">
<h1 id="h1">div에 들어있는 h1</h1>
<p id="p">div에 들어있는 p</p>
</div>
<script>
let 리스트지정
리스트지정 = document.querySelector(".list")
console.log(리스트지정)
let li태그지정
li태그지정 = document.querySelector(".li")
console.log(li태그지정)
// 중복되는 클래스는 맨위의 하나만 지정 가능함
let h1태그지정
h1태그지정 = document.querySelector("#h1")
console.log(h1태그지정)
리스트지정.style.backgroundColor = "red"
li태그지정.style.color = "white"
h1태그지정.style.textAlign = "center"
</script>
</body>
</html>