JavaScript와 HTML의 관계, DOM 트리, 이벤트
<body>
맨 아래 <script src="PATH/JS">
태그를 추가하면 html 문서에서 자바스크립트 파일을 참조할 수 있다 (권장)<script>
태그 내부에 자바스크립트 코드를 쓸 수도 있다document.getElementById('id');
해당 id를 가진 태그 리턴document.getElementsByClassName('class');
해당 class를 가진 태그들을 요소로 갖는 HTMLCollection이라는 유사 배열(Array-Like Object)을 리턴length
프로퍼티를 사용할 수 있다document.getElementsByTagName('tag')
해당 태그들을 요소로 갖는 HTMLCollection 리턴document.querySelector('css selector')
해당 css 선택자를 갖는 태그 중 가장 첫 번째 요소를 리턴document.querySelectorAll('css selector')
해당 css 선택자를 갖는 태그들을 요소로 갖는 NodeList라는 유사 배열을 리턴console.log()
같은 내장 함수들도 원래 window.console.log()
처럼 써야하지만 자바스크립트에서는 window.
을 생략해도 된다는 규칙이 있다document
웹 문서의 최상단 객체console.log(document)
HTML 객체를 HTML 형태로 리턴console.dir(document)
HTML 객체를 객체 형태로 리턴console.dir()
과 console.log()
의 차이dir
메소드는 항상 문자열 표시 형식으로 콘솔에 출력log
메소드는 파라미터로 전달받은 값을 위주로 출력하는 반면, dir
메소드는 객체의 속성을 자세하게 출력한다log
메소드는 쉼표로 구분된 모든 값을 출력하는 반면, dir
메소드는 여러 값을 전달하더라도 첫 번째 값만 출력한다node
DOM 트리 내부의 각 객체Element Node
태그Text Node
문자열leaf node
라고도 한다element.children
element의 자식 요소 모음(HTMLCollection) 리턴element.firstElementChild
element의 첫 번째 자식 요소 하나 리턴element.lastElementChild
element의 마지막 자식 요소 하나 리턴element.parentElemt
element의 부모 요소 하나 리턴element.previousElementSibling
element의 이전(previous) 혹은 좌측(left)에 있는 요소 하나 리턴element.nextElementSibling
element의 다음(next) 혹은 우측(right)에 있는 요소 하나 리턴previousSibling
, nextSibling
등 Element
라는 단어가 빠진 메소드를 사용하면 개행 문자같은 텍스트 노드들도 고려해야 한다element.innerHTML
요소 노드 내부의 HTML 코드를 문자열로 리턴 (내부에 있는 줄 바꿈이나 들여쓰기 모두 포함)element.outerHTML
요소 노드 자체의 전체적인 HTML 코드를 문자열로 리턴 (내부에 있는 줄 바꿈이나 들여쓰기 모두 포함)element.textContent
요소 안의 내용들 중에서 HTML 태그 부분은 제외하고 텍스트만 리턴 (내부에 있는 줄 바꿈이나 들여쓰기 모두 포함)const element = document.createElement('tag');
element.textContent
element.innerHTML
element.outerHTML
element2.prepend(elment)
요소 내부의 시작 부분에 삽입element2.append(elment)
요소 내부의 끝 부분에 삽입element2.before(elment)
요소 앞에 삽입element2.after(elment)
요소 뒤에 삽입element.remove()
노드 삭제prepend
, append
, before
, after
메소드에 html 객체 내의 노드를 인자로 전달하면 노드를 이동시킬 수 있다element.property_name
element.getAttribute('property_name')
element.setAttribute('property_name', 'property_value')
element.removeAttribute('property_name')
element.style.propertyName = 'property-value'
존재하는 속성이라면 수정하고 존재하지 않는다면 추가한다element.className = 'property-name'
element.classList
클래스의 속성값을 유사배열로 리턴element.classList.add('property-name')
클래스 추가element.classList.remove('property-name')
클래스 삭제element.classList.toggle('property-name', [표현식])
클래스가 존재한다면 삭제하고 존재하지 않는다면 추가한다 (두 번째 인자가 없을 경우)data-*
속성data-
로 시작하는 속성은 모두 dataset이라는 프로퍼티에 저장된다data-status
라는 속성이 있다면, element.dataset.status
라는 프로퍼티에 접근해서 그 값을 가져올 수 있다element.onclick = function (arguments) {statements}
element.addEventListener('click' event)
이벤트 핸들러 추가element.removeEventListener('click', event)
이벤트 핸들러 삭제mousedown
마우스 버튼을 누르는 순간mouseup
마우스 버튼을 눌렀다 떼는 순간click
왼쪽 버튼을 눌렀다 떼는 순간dblclick
왼쪽 버튼을 빠르게 두 번 클릭한 순간contextmenu
오른쪽 버튼을 클릭한 순간mousemove
마우스를 움직이는 순간mouseover
마우스 포인터가 요소 위로 올라온 순간mouseout
마우스 포인터가 요소에서 벗어나는 순간mouseenter
마우스 포인터가 요소 위로 올라온 순간 (버블링이 일어나지 않음)mouseleave
마우스 포인터가 요소에서 벗어나는 순간 (버블링이 일어나지 않음)keydown
키보드의 버튼을 누르는 순간keypress
키보드의 버튼을 누르는 순간keyup
키보드의 버튼을 눌렀다 떼는 순간focusin
요소에 포커스가 되는 순간focusout
요소로부터 포커스가 빠져나가는 순간focus
요소에 포커스가 되는 순간 (버블링이 일어나지 않음)blur
요소로부터 포커스가 빠져나가는 순간 (버블링이 일어나지 않음)change
입력된 값이 바뀌는 순간input
값이 입력되는 순간select
입력 양식의 하나가 선택되는 순간submit
폼을 전송하는 순간scroll
스크롤 바가 움직일 때resize
윈도우 사이즈를 움직일 때e
라고 쓴다type
이벤트 이름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키)e.preventDefault()
메소드로 브라우저의 기본 동작을 막을 수 있다MouseEvent.button
MouseEvent.type
click
contextmenu
dbclick
mousedown
mouseup
mousedown
, mouseup
, click
순서로 이벤트 발생dbclick
이벤트 발생mousedown
, mouseup
, contextmenu
순서로 이벤트 발생mousedown
, contextmenu
순서로 이벤트 발생mouseup
이벤트 발생MouseEvent.type
mousemove
MouseEvent.clientX, clientY
화면에 표시되는 창 기준 마우스 포인터 위치MouseEvent.pageX, pageY
웹 문서 전체 기준 마우스 포인터 위치MouseEvent.offsetX, offsetY
이벤트가 발생한 타겟 요소 기준 마우스 포인터 위치MouseEvent.type
mouseover
mouseout
mouseEvent.relatedTarget
MouseEvent.type
mouseenter
mouseleave
mouseenter
, mouseleave
의 특징input
사용자가 입력을 할 때change
요소의 값이 변했을 때scroll
이벤트 핸들러를 등록하는 경우가 많다scrollY
프로퍼티를 활용해서 scroll 이벤트 핸들러를 효과적으로 다룰 수 있다Reference