[LearningJS] 브라우저의 자바스크립트
1. 문서 객체 모델 (Document Object Model)
- HTML 문서의 구조를 나타내는 표기법이자 브라우저가 HTML 문서를 조작하는 핵심이다.
- DOM은 트리 구조로 표현한다.
- 모든 노드에는 nodeType, nodeName 프로퍼티가 있다.
- nodeType은 노드가 어떤 타입인지 나타내는 정수를 반환한다.
- nodeType1 : Node.ELEMENT_NODE (HTML 요소)
- nodeType3 : Node.TEXT_NODE(HTML 요소의 텍스트 콘텐츠)
- 부모 노드 : 직접적인 부모를 가리킨다. / 자식 노드 : 직접적인 자식을 가리킨다.
- 자손 노드 : 자식, 자식의 자식 등등… / 조상 노드 : 부모, 부모의 부모 등등…
2. document.get 메소드
- DOM 에서 원하는 HTML 요소를 빠르게 찾을 수 있는 메소드
document.getElementById : ID를 이용해 요소를 찾는다.document.getElementsByClassName : 클래스 이름에 해당하는 요소들을 반환한다.document.getElementsByTagName : 주어진 태그 이름에 해당하는 요소들을 반환한다.
3. DOM 요소 쿼리
document.querySelector / document.querySelectorAll : CSS 선택자를 이용해 요소를 찾는 메소드 (get 메소드들이 수행하는 역할을 이거 하나로 다 할 수 있어서 최근에는 get 메소드보다 이것들을 더 많이 쓴다.)- CSS 선택자에서 요소 이름을 사용할 때는 꺾쇠 없이 요소 이름만 쓴다.
- 요소 선택자 사이에 스페이스(‘ ‘)를 넣으면 특정 노드의 자손인 요소를 찾을 수 있다.
- 요소 선택자 사이에
> 기호를 넣으면 자손이 아니라 자식만 선택한다.
4. DOM 요소 조작
node.textContent 프로퍼티 : HTML 태그를 모두 제거하고 순수한 텍스트 데이터만 제공한다. (해당 노드에 텍스트 콘텐츠를 삽입할수도 있다.)node.innerHTML 프로퍼티 : HTML 태그를 그대로 제공한다.
- innerHTML을 통해 HTML 태그를 수정하면 DOM이 그에 맞게 변경된다.
- 같은 노드에 textContent와 innerHTML을 같이 적용할 수는 없더라…
5. 새 DOM 요소 만들기
document.createElement 메소드를 써서 새 노드를 만들 수 있다.
- 이 메소드는 새 요소를 만들지만, DOM에 추가하지는 않는다.
- 새로 만든 요소를 DOM에 추가하려면 메소드를 사용해야 한다.
insertBefore(삽입할 요소, 삽입할 위치)
- 두번째 인수 위치의 이전에 요소를 삽입한다.
- 두 번째 인수가 null일 경우 형제요소 가운데 마지막으로 삽입한다.
- DOM 트리상에 있는 요소를 삽입하려고 할 경우 위치를 이동시키는 방식으로 작동한다.
appendChild(삽입할 요소)
6. 요소 스타일링
- 요소의 스타일을 바꾸고 싶다면 그에 맞는 CSS 클래스를 새로 만들고 그 클래스를 원하는 요소에 지정한다.
- 모든 요소에는 클래스를 나열하는 classList 프로퍼티가 있다.
classList.add () 메소드로 클래스를 추가할 수 있다.
- 클래스를 제거할 때에는
classList.remove()
7. 데이터 속성 (HTML5)
data- 속성을 사용해 HTML 요소에 임의의 데이터를 추가할 수 있다.- 브라우저는 이 데이터를 완전히 무시하므로, 자바스크립트에서 쉽게 요소에 관한 정보를 읽거나 수정할 수 있다.
- 대괄호
[] 안에 속성을 쓰면, 어떤 속성으로든 찾을 수 있다.
[] 안에 data- 속성을 써서 CSS 선택자로 활용 가능하다.
data- 속성을 CSS 선택자로 사용해서 찾은 DOM 객체에는 dataset 프로퍼티가 존재한다. 이를 통해 데이터 속성과 값에 접근할 수 있다.
8. 이벤트 (Event)
- 모든 요소에는
addEventListener 메소드가 있다. 이 메소드를 통해 이벤트가 일어났을 때 호출할 함수를 지정한다.
- 이벤트 모델은 이벤트 하나에 여러가지 함수(핸들러)를 연결할 수 있다.
<a> 같이 기본으로 이벤트 핸들러가 지정된 것을 막으려면 이벤트 객체에서 e.preventDefault()를 호출해준다.
- 이벤트 버블링(Bubbling)과 캡처링(Capturing)
- 여러 요소에서 이벤트를 처리할 수 있다면, 그 이벤트에 응답할 기회는 어떤 순서로 주어지는가?
- 캡처링(Capturing) : 가장 먼 조상부터 시작하는 방법 (
<body> 에서부터)
- 버블링(Bubbling) : 이벤트가 일어난 요소에서부터 시작해서 조상으로 거슬러 올라가는 방법
- 이벤트 핸들러에서 다른 핸들러가 어떻게 호출될지 영향을 주는 3가지 방법(메소드)
preventDefault() : 이벤트를 취소한다. 취소된 이벤트는 계속 전달되지만 defaultPrevented 프로퍼티가 true로 바뀐 채 전달된다. 브라우저의 이벤트 핸들러는 이러한 이벤트를 무시하고 아무일도 하지 않는다.stopPropagation() : 이벤트를 현재 요소에서 끝내고 더는 전달되지 않게 막는다. 즉, 해당 요소에 연결된 이벤트 핸들러는 동작하지만 다른 요소에 연결된 이벤트 핸들러는 동작하지 않는다.stopImmediatePropagation() : 다른 이벤트 핸들러, 심지어 현재 요소에 연결된 이벤트 핸들러도 동작하지 않게 막는다.
- 순서 : 캡처링 먼저 -> 버블링 나중
- 이벤트가 실제로 일어나는 요소에서는 이벤트가 추가된 순서대로 실행된다.
- 이벤트 카테고리
- 드래그 이벤트 :
dragstart, drag, dragend, drop
- 포커스 이벤트 : 필드에 들어갈 때 (
focus), 필드에서 나올 때(blur), 필드의 내용을 바꿀 때(change)
- 폼 이벤트 : 폼을 전송하면
submit 이벤트가 발생
- 입력 장치 이벤트
- 마우스 이벤트 :
mousedown, move, mouseup, mouseenter, mouseleave, mouseover, mousewheel
- 키보드 이벤트 :
keydown, keypress, keyup
- 터치 이벤트 (마우스 이벤트보다 우선한다) :
touches
- 미디어 이벤트(HTML5) :
pause, play
- 진행(progress) 이벤트 :
load(브라우저가 요소와 그에 연관된 자원들을 모두 불러 왔을 때 발생), error(자원을 사용할 수 없을 때)
9. AJAX
- AJAX를 통해 서버와 비동기적으로 통신하면서 페이지 전체를 새로 고칠 필요 없이 서버에서 데이터를 받아올 수 있다.
- 브라우저 자바스크립트에서 HTTP 요청을 만들어 서버에 보내고 데이터를 받는다.
- AJAX도 다른 웹페이지와 마찬가지로 HTTP 위에서 동작하지만, 페이지를 불러오고 렌더링하는 부담이 줄어들기 때문에 웹 애플리케이션이 빨라진다.
댓글남기기