브라우저는 동기적(synchronous)으로 (=위에서 아래방향으로) 순차적으로 HTML, CSS, JS를 파싱하고 실행한다.

JS의 파싱과 실행 이전까지는 DOM의 생성이 일시중단 되므로

자바스크립트코드 내에서 만약 DOM이나 css를 변경해야하는 경우라면 돔이 이미 생성되어있어야 한다

(=script태그의 위치는 중요하다. 헤드태그(위)에 있는지 바디태그(아래) 위에 있는지)

그래서 script의 위치를 위에다가 적어줄때는 돔이 아직 생성이 안된 상태이므로

비동기적(asynchronous)으로 동시에 진행되도록 해줘야한다.

그래야 dom생성 시점과 상관없이 자바스크립트가 돔 조작을 할 수 있기 때문이다.

이때 사용하는게 이렇게 2가지가 있는데,

• async
• defer

둘 다 html파싱과 외부 자바스크립트 파일의 로드가 비동기적으로 동시에 진행된다.

차이점은 async는 script 태그 순서와는 상관없이 로드가 완료된 자바스크립트부터 먼저 실행되므로 순서가 보장되지 않는다.

그래서 순서보장이 필요한 script가 있다면 async 어트리뷰트를 지정하지 않는게 좋다.

DOM (document object model)

브라우저가 HTML 문서를 파싱하는 과정에서 생겨나는 객체(=노드 객체들로 구성된 트리 자료구조)

(feat. HTML문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 api, 즉 프로퍼티와 메서드를 제공하는 트리구조)

dom은 노드 객체의 계층적인 구조로 구성되는데,

노드 객체에는 종류가 있고 상속 구조를 갖는다. 노드 객체는 총 12개의 종류가 있는데 이중에서 중요한 노드타입은 4가지이다.

• 문서노드(document node) : 최상위의 노드.(=루트 노드). document를 가리킨다
• 요소노드(element node) : HTML요소를 가리키는 객체
• 어트리뷰트노드(attribute node) : HTML요소의 어트리뷰트를 가리키는 객체
• 텍스트노드(text node) : HTML요소의 텍스트를 가리키는 객체

---

HTML의 구조나 내용 또는 스타일 등을 동적으로 조작하려면 먼저 요소노드를 취득해야한다.

요소 노드를 취득하기 위해 dom은 요소 노드를 취득할 수 있는 다양한 메서드들을 제공하는데, 그 중 많이 사용하는 메서드는 아래와 같다.

• id를 통한 요소노드 취득

  document.getElementById('banana');
  

• 태그이름을 이용한 요소노드 취득

  document.getElementsByTagName('li');
  

• class를 이용한 요소 노드 취득

  document.getElementsByClassName('클래스명');
  

• Css선택자를 이용한 요소 노드 취득

  document.querySelector('클래스명 혹은 아이디')