1. DOM (Document Object Model)

웹 브라우저는 HTML 문서를 해석하고, 이 결과를 화면을 통해 보여준다. 이 과정을 렌더링이라 한다.

브라우저는 HTML을 해석하여 요소들을 트리 형태로 구조화해 표현하는 문서 객체를 생성한다. 이를 DOM이라 한다.

브라우저는 DOM을 통해 웹 콘텐츠들을 렌더링한다.

DOM은 자바스크립트를 사용하여 웹 콘텐츠를 추가, 수정, 삭제하거나 마우스 클릭이나 키보드 타이핑 등 이벤트에 대한 처리를 정의할 수 있게 제공되는 프로그래밍 인터페이스이다.

문서에 접근하자 그리고 조작하자, document!

window.document;

브라우저에 렌더링 되고 있는 문서를 의미한다. 지금 보이는 화면의 요소에 접근할 수 있는 것.

페이지 콘텐츠 DOM에 대한 진입점 역할을 하는 프로그래밍 인터페이스. 페이지의 정보를 얻거나 웹 요소를 생성할 수 있다.

document의 메소드들.

전달받은 선택자를 인자로 사용하여 문서에서 이와 일치하는 요소 중 가장 첫 번째를 반환한다. 일치하는 요소가 없으면 null 데이터를 반환한다.

인자로는 태그, id, class 모두 사용가능하다. CSS 선택자로 유효한 속성들을 사용할 수 있다.

document.querySelector();

태그의 id 값을 인자로 받아 일치하는 요소를 반환.

document.getElementById();

예시) querySelector 함수를 이용해서 DOM을 제어한 뒤, 내부에 텍스트 요소를 추가한다.

const a = document.querySelector();
a.textContent = '이 텍스트를 대입';

해당 노드가 포함하고 있는 텍스트 콘텐츠를 표현하는 속성, 요소가 포함한 텍스트를 읽거나 변경할 수 있다.

2. 이벤트

프로그래밍하고 있는 시스템에서 일어나는 사건(action) 혹은 발생(occurrence).

사용자가 어떤 행동을 했을 때 혹은 내부적인 상황이 발생했을 때, 실행되는 행동을 뜻한다.

이벤트의 사용 예시

어떤 문서에서 가장 첫번째로 위치하고 있는 a 태그를 DOM 제어로 가져온다.

const a = window.document.querySelector('a');

이 변수에 여러 이벤트 함수를 붙여 사용할 수 있다.

여기서 함수는 호출용도가 아니라, 대입용도이기 때문에 ()를 붙이면 안된다.

특정 행동이 발생되면 'clickevent'라는 함수가 실행되는 것이다.

a.onclick = clickevent; 마우스로 클릭했을 때.

a.onkeydown = clickevent; 키보드를 눌렀을 때.

...등등.

이벤트 핸들러를 사용해도 된다.

a.addEventListener('click', clickevent);

3. createElement, appendChild, preventDefault

createElement

HTML의 요소를 만들어주는 js 메소드.

createElement로 HTML 태그를 생성하고, appendChild로 어느 개별 노드의 자식으로 추가해주어야 사용할 수 있다.

appendChild

개별 노드에 자식 요소를 추가시켜주는 메소드. 추가한 이후 자식 노드를 반환한다.

append 메소드는 자식 노드를 반환하지 않지만 문자열도 추가해준다.

preventDefault

event.preventDefault();

기본적으로 발동되는 이벤트들을 모두 차단한다.

form 태그의 submit 시 새로고침이 일어나는 현상 등을 모두 차단한다.

0. 참고자료

윈터루드, 자바스크립트 기초 강의. (인프런)

유노코딩, 입문자를 위한 자바스크립트 기초 강의. (인프런)