1. DOM(Document Object Model)

DOM

• DOM:
  웹 문서(HTML)의 모든 요소를 객체 형식으로 표현한 것
  문서 내 특정 요소에 대한 접근 방법 제공
• 노드(node):
  HTML에 있는 태그를 구조화(트리)하였을 때 각각의 태그가 노드

DOM을 이용한 요소 접근

• 1) id로 접근하기:
  아이디가 일치하는 요소(객체)를 얻어옴

var div1 = document.getElementById("div1");

• 2) 클래스로 접근하기:
  클래스가 일치하는 모든 요소를 얻어와 배열 형태로 반환

var arr = document.getElementsByClassName("div2");

• 3) name으로 접근하기:
  name이 일치하는 모든 요소를 얻어와 배열 형태로 반환(nodeList, 유사배열)

var arr = document.getElementsByName("hobby");

• 4) 태그로 접근하기:
  태그가 일치하는 모든 요소를 얻어와 배열 형태로 반환

var arr = document.getElementsByTagName("li");

• 5-1) CSS 선택자로 접근하기:
  선택자가 선택한 요소 중 첫번째 요소를 반환

document.querySelector("#cssDiv > div").style.fontSize = "30px";

• 5-2) CSS 선택자로 접근하기:
  선택한 요소 모두를 배열 형태로 반환(nodeList, 유사배열)

var arr = document.querySelectorAll("cssDiv > div");

2. 변수와 자료형

변수

• JS는 Java와 다른 변수 선언 방식을 가지고 있다.
• 1) var
  • 변수: 저장하는 값이 변할 수 있음
  • 함수 내부 선언 후 내부 어디서든 사용 가능
  • 함수 레벨 스코프(function level scope)
  • 같은 scope에서 변수명 중복 가능
• 2) let
  • 변수: 저장하는 값이 변할 수 있음
  • 블록 레벨 스코프(block level scope)
  • 같은 scope에서 변수명 중복 불가
  • 흔히 알고 있는 Java 변수
• 3) const
  • 상수: 항상 같은 값
  • 블록 레벨 스코프(block level scope)
  • 같은 scope에서 변수명 중복 불가
  • 흔히 알고 있는 Java 상수(final)
• 4) 변수 키워드 없음: 전역 변수

자료형

• JS는 변수를 선언할 때 별도의 자료형을 지정하지 않음
• 변수에 대입되는 리터럴에 의해서 자료형이 결정됨
  • string: 문자열("", '')
  • number: 숫자(정수, 실수)
  • boolean: True/False
  • object: 객체(배열, JS 객체 "{K:V, K:V}")
  • undefined: 정의되지 않음
  • function: 함수

typeof() 연산자

• 값의 자료형을 확인하는 연산자

• null은 참조하는 것이 없다는 값을 의미(자료형 아님)

객체

• Java의 객체:클래스에 작성된 내용대로 heap 메모리에 할당
• JS의 객체
  • {K:V} Map 형식
  • key는 무조건 string으로 고정

const user = {"id":"user01", 'pw':'pass01', address:'서울시 중구'}
// 객체 V 출력 방법 1
box.innerHTML += "<br>user.id: " + user.id;
box.innerHTML += "<br>user.pw: " + user.pw;
box.innerHTML += "<br>user.address: " + user.address;
// 객체 V 출력 방법 2
box.innerHTML += "<br>user['id']: " + user['id'];
box.innerHTML += "<br>user['pw']: " + user['pw'];
box.innerHTML += "<br>user['address']: " + user['address'];