자료형
- Undefined : 값이 할당되지 않은 상태
- Null : 어떤 값이 의도적으로 비어있음
- Object(객체 데이터) : 여러 데이터를 Key:Value 형태로 저장 {}
변수
: 데이터를 저장하고 참조(사용)하는 데이터의 이름
- let : 값의 재할당 가능
- const : 값(데이터)의 재할당 불가
DOM API
<body>
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
</body>
// HTML 요소(Element) 1개 검색/찾기
let boxEl = document.querySelector(".box");
boxEl.addEventListener("click", () => {
console.log("Click~!");
});
// 요소의 클래스 정보 객체 활용!
boxEl.classList.add("active");
let isContains = boxEl.classList.contains("active");
console.log(isContains); // true
boxEl.classList.remove("active");
isContains = boxEl.classList.contains("active");
console.log(isContains); // false// HTML 요소(Element) 모두 검색/찾기
const boxEls = document.querySelectorAll(".box");
console.log(boxEls);
// 찾은 요소들 반복해서 함수 실행!
// 익명 함수를 인수로 추가!
boxEls.forEach((boxEl, index) => {
// 첫번째 매개변수: 반복 중인 요소, 두번째 매개변수: 반복 중인 번호
boxEl.classList.add(`order-${index + 1}`);
console.log(index, boxEl);
});const boxEl = document.querySelector(".box");
// Getter, 값을 얻는 용도
console.log(boxEl, textContent);
// Setter, 값을 지정하는 용도
boxEl.textContent = "ROSESUA?!";
console.log(boxEl.textContent);
가보자고