[Dev] DOM & Developer Tools

1. DOM

DOM이란 문서객체모델(Document Object Model)로 HTML, XML 문서의 프로그래밍 interface 이다. DOM은 문서객체모델 말 그대로 객체의 형태로 문서를 구조화된 표현(structured representation)을 제공하며 접근하는 이들이 스크립트 또는 프로그래밍 언어들로 구조, 스타일, 내용 등을 변경할 수 있게 돕는다.
ex)👇

document.getElementById("");
// html tag의 id는 하나밖에 가지지 못하기에 element(단수)로 쓴다.
document.getElementsByClassName("");
// html tag의 Class는 중복해서 가질 수 있기 때문에 elements(복수)로 쓴다.

2. Developer Tools

Google에서 만든 웹브라우저 크롬에서 개발을 도와주는 Tool로 현재 보여지는 페이지의 element의 구성, console에 코드 입력을 통해 DOM된 현재페이지에 접근 및 수정 등을 가능하게 제공해주는 도구이다.

👉shortcut(Mac os): Cmd + Option(alt)+ I or F12