✔ DOM
1. DOM 기본.
- DOM(Document Object Model) : HTML과 XML 문서 구조를 정의하는 API 제공.
- 문서 요소 집합을 트리 형태의 계층 구조로 HTML 표현.
- 최상위 노드 : document
- 이하 태그나 요소들을 표현하는 노드와 문자열 표현하는 노드.
- HTML 문서의 조작(추가, 수정, 삭제) 가능.
2. DOM 종류.
◾ 문서 객체 만들기.
- text node를 갖는 객체와 갖지 않는 객체로 나뉨.
- 객체 생성.
- createElement(tagNam) : element node 생성.
- createTextNode(text) : text node 생성.
- appendChild(node) : 객체에 node를 child로 추가.
- 객체 속성 설정.
- setAttribute(name, value) : 객체 속성 지정.(웹 브라우저가 지원하지 않는 태그의 속성도 가능.)
- dot(.)으로도 추가할 수 있지만 웹 브라우저가 지원하는 태그의 속성만 사용 가능.
- getAttribute(name) : 객체의 속성값 반환.
- setAttribute(name, value) : 객체 속성 지정.(웹 브라우저가 지원하지 않는 태그의 속성도 가능.)
- inner 속성.
- innerHTML : 문자열을 HTML 태그로 삽입.
- innerText : 문자열을 text node로 삽입.
◾ 문서 객체 가져오기.
- 객체 가져오기
- getElementById : id 일치하는 elelment 얻기.
- getElementsByClassName : classname이 일치하는 element 배열 얻기.
- getElementsByTagName : tagname이 일치하는 element 배열 얻기.
- getElementsByName : name 속성이 일치하는 element 배열 얻기.
- querySelector : selector에 일치하는 첫 번째 element 객체 얻기.
- querySelecotrAll : selector에 일치하는 element 배열 얻기.
◾ 문서 객체 제거.
- 객체 제거
- removeChild(childnode) : 객체의 자식 노드 제거.
✔ Event
1. Event 기본.
- 웹 페이지에서 여러 종류의 상호작용이 있을 때마다 이벤트 발생.
- JavaScript를 사용하여 DOM에서 발생하는 이벤트를 감지하여 대응하는 작업 수행.
- 일반적으로 함수와 연결.
- 이벤트 발생전에는 실행되지 않다가 이벤트가 발생할 경우 실행.
- 이벤트 핸들러(Handler), 이벤트 리스너(Listener) 라 부르며 함수에 이벤트 발생시 실행해야하는 코드 작성.
2. Event 종류.
◾ 마우스 이벤트
- 가장 많이 사용하는 이벤트.
- onClick
- ondblclick
- onmouseup
- onmousedown
- onmouseover
- onmouseout
- onmousemove
◾ 키보드 이벤트
- 키보드 커서가 웹 브라우저에 나타나는 지점에서 키보드 조작시 이벤트 발생.
- 운영체제에 영향을 받아 특정 키가 이벤트 핸들러에 전달되지 않을 수 있음.
- 키보드 커서가 없다면 document에서 이벤트 발생.
- onkeypress (ASCII)
- onkeydown (keyCode)
- onkeyup
◾ Form(폼) 이벤트
- form 전송될 때 submit 이벤트 발생.
- form 초기화에 reset 이벤트 발생.
- onsubmit
- onreset
- oninput
- onchange
- onfocus(focusin)
- onblur(focusout)
- onselect
3. 이벤트 핸들러 등록
- 이벤트 핸들러(리스너) : 이벤트를 감시하고 대응하는 작업을 등록하는 방법
- HTML 요소의 내부에서 직접 이벤트 핸들러 등록(인라인)
- HTML 코드를 JavaScript 코드가 침범하는 문제.
- 최근의 CBD(Component Based Development) 방식의 Angular / React / Vue.js와 같은 곳에서는 인라인 방식으로 이벤트 처리.
- 이벤트 핸들러 프로퍼티 방식
- 이벤트 핸들러를 등록하여 HTML코드와 JavaScript 코드 분리.
- 이벤트 대상이 되는 특정 DOM을 선택하고 이벤트 핸들러 등록.
- 이벤트 핸들러 프로퍼티에 하나의 이벤트 핸들러만 바인딩 가능. (나중에 등록된 핸들러만 동작.)
- addEventListener 메소드 방식
- addEventListener(arg1, arg2, [, arg3])을 이요하여 세밀한 이벤트 제어 가능.
- [이벤트 이름, 이벤트 핸들러(콜백 함수), 캡쳐링 여부]
- 장점
- 하나의 이벤트에 대해 하나 이상의 이벤트 핸들러 추가.
- 캡쳐링과 버블링 지원.
- HTML 요소 뿐아니라 모든 DOM(HTML, XML, SVG)에 대해 동작.
- 단점 : 공통 로직의 규칙이 바뀌게 되면 참조하는 모든 곳의 소스를 변경해야함.
- 함수로 만들어 해결. => 인자 전달이 불가능.
- 콜백 함수를 만들어 호출하는 방식으로 인수 전달 문제 해결.
✔ Web Storage.
- WebStorage API : Local Storage
- 데이터를 사용자 로컬에 보존하는 방식.
- 데이터 저장, 덮어쓰기, 삭제 등 조작 가능.
- JavaScript로만 조작.
- 모바일에서도 사용 가능.
- Cookie와 차이점
- 유효 기간이 없고 영구적으로 이용 가능.
- 5MB까지 가능.(쿠키는 4KB, 브라우저에 따라 다름)
- 쿠키와 다르게 네트워크 요청시 서버로 전송되지 않음.
- 서버가 HTTP 헤더를 통해 스토리지 객체 조작 불가능.
- 웹 스토리지는 origin(프로토콜, 도메인, 포트)가 다르면 접근 불가.
- LocalStorage, SessionStorage
- 키, 값을 하나의 세트로 저장.
- 도메인과 브라우저별로 저장.
- 값은 반드시 문자열.
- SessionStorage는 도메인에 한정.
- 공통 메소드와 프로퍼티
- setItem(key, value)
- getItem(key)
- removeItem(key)
- clear()
- key(index)
- length
후라이드 치킨