document.querySelect() // 하나만 가져올 수 있음
ex) document.querySelect("#idName"); // id="idName"인 요소를 가져옴
document.getElementById("idName"); // 앞과 같은 결과이지만 Id만을 추출 할 수 있기 때문에 "#"표시가 필요 없음
=> document.getElementByClassName("className") // Class의 요소를 추출함ex)
// index.html
<!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>Momentum</title>
</head>
<body>
<div id="hi">
<h1>Grab me!</h1>
</div>
<script src="app.js"></script>
</body>
</html>
// app.js
const title = document.querySelector("#hi h1");
title.style.color = "blue"; // Grab me!의 색이 blue로 바뀜
=> h1의 style을 js에서 바꿀 수 있음Event를 추가
event를 listen하여 JS가 우리 대신 실행시켜주기를 원함
title.addEventListener("click",함수명);
// => title.onclcik = 함수명;
// 으로 대신 사용 할 수 있음 but 위의 방식을 더 선호!
// title.removeEventListener()를 통해 이벤트를 삭제할 수 있기 때문
//on[ ] => event를 받음
// ex) onclick => click을 받음다양한 event들이 존재함
1) document
- click
- mouseover
- mouseenter : 마우스가 위에 올라오면
- mouseleave : 마우스가 떠나면
2) window
- resize : 창의 크기를 바꿀 때
- copy : element를 복사할 때
- online / offline : 와이파이의 연결상태가 바뀔 때
... 더 다양함
ex)
// 기존 코드
if(h1.style.color == "blue"){
h1.style.color = "tomato";
}else{h1.style.color = "blue";}
// => h1.style.color가 많이 반복됨
// 수정 후 코드
const color = h1.style.color; // 수정이 불가함
let newColor; // 수정이 가능함
if( color === "blue"){
newColor = "tomato";
}else{
newColor = "blue";
}
h1.style.color = newColor;
css를 이용하여 html의 style 변경하기
1)
// index.html
<!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>Momentum</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="hello">
<h1>Grab me!</h1>
</div>
<script src="app.js"></script>
</body>
</html>
//style.css
.active{
color:tomato;
}
h1{
color:cornflowerblue;
}
//app.js
const h1 = document.querySelector("div.hello:first-child h1");
function handleTitleClick(){
h1.className = "acitve";
}
h1.addEventListener("click",handelTitleClink);
// 변경 후 app.js
function handleTitleClick(){
if(h1.className === "active"){
h1.className ="";
}else{
h1.className = "active";
}
}
/*
acitve라는 class을 정확하게 작성해야함 이를 방지하기 위해서
function handleTitleClick(){
const clickedClass = "active";
if(h1.className === clickedClass){
h1.className ="";
}else{
h1.className = clickedClass;
}
}
로 변경할 수 있음
*/
---------------------------------------------------------
2)
// 1)의 방식은 기존의 class를 변경 시켜 버리기 때문에
// 기존의 class를 유지하면서 새 class를 추가하는 방법이 필요함!
// app.js
function handleTitleClick(){
const clickedClass = "active";
if(h1.classList.contains(clickedCalss)){
h1.classList.remove(clickedCalss);
}else{
h1.className = clickedClass;
}
=> 이미 이 기능을 하는 function이 있음 => toggle !!
=> *** h1.classList.toggle(active); ***
내일의 나는 오늘보다 더 나아지기를 :D