[노마드코더] 바닐라JS 공부 3일차(JS에서 HTML에 접근, event)

Javascript

by 래모 2022. 1. 2. 21:38

JS에서 HTML에 접근하는 방법

// The Document Object 3.0

// HTML in Javascript 3.1

// Searching For Elements 3.2

javascript에서 HTML을 불러올 수도 있고, javascript에서 수정도 가능

document.title = "lalala"; // title이 lalala로 바뀜

const something = document.getElementById("id이름"); // 해당 id값을 가진 태그를 가져옴(하나의 값)
something.innerText = "HI~~"; // 태그 안에 text가 바뀜

const classNames = document.getElementsByClassName("class이름"); // 해당 class를 가진 태그를 모두 가져옴(배열의 형태)
// 여기서 id와 class의 차이가 나옴. id는 보통 특정 하나의 태그에 부여할 때 사용하고 class는 다수의 태그에 사용

const tagNames = document.getElementsByTagName("tag이름"); // 해당 태그를 모두 가져옴(배열의 형태)

const querySelector = document.querySelector("class이름/id이름/tag이름 class이름/id이름/tag이름"); 
// 이러면 특정 태그 하위에 있는 태그만 가져올 수 있음
// 여러개 있으면 가장 위에있는 것만 가져옴
// 모두 가져오고 싶다면 querySelectorAll 사용(배열의 형태)

//getElementById("hello")와 querySelector("#hello")는 같음

Event

// Events 3.3

// Events part Two 3.4

// More Events 3.5

// CSS in Javascript 3.6 3.7 3.8

메인 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 App</title>
    <link rel = "stylesheet" href = "style.css">
</head>
<body>
    <div class = "hello">
        <h1>Grab me 1!</h1>
    </div>
    <div class = "hello">
        <h1>Grab me 2!</h1>
    </div>
    <div class = "hello">
        <h1>Grab me 3!</h1>
    </div>
    <script src = "app.js"></script>
</body>
</html>

app.js파일

const title = document.querySelector(".hello:first-child h1");
// hello클래스 안에 첫번째 h1태그를 가져옴

function handleTitleClick() {
    const currentColor = title.style.color;
    let newColor;
    if (currentColor === "blue"){
        newColor = "tomato";
    }else {
        newColor = "blue";
    }
    title.style.color = newColor;  
}
// 클릭할 때마다 색을 바꿔주고 싶으면 if-else문 사용

title.addEventListener("click", handleTitleClick);
// 첫번째 요소엔 이벤트의 종류를 두번째 요소엔 이벤트가 실행될 시 불러올 함수를 적어줌

function handleWindowResize() {
    document.body.style.background = "tomato";
}
window.addEventListener("resize", handleWindowResize)
// 전체 창의 크기가 바뀌면 함수 호출

function handleWindowOffline() {
    alert("SOS no WIFI");
}

window.addEventListener("offline", handleWindowOffline);
// 인터넷 연결이 끊겼을 때 함수 호출

function handleWindowOnline() {
    alert("Good WIFI");
}

window.addEventListener("online", handleWindowOnline);
// 인터넷 연결이 되었을 때 함수 호출

//contain = 해당 클래스가 HTML element에 포함되어 있나
// grab.classList.toggle("clicked") = grab의 classList에 clicked가 있는지 확인해서 있으면 제거 없으면 추가

listen하고 싶은 event를 찾는 가장 좋은 방법

: "이름 html element mdn"으로 구글링

이거 별로면 console.dir()사용해서 요소 찾아봄

on어쩌고 라고 써있는게 이벤트임

1) 마우스 이벤트

이벤트	설명
click	요소에 마우스를 클릭했을 때 이벤트가 발생
dbclick	요소에 마우스를 더블클릭했을 때 이벤트가 발생
mouseover	요소에 마우스를 오버했을 때 이벤트가 발생
mouseout	요소에 마우스를 아웃했을 때 이벤트가 발생
mousedown	요소에 마우스를 눌렀을 때 이벤트가 발생
mouseup	요소에 마우스를 떼었을 때 이벤트가 발생
mousemove	요소에 마우스를 움직였을 때 이벤트가 발생
contextmenu	context menu(마우스 오른쪽 버튼을 눌렀을 때 나오는 메뉴)가 나오기 전에 이벤트 발생

2) 키 이벤트

이벤트	설명
keydown	키를 눌렀을 때 이벤트가 발생
keyup	키를 떼었을 때 이벤트가 발생
keypress	키를 누른 상태에서 이벤트가 발생

3) 폼 이벤트

이벤트	설명
focus	요소에 포커스가 이동되었을 때 이벤트 발생
blur	요소에 포커스가 벗어났을 때 이벤트 발생
change	요소에 값이 변경 되었을 때 이벤트 발생
submit	submit 버튼을 눌렀을 때 이벤트 발생
reset	reset 버튼을 눌렀을 때 이벤트 발생
select	input이나 textarea 요소 안의 텍스트를 드래그하여 선택했을 때 이벤트 발생

4) 로드 및 기타 이벤트

이벤트	설명
load	페이지의 로딩이 완료되었을 때 이벤트 발생
abort	이미지의 로딩이 중단되었을 때 이벤트 발생
unload	페이지가 다른 곳으로 이동될 때 이벤트 발생
resize	요소에 사이즈가 변경되었을 때 이벤트 발생
scroll	스크롤바를 움직였을 때 이벤트 발생

'Javascript' 카테고리의 다른 글

[노마드코더] 바닐라JS 공부 6일차(Quotes and Background: Math객체 난수) (0)	2022.01.11
[노마드코더] 바닐라JS 공부 5일차(clock :setInterval, setTimeout, Date 객체, padStart) (0)	2022.01.11
[노마드코더] 바닐라JS 공부 4일차(Login 구현:preventDefault, localStorage) (0)	2022.01.04
[노마드코더] 바닐라JS 공부 2일차(함수, Return, 조건문) (0)	2021.12.28
[노마드코더] 바닐라JS 공부 1일차(데이터 타입, 변수, booleans, 배열, 객체) (0)	2021.12.28