Vanilla JS 주요 특징 정리 2
기본 제공 객체
JavaScript에는 브라우저의 정보를 담고있는 여러 객체들이 제공된다.
각 객체를 확인하고 싶으면 console.dir() 메소드를 이용한다.
document 객체
브라우저에 노출되고 있는 HTML의 정보를 담고있는 객체.
title, body, head 등 html의 주요 요소에도 접근 가능하다.
Document - Web API | MDN (mozilla.org)
Document - Web API | MDN
Document 인터페이스는 브라우저가 불러온 웹 페이지를 나타내며, 페이지 콘텐츠(DOM 트리)의 진입점 역할을 수행합니다.
developer.mozilla.org
document 객체로 HTML 요소 제어하기
HTML 요소를 가져오는 방법에는 크게 두가지가 존재한다.
1. getElementBy 메소드 사용
인수로 넣은 이름과 일치하는 속성들을 찾아 가져오는 방법.
2. querySelector 메소드 사용
css 선택자를 인수로 사용하여 html 요소를 가져오는 방법으로 제일 많이 사용한다.
가져온 객체로 여러 속성 제어하기
querySelector 등으로 가져온 객체를 console.dir()로 살펴보면 여러가지 속성들을 가지고 있는 것을 확인할 수 있다.
ex) id, className, autofocus, innerText ...
style 속성도 존재하여 직접 JS를 통해 style을 조작할 수 있지만, 바람직한 방법은 아니므로 지양된다.
만약 조건에 따라 style이 변경되도록 하고 싶다면, 클래스명을 이용한다.
window 객체
브라우저 자체의 정보를 담고있는 객체.
창 크기 변화, 복사/붙여넣기, 인터넷 연결 on/off 등의 이벤트를 감지할 수 있다.
Window - Web API | MDN (mozilla.org)
Window - Web API | MDN
Window 인터페이스는 DOM 문서를 담은 창을 나타냅니다.
developer.mozilla.org
localStorage 객체
브라우저 자체적으로 값을 저장하는 저장소를 가리키는 객체. 일종의 DB처럼 사용할 수 있다.
Window.localStorage - Web API | MDN (mozilla.org)
Window.localStorage - Web API | MDN
localStorage 읽기 전용 속성을 사용하면 Document 출처의 Storage 객체에 접근할 수 있습니다. 저장한 데이터는 브라우저 세션 간에 공유됩니다.
developer.mozilla.org
Date 객체
1970년 1월 1일 UTC와 현재 시간의 차이를 밀리초 단위로 담고있는 객체
Date - JavaScript | MDN (mozilla.org)
Date - JavaScript | MDN
JavaScript Date 객체는 시간의 한 점을 플랫폼에 종속되지 않는 형태로 나타냅니다. Date 객체는 1970년 1월 1일 UTC(협정 세계시) 자정과의 시간 차이를 밀리초로 나타내는 정수 값을 담습니다.
developer.mozilla.org
이벤트 객체
각 이벤트 발생 시 해당 이벤트의 정보를 담고있는 이벤트 객체가 생성된다.
이벤트 참조 | MDN
DOM 이벤트는 발생한 흥미로운 것을 코드에 알리기 위해 전달됩니다. 각 이벤트는 Event 인터페이스를 기반으로한 객체에 의해 표현되며 발생한 것에 대한 부가적인 정보를 얻는데 사용되는 추가
developer.mozilla.org
이벤트 리스너
이러한 이벤트들을 감지하기 위해선 이벤트 리스너를 이용해야 한다.
요소.addEventListener('이벤트명', 함수)지정한 요소에 '이벤트명'에 명시한 이벤트가 발생하면 두번째 인수로 넣어준 함수가 실행되는 구조.
인수로 넣어주는 함수는 함수명 뒤에 ()를 붙여주면 안된다.
on이벤트
이벤트 리스너 말고도 on이벤트에 직접 함수를 할당하여 이벤트를 다룰 수 있다.
각 요소를 console.dir()로 확인해보면 수많은 on~() 메소드들을 확인할 수 있는데, 이게 다 이벤트가 발생하면 실행되는 함수다.
다만 이 방법은 이벤트리스너를 사용하는 것과 다르게 removeEventListener()를 통해 제거할 수 없으므로
일반적으로는 addEventListener()를 사용하는 것이 바람직하다.
JS로 HTML의 스타일 변경하기
1. document 객체의 style 속성 이용
일반적으로 document 객체에는 style 속성이 존재한다.
따라서 이를 이용해 style을 직접 수정할 수 있다.
css에서 dash-case로 작성하던 속성들은 camelCase로 바꾸어 사용해야한다.
2. 클래스 이용
css에 변경할 클래스를 미리 만든 뒤, 특정 조건이 되면 해당 요소에 클래스를 넣어주는 방식.
그러나 className을 이용하면 기존에 존재하던 클래스명을 전부 무시하고 새롭게 지정하므로 여러 문제점이 발생한다.
이 때 사용하는게 바로 classList
Element.classList - Web API | MDN (mozilla.org)
Element.classList - Web API | MDN
Element.classList는 엘리먼트의 클래스 속성의 컬렉션인 활성 DOMTokenList를 반환하는 읽기 전용 프로퍼티이다.
developer.mozilla.org
DOMTokenList - Web API | MDN (mozilla.org)
DOMTokenList - Web API | MDN
The DOMTokenList interface represents a set of space-separated tokens. Such a set is returned by Element.classList, HTMLLinkElement.relList (en-US), HTMLAnchorElement.relList (en-US), HTMLAreaElement.relList (en-US), HTMLIframeElement.sandbox, or HTMLOutpu
developer.mozilla.org
이는 클래스명을 배열처럼 사용할 수 있게 해주는 API이다.
toggle은 클래스명이 있으면 그걸 제거하고, 없으면 추가하는 기능의 메소드다.