20240822

※배열 (Array)※

• 변수를 묶음으로 다루는 것 (자료구조의 기초)
  (JS 변수의 특징 : 대입되는 값에 따라서 자료형이 변함)
  -> JS 배열 : 자료형 상관 없이 여러 값을 한 번에 다룸

[JS 배열의 특징]
1. 자료형 제한 X (하지만 보통은 한 가지 자료형만 저장한다)
2. 길이 제한 X (자동으로 배열 길이가 늘었다, 줄었다 한다)

[JS 배열 선언 방법]
1. const arr = new Array(); // 0칸짜리 배열(비어있는 배열) 생성
2. const arr = new Array(3); // 3칸짜리 배열 생성
// 단, 각 칸의 값은 비어있음(empty)
3. const arr = []; // 0칸짜리 배열 생성
// [] : 배열 기호
4. const arr = [값1, 값2, 값3]; // 3칸짜리 배열 생성
// 각 칸이 값으로 채워져 있음

[배열과 for문]
배열의 index는 0부터 배열의길이-1 까지 1씩 증가하는 규칙성이 있다
-> index를 다루거나 지정하기 위한 구문을 for문으로 작성 가능

※DOM(Document Object Model : 문서 객체 모델)※
웹 문서(HTML)의 모든 요소를 객체 형식으로 표현한 것
(HTML 요소 == JS에서 객체라고 부름)

-> 문서 내 특정 요소에 접근 가능

• 요소(객체)에 속성 값을 세팅 또는 얻어올 수 있다
  

document.getElementById("id속성값");
document.getElementsByClassName("class속성값");

[DOM을 이용한 요소 접근 하기]
1. id로 접근하기 : document.getElementById("id속성값");
-> 아이디가 일치하는 요소(객체)를 얻어옴
2. class로 접근하기 : document.getElementsByClassName("class속성값");
-> 클래스가 일치하는 모든 요소를 얻어와 배열 형태로 반환
3. name으로 접근하기 : document.getElementsByName("name속성값");
-> name이 일치하는 모든 요소를 얻어와 배열(NodeList, 유사배열) 형태로 반환
4. tag로 접근하기 : document.getElementsByTagName("tag명");
-> 태그가 일치하는 모든 요소를 얻어와 배열 형태로 반환
5. CSS 선택자로 접근하기
1) document.querySelector("CSS 선택자");
-> 선택자가 선택한 요소 중 첫 번째 요소를 반환
2) document.querySelectorAll("CSS 선택자");
-> 선택한 요소 모두를 배열(NodeList, 유사배열) 형태로 반환