DOM(Document Object Model) 개요
•
DOM(document object model)은 HTML과 XML 문서의 구조를 정의하는 API 제공
•
DOM은 HTML 문서의 내용을 조작할 수 있는 API로 HTML을 계층구조 형식의 객체로 표현
•
DOM으로 HTML 문서의 검색과 조작(추가, 수정, 삭제)을 할 수 있다.
•
HTML 계층 구조의 제일 위에는 document 노드가 있다.
•
그 아래로 HTML 태그나 요소(element)들을 표현하는 노드와 문자열을 표현하는 노드가 있다.
문서 객체 만들기
•
createElement(tagName)
◦
element node를 생성 (태그 생성)
•
reateTextNode(text)
◦
text node를 생성
•
appendChild(node)
◦
객체에 node를 child로 추가
•
setAttribute(name, value)
◦
객체의 속성을 지정
◦
setAttribute를 쓰지 않고도 객체의 속성을 direct로 지정할 수 있다. (ex) profile.width = 150;
이런 방법은 간단하지만, 웹 표준이나 브라우저가 지원하는 태그의 속성만 사용할 수 있다.
•
getAttribute(name)
◦
객체의 속성값을 가져옴
•
innerHTML
◦
문자열을 HTML 태그로 삽입
•
inerText
◦
문자열을 text node로 삽입
문서 객체 가져오기 (jQuery의 Selector)
•
객체 가져오기
◦
getElementById(id)
▪
태그의 id 속성이 id와 일치하는 element 객체 얻기
◦
getElementsByClassName(classname)
▪
태그의 class 속성이 class name과 일치하는 element 배열 얻기
◦
getgElementsByTagName(tagname)
▪
태그이름이 tagname과 일치하는 element 배열 얻기
◦
getElementsByName(name)
▪
태그의 name 속성이 name과 일치하는 element 배열 얻기
◦
querySelector(selector)
▪
selector에 일치하는 첫번째 element 객체 얻기
▪
id를 사용하는 경우에 주로 사용
◦
querySelectorAll(selector)
▪
selector에 일치하는 모든 element 배열 얻기
▪
id를 제외한 class, tag 등을 활용할 때 주로 사용
문서 객체 제거
•
removeChild(childnode)
◦
객체의 자식 노드를 제거
Event
•
웹페이지에서 여러 종류의 상호작용이 있을 때마다 이벤트가 발생
•
사용자가 마우스를 클릭하였을 때, 키보드를 눌렀을 때 등과 같이 다양한 종류의 이벤트가 존재
•
JavaScript를 사용하여 DOM에서 발생한 이벤트를 감지하여 이벤트에 대응하는 여러 작업 수행
•
이벤트는 일반적으로 함수와 연결이 되고, 이 함수는 이벤트가 발생하기 전에는 실행되지 않다가 이벤트가 발생할 경우 실행 >> 이벤트 핸들러(Handler) 또는 이벤트 리스너(Listner)라 하며 이 함수에 이벤트 발생시 실행해야 하는 코드 작성
Event - 마우스 이벤트
•
웹 초기에는 load, click등 소수의 이벤트만 사용
•
마우스 이벤트는 웹 어플리케이션에서 가장 많이 사용하는 이벤트
•
마우스 이벤트 핸들러에 전달되는 이벤트 객체에는 마우스 위치와 버튼 상태 등의 정보를 담고 있다.
Event - 키보드 이벤트
•
키보드 이벤트 순서 : down → press → up
•
down : 누르기 시작하는 시점
•
press : 누르고 떼기 직전
•
up : 뗀 시점
Event - 프레임 이벤트
•
Frame 관련 이벤트는 특정 DOM 문서에 관련된 이벤트가 아니라 Frame 자체에 대한 이벤트
•
Frame 이벤트 중에서는 load 이벤트가 가장 많이 사용
•
Load는 문서 및 자원들이 모두 웹 브라우저에 탑재되면 이벤트를 수행
•
onload - document, image, frame 등이 모두 로딩되었을 때 발생
Event - 폼 이벤트
•
자주 사용되는 이벤트로 form이 전송될 때에는 submit 이벤트가 발생
•
Form을 초기화할 때는 reset 이벤트가 발생
•
submit과 reset은 이벤트 핸들러에서 취소할 수 있다.
<input type = "submit" onclick()> 형태에서 onclick 내부에 submit이 구현되어있을 경우 submit이 2중으로 중복되는 상황이 발생한다. → 둘 중 하나는 취소해야함 (일반적으로 input의 submit)
이벤트 핸들러 등록
•
인라인 이벤트 핸들러
◦
HTML 요소의 내부에서 직접 이벤트 핸들러를 등록
◦
이러한 방식은 HTML 코드를 JavaScript 코드가 침범한다는 문제가 있음
◦
최근 관심받고 있는 CBD(Component Based Development) 방식의 Angular / React / Vue.js 와 같은 framework/library 에서는 인라인 방식으로 이벤트를 처리 (CBVD에서는 html, css, js를 view의 구성 요소로만 보기 때문)
•
이벤트 핸들러 프로퍼티 방식
◦
HTML에 직접 이벤트 핸들러를 등록하는 방법 대신에 JavaScript에서 이벤트 핸들러를 등록
◦
JavaScript에서 이벤트 핸들러를 등록함으로써 HTML 코드와 JavaScript 코드를 분리
◦
이벤트 대상이 되는 특정 DOM을 선택하고 이벤트 핸들러를 등록
◦
단, 이벤트 핸들러 프로퍼티에 하나의 이벤트 핸들러만을 바인딩 할 수 있다는 단점을 가짐
(여러개 정의할 경우 마지막에 정의한 이벤트만 적용됨)
•
addEventListner 메서드 방식
◦
전달 인자의 첫 번째에는 이벤트 이름, 두번째에는 이벤트 핸들러, 세번째에는 캡쳐링 여부
◦
첫 번째 전달인자의 이벤트 이름에는 'on'을 제거한 이벤트 이름을 사용
◦
장점
▪
하나의 이벤트에 대해 하나 이상의 이벤트 핸들러를 추가할 수 있음
▪
캡처링과 버블링을 지원
▪
HTML 요소 뿐만 아니라 모든 DOM에 적용 가능
버블링과 캡처링
캡처링
•
이벤트가 발생한 요소를 포함하는 부모 HTML로부터 이벤트 근원지인 자식요소까지 검사
•
이벤트 캡쳐링에서 캡쳐속성의 이벤트 핸들러가 등록되어 있으면 수행
버블링
•
이벤트 발생 요소부터 요소를 포함하는 부모요소까지 올라가면서 이벤트를 검사
•
이벤트 버블링에서 버블속성의 이벤트 핸들러가 등록되어 있으면 수행
Web Storage
•
WebStorage API : LocalStorage
◦
데이터를 사용자 로컬에 보존하는 방식
◦
데이터를 저장, 덮어쓰기, 삭제 등 조작 가능
◦
자바스크립트(JavaScript)로 조작
◦
모바일에서도 사용 가능
•
Cookie와의 차이점
◦
유효기간이 없고 영구적 이용 가능
◦
5MB까지 사용 가능 (쿠키는 4KB까지)
•
LocalStorage 기본 구성
◦
키(Key)와 값(Value)을 하나의 세트로 저장
◦
도메인과 브라우저별로 저장
◦
값은 반드시 문자열로 저장됨
Web Storage - localStorage vs sessionStorage
•
SessionStorage와 차이점
◦
local -
