Document
document는 브라우저에 존재하는 object
console창에서 document를 통해 html 접근 가능.
document.title = "임의의 문자열" 을 엔터치면 해당 문자열로 title 변경가능.
javaScript에서 document로 html 변경이 가능하다.
getElementBy
<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">
<link rel="stylesheet" href="style.css"/>
<title>Momentom</title>
</head>
<body>
<h1 id = "title">Grab me!</h1>
<script src="app.js"></script>
</body>
</html><app.js>
const title = document.getElementById("title"); // id값을 통해 HTML element를 반환
title.innerText = "Got you"; // element안의 요소 변경 가능
console.log(title);
console.dir(title); // 보다 자세하게 elements 를 볼 수 있음
console.log(title.id); // element안의 id값 반환
getElementById 외에도 (id는 한개만 지정 가능하므로, 1개 반환)
document.getElementsByClassName(파라미터)
document.getElementsByTagName(파라미터)
등이 있음. 위의 함수들은 값의 개수만큼 array형태로 반환
QuerySelector
/ querySelector
// 찾은 element의 첫번째값 반환
const title = document.querySelector(".hello h1");
// querySelectorAll
// 전체 반환 array 형태
const titles = document.querySelectorAll(".hello h1");
Event
이벤트는 유저가 무언가 행동한 것.
ex) 버튼을 클릭, 어떠한 element로 마우스를 올려둠 등등
dir로 출력해서 property를 보면 on이 붙어있는건 다 event 함수이다.
사용할땐 on 없이 사용
(document의 하위 불러올 수 있는건 title,head,body 등 중요부분만 가능.
div등은 querySelector 등을 이용하여 불러와야함.)
// event
function handleTitleClick(){
title.style.color = "blue";
}
title.addEventListener("click", handleTitleClick);
// title.addEventListener()
// title에 해당 이벤트를 할때까지 기다리고있다가,
// 이벤트가 일어나면 파라미터를 실행
// 여기선 "click" 이벤트를 기다렸다가 handleTitleClick 함수 실행
// handleTitleClick 함수는 title의 색상을 파란색으로 바꿔줌
// 글자 변경
function handleMouseEnter(){
title.innerText = "Mouse is here!";
}
function handleMouseLeave(){
title.innerText = "Mouse is gone!";
}
title.addEventListener("mouseenter", handleMouseEnter); // title에 커서 올리기
title.addEventListener("mouseleave",handleMouseLeave); // title에서 커서 떠나기
function handleWindowResize(){
document.body.style.backgroundColor = "tomato";
}
function handleWindowCopy(){
alert("copier!");
}
function handlwWindowOffline(){
alert("SOS no WIFI");
}
function handleWindowOnline(){
alert("good");
}
window.addEventListener("resize", handleWindowResize); // 브라우저 크기를 변경할때
window.addEventListener("copy", handleWindowCopy); // 카피행동을 할때
window.addEventListener("offline", handlwWindowOffline); // 오프라인될때(wifi 등이 끊긴경우)
window.addEventListener("online", handleWindowOnline); // 온라인될때
Event & CSS
body{
background-color: beige;
}
h1{
color: cornflowerblue;
transition:color .5s ease-in-out; /* 색깔을 0.5s 걸쳐서 변경*/
}
.clicked {
color: tomato;
}const h1 = document.querySelector("div.hello:first-child h1");
// event
function handleTitleClickV1(){
const clickedClass = "clicked";
if(h1.className === clickedClass){
h1.className = "";
}else {
h1.className = clickedClass;
}
}
// 기존에 있던 class이름은 지우지 않기
function handleTitleClickV2(){
const clickedClass = "clicked";
if(h1.classList.contains(clickedClass)){ //class내에 있는지 확인 boolean타입 반환
h1.classList.remove(clickedClass); // 해당 클래스 이름 지우기
}else {
h1.classList.add(clickedClass); // 해당 클래스 이름 추가하기
}
}
// toggle 이용
function handleTitleClickV3(){
const clickedClass = "clicked";
h1.classList.toggle(clickedClass); // 있다면 지우고, 없으면 추가해줌
}
h1.addEventListener("click", handleTitleClickV3);
참조
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement
'Language > JavaScript' 카테고리의 다른 글
| [javaScript] ToDoList 만들기 (0) | 2022.02.24 |
|---|---|
| [javaScript] 랜덤 명언& 배경 생성 (0) | 2022.02.23 |
| [javaScript] 시계 만들기(clock) (0) | 2022.02.23 |
| [javaScript] Login 처리 (0) | 2022.02.22 |
| [javaScript] 기초 문법 (0) | 2022.02.19 |
댓글