배열

정의

• 자료형 상관 없이 여러 값을 한 번에 다룸

특징

• 대입되는 값에 따라서 자료형이 변함
• 자료형 제한 X (하지만 보통은 한 가지 자료형만 저장한다)
• 길이 제한 X (자동으로 배열 길이가 늘었다, 줄었다 한다)

선언 방법

// 0칸짜리 배열(비어있는 배열) 생성
const arr = new Array();

// 3칸짜리 배열 생성 / 각 칸의 값은 비어있음(empty)
const arr = new Array(3); 

// 0칸짜리 배열 생성 / [] : 배열 기호
const arr = [];

// 3칸짜리 배열 생성 / 각 칸이 값으로 채워져 있음
const arr = [값1, 값2, 값3];

유사 배열

정의

• 배열처럼 index, length 를 가지고 있으나 배열 전용 기능(메서드) 제공 X
• 제공 X : pop(), push(), map(), filter() 등..
• HTMLCollection, NodeList 는 유사 배열

형태

const divs = document.getElementsByClassName("cls-test");

console.log(divs);

// divs 0, 1, 2 쨰 요소에 각각 배경색 변경
divs[0].computedStyleMap.backgroundColor = "green";
divs[1].computedStyleMap.backgroundColor = "blue";
divs[2].computedStyleMap.backgroundColor = "yellow";

HTMLCollection

• 동적 Collection
• DOM 변경 시 자동 업데이트
• getElemetsByTagName(), getElementsByClassName()

NodeList

• 정적 Collection
• DOM 변경과 무관
• getElementsByName(), querySelectorAll()

DOM을 이용한 요소 접근 방법

id로 접근

• id 속성이 일치하는 하나의 요소를 반환
• 반환값: 요소 객체

document.getElementById("id값")

class로 접근

• class 속성이 일치하는 모든 요소를 반환
• 반환값: HTMLCollection (배열처럼 생긴 유사 배열)

document.getElementsByClassName("class값")

name으로 접근

• name 속성이 일치하는 모든 요소를 반환
• 주로 input 요소에 사용됨
• 반환값: NodeList (유사 배열)

document.getElementsByName("name값")

tag로 접근

• 해당 태그명을 가진 모든 요소를 반환
• 반환값: HTMLCollection (유사 배열)

document.getElementsByTagName("태그명")

CSS 선택자로 접근
querySelector

• CSS 선택자에 해당하는 첫 번째 요소 반환
• 반환값: 요소 객체

document.querySelector("CSS 선택자")

querySelectorAll

• CSS 선택자에 해당하는 모든 요소 반환
• 반환값: NodeList (유사 배열)

document.querySelectorAll("CSS 선택자")

속성

checked
-> 요소가 체크되어있다면 true, 아니면 false 반환
input요소.checked = true; -> 해당 요소를 체크하겠다
input요소.checked = false; -> 해당 요소를 체크 해제하겠다

innerHTML
HTML 태그를 포함하여 문자열 등을 실제 HTML 요소로 해석

innerText
텍스트 내용만 요소 콘텐트 내부에 출력

scrollTop
현재 스크롤 위치
(스크롤이 현재 얼마만큼 내려와있는지를 나타냄)

scrollHeight
bg의 스크롤 전체 높이
(스크롤바를 이용해 스크롤 할 수 있는 전체 높이)

addEventListener
keydown : 키가 눌러졌을 때 (+ 유지 시 계속 인식)
keyup : 눌러지던 키가 떼어졌을 때 (1회만 인식)

용어정리

DOM(Document Object Model : 문서 객체 모델)