[Codestates] 2021. 4. 26

dom

dom 이란?

• Document Object Model 의 약자
  HTML을 자바스크립트의 객체처럼 조작할 수 있는 모델
• 브라우저 환경에서 자바스크립트를 이용해 HTML을 조작
• HTML을 JS도 함께 이해할 수 있는 객체로 만드는 것
• DOM은 브라우저에 내장되어 있는 API

HTML 에 JS 삽입

• script 태그를 사용하며, body 태그 끝나기 직전에 넣어줘야 한다.

console.log vs. console.dir

• dir 는 DOM을 객체의 모습으로 출력한다.

node vs. element

• node는 태그 노드와 텍스트 노드 전체를 가리킨다.
• element 는 태그만을 가리킨다.

element를 표현할 때

• document.body.children[1] 등으로 표현한다.
• 부모 엘리먼트는 parentElement 으로 가리킬 수 있다.

DOM 메소드

Create

• .createElement() : element 생성

  Append

• .append() : 태그를 다른 태그의 자식 태그로 삽입

  Read

• querySelector() : 첫번째 element 를 조회

• querySelectorAll() : 모든 element 를 조회

• getElementById('ID') : ID를 통해 조회

  Update

• .textContent = '' : 문자열 입력

• .classList.add() : class 추가

• .setAttribute('id', 'js') : id=js 를 추가

  Delete

• .remove() : element 삭제

• .removeChild() : 자식 element 를 삭제