JS DOM Functions
Document
document도 object이다.
console.log(document); 를 통해 해당 웹페이지의 html 전체를 받을 수 있다. 즉, document를 console.log 하면 문서 전체가 출력된다.
DOM (Document Object Module)
JS는 HTML에 있는 모든 요소를 가져올 수 있으며, 가져온 요소의 내용을 객체로 바꾼다. document , 즉, 모든 HTML은 객체가 되는 것이다. 그리고 객체는 많은 키(=이름, label....)을 가지고 있다. ex) .log, .error, .name, .handsome, .age
아래와 같은 방식으로 HTML를 JS로 가져오거나 JS를 통해 HTML요소를 쓸 수 있다.
1. JS로 HTML 요소 가져오기
+) .querySelector
querySelector은 노드의 첫번째 자식을 반환한다. (반환 값이 한 개이다.) 아래코드를 살펴보자.
const title = document.querySelector("#title");위의 코드를 보면 querySelector 은 document 로 가서 모든 자식들 중 id ( # )로 선택하겠다는 것이다. class는 .으로 찾는다. 이는 마치 css selector과 같은 방식으로 사용된다.
const form = document.querySelector(".js-form input");위의 형식대로 쓰면 js-form 클래스를 가진 html 요소 안에서 input을 찾는다. 이러한 방식으로도 사용할 수 있다.
👇🏻 [자세히 보기] getElementById vs getElementsByClassName vs querySelector
- getElementById는 ID만을 이용하여 html 요소를 얻고,
- getElementsByClassName는 여러개의 요소를 classname으로 얻으며,
- querySelector는 한 개의 요소를 어떠한 선택자를 통해서라도 얻을 수 있다.
+) .querySelectorAll
querySelectorAll 은 첫번째 자식만을 반환해 한 개의 반환값을 가지는 querySelector과는 다르게 모든 걸 가져온다. 예를 들어 클래스명을 인자로 주면 해당 클래스명에 따른 element를 array 형식으로 가져온다. 따라서 결과값이 한 개만 있을 때도 배열로 반환하여 인덱스를 사용해야 한다는 불편함이 있다.
2. HTML요소를 JS로 쓰기
변경 전
변경 후
DOM의 세부내용과 수정
console.log()를 하면 html 요소인 태그 내용이 그대로 출력되고, console.dir()을 하면 해당 태그를 가지고 할 수 있는 모든 가능성(이벤트들, 수정할 수 있는 것)인 키에 대해 알 수 있다.
- console.log()
- console.dir()
위의 키(=label, 이름)를 이용하면 JS로 html을 조종할 수 있게 된다.
예시)
예시) document 의 키 알아보기
Events and Event Handlers
JS는 단지 html과 css를 바꾸고 싶어서 만들어진 것은 아니다. JS는 이벤트에 반응하기 위해서 만들어졌다. html,css를 바꿀 수 있는 것도 이벤트 결과로써 쓸 수 있게 하기 위한 것이라 생각해볼 수 있다.
Event
👇🏻 [이벤트 종류보기]
event는 웹사이트에서 발생하는 것들을 말하는 것이다.
ex) click, resize, submit, input change, load, before closing, closing, printing
우리가 이러한 이벤트를 중간에 가로챌 수 있다.
window.addEventListener(“resize”, hadleResize);
// event를 기다리고 싶은 대상.addEventListener("기다리는 event", event가 생겼을 때 수행할 함수);위의 코드를 통해 JS는 이벤트를 받기 기다리고 있다. (listen to event) 하지만 위의 코드의 resize 처럼 어떤 이벤트를 기다리고 있는 것인지를 분명히 말해줘야한다. 그래야 모든 이벤트를 다 기다리지 않을 수 있고, 신경쓰지 않아도 되는 이벤트들도 있기 때문이다. 만약 모든 이벤트를 다 기다려야 한다면 웹사이트가 느려진다. 예를 들어, Event Listener을 window에 추가하고 싶다면 위의 코드와 같이 적으면 된다.
function handleResize(){
console.log("I have been resized");
}
window.addEventListener("resize", handleResize);
또한 이벤트를 기다리는 대상에 따라 쓸 수 있는 이벤트들이 다르다. 예를 들어 form의 경우에는 submit 이라는 이벤트가 있지만, window의 경우에는 submit이라는 이벤트가 존재하지 않는다. 왜냐하면 window를 submit 할 수는 없기 때문이다.
호출한 함수에서 event 다루기
function handleResize(event){
console.log(event);
}
window.addEventListener("resize", handleResize);
이벤트가 발생했을 때 호출할 함수에 인자를 받을 수 있게 위의 코드처럼 작성해보자. 이렇게 인자를 받을 수 있게 함수를 만들면, JS는 해당 인자에 자동적으로 event 객체를 넣는다. 즉, 함수 안에 event 객체를 넣어 우리가 다룰 수 있게 되는 것이다.
예제) click 이벤트 다루기 - 글자가 클릭되면 색 바꾸기
//index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1 id="title">This works!</h1>
<script src="script.js"></script>
</body>
</html>// style.css
body{
background-color: #f9fafb;
}
h1{
color: #6b7280;
}const title = document.querySelector("#title");
// querySelector로 할 때 #,. 잊지말기!!!
function handleClick(){
title.style.color = "#059669";
}
title.addEventListener("click", handleClick);
위 포스팅은 노마드 코더 "바닐라 JS로 크롬 앱 만들기" 강의를 토대로 만들어진,
[바닐라 JS 기초 개념 요약 정리] 입니다.
직접 강의를 보고 싶거나 자세한 사항을 알고 싶다면 아래 링크를 참고해주세요 😊
nomadcoders.co/javascript-for-beginners
Watch Now - 노마드 코더 Nomad Coders
nomadcoders.co
'프로그래밍 > JS' 카테고리의 다른 글
| [바닐라 JS 기초] 크롬앱 클론코딩 ( 시계 구현, Local Storage, Math 모듈로 난수생성, API로 유저 위치와 날씨 받아오기 ) (18) | 2021.03.30 |
|---|---|
| [바닐라 JS 기초] 조건문 ( + ClassList, Toggle ) (0) | 2021.03.30 |
| [바닐라 JS 기초] 함수 (0) | 2021.03.30 |
| [바닐라 JS 기초] JS와 바닐라JS, 출력, 변수, 데이터타입 (11) | 2021.03.30 |