BOM (Browser Object Model)

• 웹 브라우저를 통해 실행될 때 Javascript가 갖게되는 기본 객체 구조.
• 모든 객체는 window 객체의 하위 객체로서 존재한다.

HTML 태그를 객체로 가져오기

태그 이름으로 가져오기

특정 태그 모두를 가져오기 때문에 반한되는 객체는 항상 배열 형식이다.

반환되는 객체의 수가 너무 많기 때문에 잘 사용하지 않는다.

1

const 객체 = document.getElementsByTagName("태그이름");

ID값으로 가져오기

ID이름에 “#”을 붙이지 않는다.

ID값은 HTML 문서 안에서 고유한 요소이므로 항상 단일 객체로 반환된다.

1

const 객체 = document.getElementById("ID이름");

CSS 클래스 이름으로 가져오기

클래스 이름에 점을 붙이지 않는다.

특정 클래스가 적용된 모두를 가져오기 때문에 반한되는 객체는 배열 형식이다.

1

const 객체 = document.getElementsByClassName("CLASS이름");

CSS 선택자로 단일 객체 가져오기

CSS 선택자의 형태에 상관 없이 단일 객체로 반환된다.

만약 동일한 셀렉터를 적용받는 요소가 두 개 이상인 경우 가장 첫 번째 요소만 반환한다.

1

const 객체 = document.querySelector("CSS선택자");

CSS 선택자로 복수 객체 가져오기

CSS 선택자의 형태에 상관 없이 복수 객체를 배열로 반환한다.

1

const 객체 = document.querySelectorAll("CSS선택자");

HTML 태그안에 내용 넣기

Javascript 가져온 HTML 객체는 innerHTML 이라는 속성값을 갖는다.

이 값에 할당한 내용은 실제 HTML의 시작태그와 끝 태그 사이에 적용된다.

1
2

const 객체 = document.querySelector("#hello");
객체.innerHTML = "Hello World";

1
2

<div id="hello">Hello World</div>
----------- innerHTML

Javascript 이벤트

이벤트의 정의

프로그램이 겪는 어떠한 사건.

• 사용자의 클릭, 마우스 오버
• 페이지 로딩 직후, 페이지 종료 직전

자바스크립트가 제공하는 브라우저 관련 기능 안에 이미 다양한 이벤트를 감지하는 기능이 구현되어 내장 기능으로 개발자에게 제공된다.

이벤트 리스너

이벤트가 발생할 때 까지 대기하고 있다가 이벤트가 발생시 호출되는 미리 정의된 함수.

이벤트를 감지하는 것은 미리 구현해 놓을 수 있지만 어떤 이벤트가 발생했을 때 어떤 동작을 수행할지는 웹 페이지마다 다를 수 밖에 없으므로 미리 구현해 놓을 수 없다. (페이지마다 개별 구현이 필요함)

이벤트를 감지하는 기능이 수행할 동작을 콜백함수로 요구한다.

1

객체.addEventListener("이벤트이름", 콜백함수);

이벤트 핸들러

HTML 태그의 속성 형태로 존재하는, 이벤트 발생시 실행할 자바스크립트 코드 영역

Javascript가 고도화 됨에 따라 HTML과 Javascript 코드를 분리하는 경향이 생기면서 이벤트 핸들러는 거의 사용되지 않는 추세.

1

<태그이름 on이벤트이름="...JS코드영역..."></태그이름>

Javascript 이벤트 종류

마우스관련

키보드 관련

form 요소 관련

브라우저 관련

트랜지션 관련