id로 태그 선택하기
document.getElementById('id');
null
이 반환된다.class로 태그 선택하기
document.getElementsByClassName('태그이름')
HTMLCollection이라는 유사 배열이 만들어진다.
유사배열(Array-Like Object)란?
다양한 형태의 유사배열이 있지만 아래의 4가지 특징은 모두 가진다.
css 선택자로 태그 선택하기
document.querySelector('선택자')
document.querySelectorAll('선택자')
이벤트 핸들러 등록
const btn = document.querySelector('#myBtn');
btn.onclick = function() {
console.log('Hello Codeit!');
};
console.log
vs console.dir
log
는 여러 값을 쉼표로 구분해서 전달하면 전달받은 모든 값을 출력, dir
는 여러 값을 전달하더라도 첫 번째 값만 출력문서 객체 모델
DOM이 있어 좋은 점
요소를 객체로 다루게 되면서 정적으로 존재했던 html 문서를 자바스크립트로 동적으로 다룰 수 있다는 점이다. 각 노드에 프로퍼티나 메서드들이 있어 요소를 생성하기도 하고, 이동, 삭제도 할 수 있으며 클래스명을 추가하거나 바꾸는 등 속성을 조작할 수도 있다.
DOM Tree 부모 자식 형제 요소 접근하는 프로퍼티들..
요소노드에 대한 이동 프로퍼티
.children
, .firstElementChild
, .lastElementChild
, parentElement
, .previousElementSibling
, .nextElementSibling
.childNodes
, .firstChild
, .lastChild
, .parentNode
, .previousSibling
, .nextSibling
.innerHTML
: 요소 노드 내부의 HTML 코드를 문자열로 리턴.outerHTML
: 요소 노드 자체의 전체적인 HTML 코드를 문자열로 리턴.textContent
: HTML 태그 부분은 제외하고 텍스트만 가져온다.innerHTML
과 마찬가지로 내부의 값을 완전히 새로운 값으로 교체요소 노드 다루기
document.createElement('태그이름')
.textContent
, .innerHTML, ...
.prepend
, .append
, .after
, .before
.remove()
HTML 속성 다루기
.getAttribute('속성')
.setAttribute('속성', '값')
.removeAttribute('속성')
스타일 다루기
element.style.styleName = 'value';
element.className
, element.classList
.classList
.add()
, .remove()
.toggle(class, boolean)
CSS tip!
[속성이름]
- 대괄호 안에 있는 속성이름
을 가진 태그들을 선택
[속성이름="값"]
- 속성이름에 해당 값을 가진 태그들을 선택
비표준 속성 활용하기
data-*
속성을 사용해서 속성 활용!data-status
라는 속성이 있으면 element.dataset.status
로 접근 가능선택자로 활용
값을 표시할 태그를 구분할 때 활용
const fields = document.querySelectorAll('[data-field]');
const task = {
title: '코드 에디터 개발',
manager: 'CastleRing, Raccoon Lee',
status: '',
};
for (let tag of fields) {
const field = tag.dataset.field;
tag.textContent = task[field];
}
const btns = document.querySelectorAll('.btn');
for (let btn of btns) {
const status = btn.dataset.status;
btn.onclick = function () {
fields[2].textContent = status;
fields[2].dataset.status = status;
};
}
이벤트 등록하기
elem.addEventListener(event, handler)
elem.removeEventListener(event, handler)
→ 주의할 점! handler를 적을 때 () 쓰지 XX return값이 반환되어 이벤트가 등록 안됨
이벤트들..
mousedown
마우스 버튼을 누르는 순간mouseup
마우스 버튼을 눌렀다 떼는 순간click
왼쪽 버튼을 클릭한 순간dblclick
왼쪽 버튼을 빠르게 두 번 클릭한 순간contextmenu
오른쪽 버튼을 클릭한 순간mousemove
마우스를 움직이는 순간mouseover
마우스 포인터가 요소 위로 올라온 순간mouseout
마우스 포인터가 요소에서 벗어나는 순간mouseenter
마우스 포인터가 요소 위로 올라온 순간 (버블링이 일어나지 않음)mouseleave
마우스 포인터가 요소에서 벗어나는 순간 (버블링이 일어나지 않음)keydown
키보드의 버튼을 누르는 순간keypress
키보드의 버튼을 누르는 순간 ('a', '5' 등 출력이 가능한 키에서만 동작하며, Shift, Esc 등의 키에는 반응하지 않음)keyup
키보드의 버튼을 눌렀다 떼는 순간focusin
요소에 포커스가 되는 순간focusout
요소로부터 포커스가 빠져나가는 순간focus
요소에 포커스가 되는 순간 (버블링이 일어나지 않음)blur
요소로부터 포커스가 빠져나가는 순간 (버블링이 일어나지 않음)change
입력된 값이 바뀌는 순간
input
값이 입력되는 순간
select
입력 양식의 하나가 선택되는 순간
submit
폼을 전송하는 순간
scroll
스크롤 바가 움직일 때resize
윈도우 사이즈를 움직일 때 발생이벤트 객체
웹페이지에서 이벤트가 발생하면 이벤트 객체가 생성되고, 이벤트 핸들러의 첫번째 파라미터로 전달된다!
이벤트 객체의 프로퍼티들 (자주 사용되는..)
type | 이벤트 이름 ('click', 'mouseup', 'keydown' 등) |
---|---|
target | 이벤트가 발생한 요소 |
currentTarget | 이벤트 핸들러가 등록된 요소 |
timeStamp | 이벤트 발생 시각(페이지가 로드된 이후부터 경과한 밀리초) |
bubbles | 버블링 단계인지를 판단하는 값 |
button | 누른 마우스의 버튼 (0: 왼쪽, 1: 가운데(휠), 2: 오른쪽) |
---|---|
clientX, clientY | 마우스 커서의 브라우저 표시 영역에서의 위치 |
pageX, pageY | 마우스 커서의 문서 영역에서의 위치 |
offsetX, offsetY | 마우스 커서의 이벤트 발생한 요소에서의 위치 |
screenX, screenY | 마우스 커서의 모니터 화면 영역에서의 위치 |
altKey | 이벤트가 발생할 때 alt키를 눌렀는지 |
ctrlKey | 이벤트가 발생할 때 ctrl키를 눌렀는지 |
shiftKey | 이벤트가 발생할 때 shift키를 눌렀는지 |
metaKey | 이벤트가 발생할 때 meta키를 눌렀는지 (window는 window키, mac은 cmd키) |
key | 누른 키가 가지고 있는 값 |
---|---|
code | 누른 키의 물리적인 위치 |
altKey | 이벤트가 발생할 때 alt키를 눌렀는지 |
ctrlKey | 이벤트가 발생할 때 ctrl키를 눌렀는지 |
shiftKey | 이벤트가 발생할 때 shift키를 눌렀는지 |
metaKey | 이벤트가 발생할 때 meta키를 눌렀는지 (window는 window키, mac은 cmd키) |
표준 DOM 이벤트에서 정의한 이벤트 흐름
이벤트 버블링
e.stopPropagation()
을 사용해서 버블링을 막을 수 있다.
이벤트 캡쳐링
캡쳐링 단계에서 이벤트 핸들러를 동작시키기
addEventListener
에 세번째 프로퍼티에 true
또는 { capture:true }
이벤트 위임 (Event Delegation) - 버블링을 사용한 방법
자식 요소에서 일어날 이벤트를 부모에 위임한다. → 문제점! 부모에도 이벤트가 등록됨. 따라서 등록할 때 부모에 등록 안되도록 따로 예외처리 해야한다.
const list = document.querySelector('#list');
list.addEventListener('click', function(e) {
// if (e.target.tagName === 'LI')
if (e.target.classList.contains('item')) {
e.target.classList.toggle('done');
}
});
브라우저 기본 동작 막기 : e.preventDefault()
마우스
mousemove
mouseover
/mouseout
mouseenter
/ mouseleave
: 버블링 X, 자식요소 영역 계산 X.clientX
, .clientY
: 화면에 표시되는 창 기준 마우스 포인터 위치.pageX
, .pageY
: 웹 문서 전체 기준 마우스 포인터 위치.offsetX
, .offsetY
: 이벤트가 발생한 target 기준 마우스 포인터 위치.relatedTarget
: 이동 직전에 있던 요소 (mouseover, mouseout에만 있다)키보드
KeyboardEvent.type
keydown
: 키보드 버튼을 누른 순간keypress
: 키보드 버튼을 누른 순간, 출력값이 바뀌는 키에만 이벤트가 발생keyup
: 키보드 버튼을 눌렀다 뗀 순간KeyboardEvent property
.key
: 이벤트가 발생한 버튼의 값KeyboardEvent.code
: 이벤트가 발생한 버튼의 키보드에서 물리적인 위치input 태그 다루기
포커스 이벤트
focusin
: 요소에 포커스가 되었을 때focusout
: 요소에 포커스가 빠져나갈 때focus
: 요소에 포커스가 되었을 때 (버블링 x)blur
: 요소에 포커스가 빠져나갈 때 (버블링 x)입력 이벤트
input
: 사용자가 입력을 할 때change
: 요소의 값이 변했을 때