자바스크립트와 브라우저

2018-03-12

javascript

1. DOM: 문서 객체 모델

DOM은 HTML 문서의 구조를 나타내는 표기법인 동시에 브라우저가 HTML 문서를 조작하는 핵심이다.
DOM은 트리 구조로 표현하며 DOM 트리는 노드(node)로 구성된다. 루트 노드를 제외하면 모든 노드에 부모가 있으며, 자식 노드는 있어도 되고 없어도 된다.
루트 노드는 document이며 자식 노드는 <html> 하나뿐이다. <html> 요소에는 자식으로 <head> 요소와 <body> 요소가 있다.
DOM 트리의 모든 노드는 Node 클래스의 인스턴스이다. Node 객체에는 트리 구조를 나타내는 ParentNode, childNode, nodeName, nodeType과 같은 프로퍼티가 있다.

2. get 메서드

document.getElementsById(), document.getElementsByClassName(), document.getElementsByTagName()

3. DOM 요소 쿼리

CSS 선택자를 사용해 요소를 찾는 메서드
document.querySelector(), document.querySelectorAll()

4. DOM 요소 조작

모든 요소에는 textContent와 innerHTML 프로퍼티가 있다. 이 프로퍼티를 통해 요소의 콘텐츠에 접근하거나 수정할 수 있다
textContent는 HTML 태그를 모두 제거하고 순수한 텍스트 데이터만 제공하며, innerHTML은 HTML 태그를 그대로 제공한다.

5. 새 DOM 요소 추가

parent.insertBefore(삽입할 요소, 삽입할 위치)
parent.appendChild(삽입할 요소) : 항상 마지막 자식 요소로 추가

const p1 = document.createElement('p');
p1.textContent = "I was created dynamically!";

const parent = document.getElementById('content');
const firstChild = parent.childNodes[0];

parent.insertBefore(p1, fistChild);
parent.appendChild(p1);

6. 요소 스타일링

모든 요소에는 클래스를 나열하는 classList 프로퍼티가 있다.
classList의 add 메서드로 클래스를 추가할 수도 있고, remove 메서드로 클래스를 삭제할 수도 있다

7. 데이터 속성

HTML5에서는 데이터(data-) 속성을 도입했다. 이 속성을 사용해 HTML 요소에 임의의 데이터를 추가할 수 있다
데이터 속성의 이름은 마음대로 정해도 된다

<button data-action="highlight" data-containing="unique">
  Highlight paragraphs containing "unique"
</button>

<script>
  // action 데이터 속성에 "highlight"가 들어있는 요소 모두 찾기
  const highlightActions = document.querySelectorAll('[data-action="highlight"]');
  
  console.log(highlightActions[0].dataset); // DOMStringMap { containing: "unique", action: "highlight"}

  // 데이터 속성 수정, 추가
  highlightActions[0].dataset.containing = "rabbit";
  highlightActions[0].dataset.caseSensitive = "true";

</script>

8. 이벤트

모든 요소에는 target.addEventListener(type, listener [,useCapture]) 라는 메서드가 있다.
useCapture: 캡쳐링을 사용할지 여부를 지정. default는 false
이벤트 모델은 이벤트 하나에 여러가지 함수(핸들러)를 연결할 수 있도록 설계되어 있다
기본 핸들러가 지정된 이벤트도 많은데 예를 들어 사용자가 링크를 클릭하면 브라우저는 요청 페이지를 불러오는데, 이런 기본 핸들러를 막으려면 이벤트 객체에서 preventDefault()를 호출한다.

target.addEventListener('click', event => {
  event.preventDefault();
  alert('click')
})

9. 이벤트 버블링과 캡처링

버블링: 특정 DOM에서 이벤트가 발생하면 가장 하위 DOM부터 상위의 부모 DOM으로 한단계씩 전파됨
캡쳐링: 최상위 부모 DOM부터 가장 하위의 DOM까지 부모에서부터 전파됨 (<html> -> <body> -> <div>)
버블링과 캡쳐링 예제
event.stopPropagation() : 이벤트를 현재 요소에서 끝내고 더는 전달하지 않게함

10. Ajax

비동기적 자바스크립트와 XML의 약어
Ajax를 통해 서버와 비동기적으로 통신하면 페이지 전체를 새로 고칠 필요 없이 서버에서 데이터를 받아올 수 있다
Ajax가 널리 쓰이면서 교차 소스 자원 공유(CORS)라는 취약점이 드러났다. 실무에서는 Access-Control-Allow-Origin 헤더에 허용되는 프로토콜, 도메인, 포트를 명시해야한다.

참고

chunminwoo님 블로그 - 버블링 & 캡쳐링

 자바스크립트 정규표현식 리액트 튜토리얼 