[JS] JavaScript 기초 정리 [2]

JavaScript 기초를 정리하여 자세히 알아보기

Featured image

목차

DOM

DOM 이란?

DOMDocument Object Model의 약자로 HTML의 작은 부분까지 접근할 수 있으며, 문서 구조, 스타일, 내용등을 변경하고 HTML로 이루어진 웹 페이지를 동적으로 움직이게 만드는 모델이다.

DOM 위에 있는 최상위 객체 모델은 BOM으로 window라는 객체가 있으며 DOMwindow객체의 하위 객체이며, window는 생략이 가능하다.

nodetree

Document Node
document 객체를 말하며 DOM 트리에 접근하기 위한 최상위 노드로 모든 DOM 트리에 접근하기 위해 시작하는 노드이다.

Element Node
HTML 구성 요소인 태그를 의미한다. 문서내 태그들은 모두 Element Node이며, 각각의 Element Node는 다시 AttributeText Node를 가진다.

Attribute Node
태그들의 속성을 객체화한 노드를 의미하며, 특정 태그의 속성에 접근할 때 사용해야 한다.

Text Node
태그의 텍스트를 객체화한 노드이며, 자식 노드를 가질 수 없고 DOM 트리구조의 마지막 노드이다.

HTML요소에 관한 메소드

HTML요소 선택

.getElementById() 해당 아이디의 요소를 선택
.getElementsByClassName() 해당 클래스에 속한 요소를 모두 선택
.getElementsByName() 해당 name 속성값을 가지는 요소를 모두 선택
.querySelectorAll() 해당 선택자로 선택되는 요소들을 모두 선택
.querySelector() 해당 선택자로 선택되느 요소를 1개 선택
appendChild(append할 Element) 선택한 Element의 자식 Element 마지막에 추가
remove() 선택된 Element 삭제
removeChild(삭제할 Element) 선택된 Element의 자식 Element 삭제
createElement(만들 Element) Element 생성, 그 후 appendChild()로 추가해줘야 함
firstChild/lastChild first면 첫번째, last면 마지막 자식 Element 반환
textContent 요소의 텍스트 내용만을 가져오거나 설정
innerText 요소의 보이는 텍스트만을 가져오거나 설정
innerHTML 요소의 HTML 내용을 가져오나 설정
window.content 현재 창 또는 프레임의 내용을 참조
window.onload 페이지가 완전히 로드된 후에 실행할 스크립트를 설정
window.dump 디버깅 정보를 출력
window.scrollTo 주어진 좌표로 창 또는 프레임의 내용을 스크롤

이벤트, 스타일 오브젝트

이벤트 오브젝트

type 이벤트의 종류를 참조
keyCode 키 코드를 참조
altKey Alt키가 눌렸는지 참조
button 마우스 버튼의 종류를 참조
screenX 모니터 화면에서 마우스의 x좌표를 참조
screenY 모니터 화면에서 마우스의 y좌표를 참조
clientX 브라우저 페이지에서 마우스의 x좌표를 참조
clientY 브라우저 페이지에서 마우스의 y좌표를 참조

스타일 오브젝트

color 문자 색을 참조 설정
fontFamily 글꼴을 참조 설정
fontSize 글꼴 크기를 참조 설정
fontWeight 글꼴의 굵기를 참조 설정
fontStyle 글꼴의 스타일을 참조 설정
textDecoration 문자 장식을 참조 설정
textTransform 영문자의 대소문자를 참조 설정
textAlign 행 정렬을 참조 설정
textIndent 첫 번째 행의 들여쓰기를 참조 설정

기타 오브젝트

history.back() 한 페이지 뒤로 돌아가기
history.Forward() 한 페이지 앞으로 가기
history.go() 지정한 값 만큼 이동
anchors.name 앵커 이름을 참조 설정
anchors.text 앵커의 텍스트를 참조 설정

위의 내용 말고도 각종 참조 설정하는 오브젝트들이 많다. 다양한 오브젝트들은 검색을 통해 찾아보자.

이벤트

이벤트란?

이벤트는 웹 페이지에서 특정 행동을 했을 때, 어떤 사건을 발생시키는 것이다.
이벤트 처리기는 이벤트가 발생했을 때, 개발자가 구현한 기능을 수행하도록 함수를 연결하는 것을 이벤트 핸들러 또는 이벤트 리스너라고 한다.

이벤트 핸들러와 리스너

이벤트 핸들러

이벤트 핸들러는 하나의 요소에 하나의 이벤트를 처리할 수 있다. HTML 태그에 설정하거나, DOM 요소 객체의 이벤트 처리기 프로퍼티로 설정하는 방법이다.

이벤트 핸들러는 앞에 on을 붙여 주고 이벤트에 대한 동작을 처리한다.

<!--html태그에 바로 사용하는 법-->
<div onclick="alert('클릭')">클릭</div>

<!--함수를 사용하는 법-->
<div onclick="view()">클릭</div>
    
<script>
  function view() {
    alert("클릭");
  }
</script>

이벤트 리스너

이벤트 리스너는 하나의 요소에 여러가지 이벤트를 처리할 수 있으며, addEventListner() 메소드를 사용한다.
DOM객체. addEventListener(이벤트명, 실행할 함수명, 옵션)

<html>
  <a>클릭</a>
</html>
<script>
  const a = document.querySelector('a');
  a.addEventListener('click', showConsole);
  function showConsole() {
  	console.log("콘솔로그 실행");
  }
</script>

이벤트 리스너를 삭제하려면 밑의 방식을 사용하면 된다

DOM객체. removeEventListener(이벤트명, 실행했던 함수명);

주요 이벤트 종류

이벤트 핸들러를 사용할 경우 이벤트 앞에 on붙이기

마우스 이벤트

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

키 이벤트

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

폼 이벤트

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

기타 이벤트

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

지금까지 자바스크립트의 기초를 알아봤고, 나중에 자바스크립트로 프로젝트를 하면서 모듈화와 AJAX, 비동기처리 등에 대해 공부해봐야겠다.