#1. Javascript의 DOM
1. DOM의 기본구조
1) DOM이란?
- DOM이란 문서 객체 모델(Document Object Model)의 약자로 HTML 태그(요소)들을 웹 브라우저에서 자바스크립트로 사용하기 위해 만들어진 웹 문서이다.
- 객체 모델을 통해 자바스크립트는 동적 HTML을 생성하는데 필요한 모든 기능을 얻을 수 있다.
- 즉, DOM은 HTML 요소를 가져오고, 변경하고, 추가하거나 삭제하는 방법에 대한 표준이다.
2) BOM
- 웹 개발의 모든 서비스는 웹 브라우저를 바탕으로 실행된다.
- BOM은 브라우저 객체 모델(Broswer Object Model)의 약자로 웹 브라우저를 통해 실행될 때 자바스크립트가 갖게되는 기본 객제 구조를 말한다.
- 모든 객체는 window 객체의 하위 객체로서 존재한다.
- DOM은 BOM의 한 부분이다.
3) 작성 방법
- 자바스크립트의 코드는 <script> 태그 안에서 작성된다. (혹은 src 속성을 통해 연결)
- HTML 안에서 실해되는 자바스크립트는 document라는 내장 객체를 갖게 된다.
- 값이 있는 속성 : Attribute
- 값이 없는 속성 : property
- HTML 문서의 어느곳에서나 존재할 수 있지만, 보통 <body> 태그의 제일 마지막에 위치한다.
- 코드 해석을 위에서 부터 순서대로 해석하기 때문에 <head> 태그에 있으면 <script> 태그가 다 불러오기 전까지 <body> 태그를 읽지 않는다.
- 로딩 속도에도 차이가 있다. (<head>에 위치하면 느림)
- 페이지 로딩 속도가 빠르기 때문에 검색엔진이 이 페이지를 식별하는데 수월해진다.
- 구글은 몇 년 전 부터 자바스크립트 코드가 아래에 배치된 페이지를 우선적으로 검색한다.
2. HTML 태그를 객체로 가져오기
요소를 사용하기 위해서는 메서드를 통해 태그에 접근해야한다. (메서드를 통해 선택한 요소는 변수에 대입하여 사용할 수 있다.)
1) 태그 이름으로 가져오기
- 해당 태그명을 가진 요소들을 배열에 담에 인덱스에 맞는 요소를 반환한다.
- 특정 태그 모두를 가져오기 때문에 반환되는 객체는 항상 배열 형식이다.
- 반복문 처리가 필요하다. (기본 반복문 사용)
- 반환되는 객체의 수가 너무 많기 때문에 잘 사용하지 않는다.
const 객체이름 = document.getElementsByTagName("태그이름");
2) ID 값으로 가져오기
- id 값은 HTML 문서 안에서 고유한 요소이므로 항상 단일 객체로 반환된다. (getElement로 끝에 s가 없다.)
- 반복문이 불필요 하다.
- 자바스크립트는 중복 id가 있을 경우 처리가 불가능하다.
- id 값이 중복되면 그 중에 가장 첫 번째 값을 가져온다.
const 객체이름 = document.getElementById("id이름");
// id이름 앞에 '#'을 붙이지 않는다.
3) class 이름으로 가져오기
- 해당 class명을 가진 요소들을 배열에 담아 요소를 반환한다.
- 특정 class가 적용된 모두를 가져오기 때문에 반환되는 객체는 배열 형식이다.
- 반복문 처리가 필요하다. (for - of문 사용)
const 객체이름 = document.getElementsByClassName("class이름");
// class이름 앞에 '.'을 붙이지 않는다.
4) CSS 선택자로 단일 객체 가져오기
- CSS 선택자의 형태에 상관 없이 단일 객체로 반환한다.
- 만약 동일한 선택자를 적용 받는 요소가 두개 이상인 경우 가장 첫 번째 요소만 반환한다.
const 객체이름 = document.querySelector("CSS선택자");
// 선택자 앞에 '.' , '#'을 붙인다.
5) CSS 선택자로 복수 객체 가져오기
- CSS 선택자의 형태에 상관 없이 복수 객체를 배열로 반환한다.
- 반복문 처리가 필요하다. (forEach문 사용)
- 리턴 타입이 배열과 비슷한 NodeList 타입의 객체
- 배열과 특성은 동일하지만, forEach문 이외의 탐색을 위한 메서드는 포함하고 있지 않다.
const 객체이름 = document.querySelectorAll("CSS선택자");
// 선택자 앞에 '.' , '#'을 붙인다.
3. innerHTML
- HTML 태그 안에 내용을 넣을 수 있다.
- 자바스크립트로 가져온 HTML 객체는 innerHTML 이라는 속성값을 갖는다.
- 이 값에 할당한 내용은 실제 HTML의 시작 태그와 끝 태그 사이에 적용된다.
<body>
<div id="test"></div>
<script>
const ex = document.querySelector("#test");
ex.innerHTML = "이 부분에 innerHTML이 들어간다.";
</script>
</body>
4. Javascript Event
1) Event의 정의
- 사용자의 클릭, 마우스 오버, 페이지 로딩 직후, 페이지 종료 직전 등 프로그램이 겪는 어떠한 일.
- 자바스크립트에는 브라우저 관련 기능 안에 이미 다양한 이벤트를 감지하는 기능이 구현되어, 내장 기능으로 개발자에게 제공된다.
2) 이벤트 리스너
- 어떠한 이벤트가 발생하기를 기다리고 있따가 이벤트 발생시 연결된 함수를 호출해 주는 기능.
- 이벤트를 감지하는 것은 자바스크립트 안에 이미 내장되어 있지만, 어떤 이벤트가 발생할지는 웹페이지 마다 다를 수 있기 때문에 미리 구현해 놓을 수 없다. (페이지 마다 개별 구현이 필요함)
- 이벤트를 감지하는 기능이 수행할 동작을 콜백함수로 요구한다.
객체이름.addEventListener("이벤트이름", 콜백함수);
3) 이벤트 핸들러
- HTML 태그의 속성 형태로 존재한다.
- 이벤트 발생시 실행할 자바스크립트 코드 영역
- HTML과 자바스크립트 코드를 분리하는 경향이 생기면서 이벤트 핸들러는 거의 사용되지 않는다.
<태그 on이벤트이름="자바스크립트 코드"></태그>
5. Javascript Event 종류
1) 마우스 관련
| 이벤트 리스너 | 이벤트 핸들러 | 설명 |
| click | onclick | 대상을 클릭했을 경우 |
| dblclick | ondblclick | 대상을 더블 클릭했을 경우 |
| mousedown | onmousedown | 마우스 버튼을 누르고 있는 동안 |
| mouseup | onmouseup | 마우스 버튼을 누르고 있다가 땐 경우 |
| mousemove | onmousemove | 마우스를 움직였을 경우 |
| mouseout | onmouseout | 대상에서 마우스 포인터가 벗어났을 경우 |
| mouseover | onmouseover | 대상에 마우스 포인터가 위치했을 경우 |
| dragdrop | ondragdrop | 대상을 클릭한 상태에서 이동했을 경우 |
2) 키보드 관련
| 이벤트 리스너 | 이벤트 핸들러 | 설명 |
| keydown | onkeydown | 키가 눌러져 있는 동안 반복 실행된다 |
| keyup | onkeyup | 키를 눌렀다가 놓았을 경우 |
| keypress | onkeypress | 화면에 출력되는 키가 눌러질 경우(한글x) |
| keycode | onkeycode | 키보드의 각 버튼에 할당된 일련번호 (ex. enter key는 13번) |
3) form 요소 관련
| 이벤트 리스너 | 이벤트 핸들러 | 설명 |
| submit | onsubmit | 입력 양식을 서버로 보냈을 경우 (submit을 누른 경우) |
| change | onchange | 대상에 입력되어 있는 값이 바뀐 경우 (입력상자, 체크박스, 라디오, 드롭다운 .. ) |
| blur | onblur | 대상에서 포커스가 빠져나간 경우 |
| focus | onfocus | 대상에 포커스가 들어 온 경우 |
| reset | onreset | 대상을 재시작 시켰을 경우 |
| slect | onselect | 입력 양식의 한 필드를 선택했을 경우 |
4) 브라우저 관련
- 브라우저 레벨에서 수행되는 이벤트들은 window 객체에서 이벤트를 정의해야한다. (윈도우 페이지를 관여할 때)
| 이벤트 리스너 | 이벤트 핸들러 | 설명 |
| abort | onabort | 이미지를 읽다가 중단했을 경우 |
| error | onerror | 에러가 발생했을 경우 |
| load | onload | 대상을 열었을 경우 (주로 페이지 로딩 직후) |
| move | onmove | 윈도우나 프레임을 움직였을 경우 |
| resize | onresize | 윈도우나 프레임의 크기가 변경됐을 경우 |
| unload | onunload | 대상을 종료했을 경우 |
| scroll | onscroll | 스크롤이 발생하는 경우 |
5) 트랜지션 관련
| 이벤트 리스너 | 이벤트 핸들러 | 설명 |
| transitionrun | ontransitionrun | 트랜지션이 동작하는 동안 |
| transitionstart | ontransitionstart | 트랜지션이 시작된 경우 |
| transitioncancel | ontransitioncancel | 트랜지션이 취소된 경우 |
| transitionend | ontransitionend | 트랜지션이 종료된 경우 |
'국비수업 > JavaScript' 카테고리의 다른 글
| [Javascript] HTML 생성하기 (0) | 2022.03.25 |
|---|---|
| [Javascript] HTML 제어하기 & 연습문제 (0) | 2022.03.24 |
| [Javascript] 비동기처리 (0) | 2022.02.17 |
| [Javascript] 예외처리 (0) | 2022.02.16 |
| [Javascript] [연습문제] 내장 기능을 활용한 실습 (0) | 2022.02.16 |