[JavaScript] DOM(Document Object Model) 주요 정리

DOM(Document Object Model)

DOM(Document Object Model)은 웹 페이지에 대한 인터페이스로, HTML 문서를 Object 기반으로 표현합니다. HTML Elements를 JavaScript Object처럼 Manipulation(조작)할 수 있는 모델로, HTML을 조작할 수 있습니다. 단, DOM은 JS를 이용해서 구조 접근을 하는 것이지 JS 자체는 아닙니다.

HTML에 JS 적용

HTML에서 JS를 적용하기 위해서는 <script> 태그를 이용합니다.

<script src="myJsFile.js"></script>

웹브라우저에서 작성된 HTML을 해석할 때 <script> 요소를 만나면 잠시 해석을 멈추고 <script>요소를 먼저 실행하게 됩니다. 따라서, <script>요소의 추가하는 위치마다 다른 결과를 가져오기 때문에, 최하단에 위치시킵니다. 그러나 이는 js에 너무 의존적일 수 있습니다. 그래서 <script>태그 안에 async 옵션을 추가할 수 있습니다. 그러나 이 방법에도 장단점이 존재합니다. js에 의존적인 웹을 더 빨리 실행 시킬 수 있다는 장점이 있지만, 여러 <script>태그가 존재하면 순서에 상관없이 먼저 다운로드된 파일을 실행하여 순서에 문제가 생길 수 있습니다.

위 두가지 단점을 보완하여 defer 옵션을 사용할 수 있습니다. 가장 큰 차이점은 HTML 파싱을 끝마친 후 script 파일 실행시킵니다. 먼저, html 파싱과 함께 script파일을 다운로드합니다. 그리고 html 파싱이 완료되면 script파일을 순서대로 실행합니다.

DOM을 JavaScript로 조작하여 HTML Element를 추가하거나 삭제, 혹은 내용 변경

CREATE - createElement

  /* document.createElement(elementName) - element 생성; */
  const divA = document.createElement('div'); 
  divA.classList.add('a'); // div의 class 옵션에 'a' 추가

APPEND - append, appendChild

  ```js
  /* parentNode.append(...node) - parentNode에 node 연결; */
  document.body.append(divA);
  ```

- append와 appendChild 비교

  |                        | append | appendChild |
  | ------------------------ | -------- | ------------- |
  | 노드 객체(Node object) | o      | o           |
  | 문자열(DOMString)      | o      | x           |
  | 반환값(return)         | x      | o           |
  | 다중 값 허용           | o      | x           |

READ - querySelector, querySelectorAll

```js
/* 
 * querySelector(selector)
 * : selector에 해당하는 첫번째 element를 조회하여 반환
 */
const username = document.querySelector('.username');

/* 
 * querySelectorALL(selector)
 * : selector에 해당하는 모든 element를 조회하여 배열 형태의 객체로 반환(배열은 아님! - Array-like Object) 
 */
const users = document.querySelectorAll('.user');

/* 
 * getElementById(id), getElementsByClassName(className)
 * : id와 class에 해당하는 element를 조회하여 반환
 * - 옛날 방식이며, 낮은 버전을 이용할 경우 확인
 */
const username = document.getElementById('username');
// const username = document.querySelector('#username');
const items = document.getElementsByClassName('item');
// const items = document.querySelector('.item');

/* 
 * querySelectorALL(selector)
 * : selector에 해당하는 모든 element를 조회하여 배열 형태의 객체로 반환(배열은 아님! - Array-like Object) 
 */
const users = document.querySelectorAll('.user');
```

UPDATE - textContent, id, classList, setAttribute

  /* node.textContent */
  divA.textContent = 'div A';
  /* node.id */
  divA.id = 'uniq-a';
  /* node.classList */
  divA.classList.add('a');
  /* node.setAttribute('attributename', 'attributevalue') */
  divA.setAttribute('data', 'this is data');

DELETE - remove, removeChild, innerHTML = "" , textContent = ""

  /* node.remove() */
  divA.remove(); // divA element 삭제
  /* innerHTML = "" */
  document.querySelector('.mylist').innerHTML = ''; // 모든 children element 제거. but, 보안상 취약점 존재

  /* while문을 통해 자식 element 모두 제거 */
  const mylist = document.querySelector('.mylist');
  while (mylist.firstChild) { 
  mylist.removeChild(mylist.firstChild); 
  }

  /* 자식 element가 1개만 남기고 제거 */
  const container = document.querySelector('#container');
  while (container.children.length > 1) {
    container.removeChild(container.lastChild);
  }

  /* 해당 element만 제거 */
  const items = document.querySelectorAll('.item')
  items.forEach(function(item){
      item.remove();
  })
  // or
  for (let item of items){
      item.remove();
  }