JS DOM
defer
Tip
html 내 Script 파일 배치 시, 늘 body 안에만 작성해왔다.
이유는 html 문서가 모두 로드 후 script가 실행되므로, 에러를 줄이기 위해서이다.
그러나 다른 곳에 script 파일을 배치할 때 'defer' 라는 키워드를 속성으로 사용하면 문서가 모두 로드 후 script가 실행된다고 한다.
<script defer src="./active3.js"></script>
Pass by value
- Primitive 타입은 값이 복사되어 전달
let num = 1;
let num2 = num;
console.log(num, num2); // 1 1
console.log(num === num2); // true
num = 5; // 1 -> 5
console.log(num, num2); // 5 1
console.log(num === num2); // falsePass by reference
const obj = { one: 1, two: 2 };
const obj2 = obj;
console.log(obj, obj2); // { one: 1, two: 2 }
console.log(obj === obj2); // true
obj.five = 5;
console.log(obj, obj2); // { one: 1, two: 2, five: 5 }
console.log(obj === obj2); // true
// obj와 obj2는 현재 같은 데이터를 갖고 참조값(address, 주소)도 같다
const obj3 = { one: 1, two: 2 };
const obj4 = { one: 1, two: 2 };
console.log(obj3, obj4);
console.log(obj3 === obj4); // false
// why? obj3와 obj4는 현재 같은 데이터를 갖지만, 서로 다른 별도의 객체
즉, 참조값(address, 주소)가 다르다.pass by Value는 심볼릭 링크, pass by Reference는 하드 링크와 비슷하게 이해하면 될 것 같다.
const에 재선언 시
obj={hi:'hi'}; // 에러const 선언: 재선언 불가 => 재선언 시 참조 주소 재할당 하게 됨
Object Literal, 딕셔너리
- key-value 쌍으로 이뤄진 데이터 구조
- 객체: [], {} => 광범위한 의미의 객체
JS 표준 내장 객체
Date
- 시간, 날짜
- 타임스탬프: 1970년 1월 1일을 기준으로 흘러간 밀리초(ms)를 나타내는 정수
let jan_01_1970 = new Date(0);
console.log(jan_01_1970);
let jan_02_1970 = new Date(24 * 3600 * 1000);
console.log(jan_02_1970);let date2 = new Date("2023", "06", "17"); // MM(0(1월)~11(12월) 주의)
console.log(date2);Math
console.log(Math.E);
console.log(Math.PI);
console.log(Math.SQRT2);
console.log(Math.min(100, -2, -99, 1000));
console.log(Math.max(100, -2, -99, 1000));
console.log(Math.round(100, -2, -99, 1000)); //반올림
console.log(Math.ceil(100, -2, -99, 1000)); //올림
console.log(Math.floor(100, -2, -99, 1000)); //내림
console.log(Math.random()); //0<=x<1 범위의 난수유사배열
- HTMLCollection, NodeList
- []식으로 생긴 배열, 배열은 아님!
- index, length는 있음
- 배열과 달리 사용 가능한 메서드 제한
NodeList
- forEach() 반복문 사용 가능
document.querySelectorAll(".pink").forEach((ele) => console.log(ele));- for of 반복문
const pinks = document.querySelectorAll(".pink");
for (let pink of pinks) {
console.log(pink);
}HTMLCollection
- forEach () 반복문 사용 불가
- 반복 필요 시 Array 별경: Array.from()
// document.getElementsByClassName(".pink").forEach((ele) => console.log(ele)); //forEach is not a function
Array.from(document.getElementsByClassName(".pink")).forEach((ele) =>
console.log(ele)
);tag 내부 내용 변경
innerHTML : 태그 사용 가능
innerText, textContent: 태그가 문자 그대로 노출
div1.innerHTML = "여기는 <b>첫번째<b> 태그 입니다."; //<b> 인식 됨
div1.innerText = "여기는 <b>첫번째<b> 태그 입니다."; //text 그대로 출력
div1.textContent = "여기는 <b>첫번째<b> 태그 입니다."; // text 그대로 출력속성 가져오기
getAttribute(속성명)
console.log(document.getElementById("pooh").getAttribute("src"));
// 속성 접근 (.) 연산자로도 가능
console.log(document.getElementById("pooh").src);
console.log(document.getElementById("naver").href);
속성값 변경 가능
- . 연산자 사용
document.getElementById("naver").href = "#";
console.log(document.getElementById("naver").href);CSS 속성 변경
style 속성: style. 속성 이용해 css 지정 가능
for (let li of list) {
li.style.backgroundColor = "purple";
li.style.color = "white";
}classList
- xxx.classList.add
- xxx.classList.remove
- xxx.classList.contains: 있는지 없는지 확인 (t/f)
- xxx.classList.toggle: 있으면 제거, 없으면 추가
요소 찾기
- 계층 구조(형제, 자식, 부모, 조상, 자손)
1. 자식 요소
console.log(friends.children); //유사 배열, 자식 모두 선택
console.log(friends.children[0]);인덱싱 + 반복문 역시 가능
2. 부모 요소
console.log(tigger.parentNode);3. 형제 요소
console.log(tigger.previousElementSibling);
console.log(tigger.nextElementSibling);Method Chaining 가능
console.log(tigger.nextElementSibling.nextElementSibling);
console.log(tigger.parentElement.parentElement);
요소 생성 및 추가/삭제
새로운 요소 생성
const p = document.createElement("p"); //요소 생성
//js로 <p></p> 태그 만듦
console.log(p); //<p></p>
p.innerText = "새로 추가 된 p 요소입니다.";
p.style.color = "pink";
p.style.backgroundColor = "navy";새로운 요소 추가
뒤에 추가
- x.append(y) : x요소의 맨 마지막 자식으로 y 요소 추가
- x.appendChild(y) : 한 번에 하나만 추가 가능 != append
앞에 추가
- x.prepend(y): x요소의 맨 처음 자식으로 y 요소가 추가
요소 삭제
- x.remove(): x 요소 삭제
- x.removeChild(y) : x의 자식요소인 y가 삭제
이벤트
Form 이벤트
todoForm.addEventListener("submit", (e) => {
console.log("submit");
e.preventDefault(); //폼 submit 이벤트가 새로고침 되는 걸 막음
// 폼 제출 막음preventDefault()
이벤트의 디폴트 행동을 막음
MDN
input의 공백 입력값 방지
const newTodo = todoInput.value.trim();스페이스바 연속 => 공백 방지 위해 trim()
change 이벤트
- input 요소에 변경 일어나고 다른 요소 클릭해서 input이 포커스 아웃(blur) 처리 됐을 때 일어나는 이벤트
const chgInput = document.querySelector("#change-input");
chgInput.addEventListener("change", function () {
console.log("change!!", e.target.value);
});input 값 변경 이벤트
chgInput.addEventListener("input", function () {
console.log("changing!");
const div = document.querySelector(".intro");
div.textContent = this.value; //실시간 텍스트 동기화
});