포스코x코딩온 웹 풀스택 양성과정

[포스코x코딩온] 웹 풀스택 과정 2주차 회고 | Object, DOM

Codult 2024. 3. 28. 11:36
728x90

 

Javascript 표준 객체

자바스크립트가 기본적으로 갖고 있는 객체들로, String, Number, Array, Date, Math 등이 있다.

Date 객체

시간과 날짜에 대한 정보를 얻기 위해 사용하는 객체

Date.now()

기준시간(1970.01.01 00:00:00)으로부터 현재 시간까지 경과된 밀리초를 반환한다.
Date의 정적 메소드이기 때문에, 항상 Date.now() 형태로 사용한다. (초기화X)

Date 객체 초기화

new Date() 초기화 할 때, 괄호 내 숫자를 입력하여 기준시간을 설정할 수 있다.

  • new Date() : 현재시간을 기준시간으로 가져온다.
let date = new Date();
  • new Date(년, 월, 일, 시, 분, 초, 밀리초) : parameter로 입력한 특정 시간을 기준시간으로 가져온다.
let date = new Date(16,5,25); // 1916.05.25 00:00:00을 기준시간으로.
  • new Date(숫자) : 해당 밀리초만큼 지난 시간을 기준시간으로 가져온다.
let date = new Date(80000000000); // 1970.01.01 00:00:00:00 으로부터 80000000000 밀리초 지난 시간을 기준시간으로.
  • 초기화를 완료하면, Date.prototype get메소드를 사용할 수 있다.
    편의를 위해, 아래와 같이 객체 초기화를 했다고 가정하자.
let date = new Date();
  • date.getFullYear() 연도
  • date.getMonth() 월 (Month 배열에서의 index를 알려줌 -> 7월: 6)
  • date.getDate() 일
  • date.getDay() 요일 (Day 배열에서의 index를 알려줌 -> 일요일: 0)
  • date.getTime() 기준시간이 1970.01.01 00:00:00:00 으로부터 얼마나 지났는지 (밀리초)
  • date.getHours() 시간
  • date.getMinutes() 분
  • date.getSeconds() 초

Ex) 오늘 날짜를 yyyy-mm-dd 형태로 나타내고 싶을 때, 아래와 같은 코드로 나타낼 수 있다.

let date = new Date();
let y = date.getFullYear();
let m = date.getMonth() + 1;
let d = date.getDate();

console.log(`${y}-${m}-${d}`);

Math 객체

수학적인 계산을 하기 위해 사용하는 객체 (웹 브라우저에 따라 결과가 달라질 수 있으므로 정확한 결과에는 Math 메소드 사용하지 않는 것이 좋다)

Math 객체 내 메소드

  • .PI : 파이값 반환
  • .E : e값 반환
  • .min() : 최솟값을 뽑음
	console.log(Math.min(45, -2, 0, -1, 5)); // -5
  • .max() : 최댓값을 뽑음
	console.log(Math.max(45, -2, 0, -1, 5)); // 45
  • .random() 랜덤한 수를 추출
  • .round() 반올림
  • .floor() 내림
  • .ceil() 올림

 

DOM

Document Object Model의 약자로, HTML 문서요소의 집합을 의미한다.
node와 object의 집합으로 이루어진 HTML 문서에 대하여, 각각의 node, object에 접근하여 문서구조/스타일/내용을 변경할 수 있다.

요소 선택

  • document.getElementById(아이디 속성값) : id 속성값으로 요소를 불러온다. (id는 유일하게 부여하므로 하나만 불러옴. id가 중복되는 경우에 가장 첫번째 요소를 불러옴)
  • document.getElementsByClassName(클래스 속성값) : class 속성값으로 요소를 불러온다. -> HTMLCollection 배열로 반환한다.
  • document.getElementsByTagName(태그이름) : div, input 등 태그 이름으로 요소를 불러온다. -> HTMLCollection 배열로 반환한다.
  • document.getElementsByName(name 속성값) : name 속성값으로 요소를 불러온다. -> NodeList 배열로 반환한다.
  • document.querySelector(css 선택자) : 선택자로 해당하는 첫번째 요소를 불러온다.
  • document.querySelectorAll(css 선택자) : 선택자로 해당하는 모든 요소를 불러온다. -> NodeList 배열로 반환한다.

요소 다루기

1) 태그의 내부 내용을 변경

  • [].innerHTML = 내용 : 내용을 HTML요소로 넣는다.
  • [].innerText = 내용 : 내용을 문자열로 넣는다. (공백 문자 제거하여 반환)
  • [].textContent = 내용 : 내용을 문자열로 넣는다. (고백 문자 그대로 반환)

2) 속성 변경

  • [].setAttribute("속성", "값") : 원하는 속성의 값을 변경한다.
  • 직접 변경하고자 하는 속성을 불러 변경할 수도 있다.
<a href="https://www.naver.com" id="naver">네이버<a>
let address = document.querySelector("a");
address.setAttribute("href","https://www.google.com");

// 또는 아래 처럼 속성 불러와 변경하는 방법도 있다.
address.href = "https://www.google.com";
address.style = "color: red; border: 1px solid black;";
address.style.color = "red";
address.style.border = "1px solid black";

 

3) 클래스 변경

  • [].classList.add() : 클래스 추가
  • [].classList.remove() : 클래스 제거
  • [].classList.contains() : 클래스의 유무를 확인 -> boolean 값 (t/f) 반환
  • [].classList.toggle() : 클래스가 있으면 제거, 없으면 추가

4) 다른 노드에 접근하기 -> 선택한 노드의 형제/부모/자식 노드에 접근하는 방법

  • [].parentNode : 선택한 요소의 부모요소를 가져옴 (중첩 사용 가능 - ex. 부모요소의 부모요소)
  • [].previousElementSibling : 선택한 요소의 형제 요소 중 앞에 위치한 것을 가져옴
  • [].nextElementSibling : 선택한 요소의 형제 요소 중 뒤에 위치한 것을 가져옴
  • [].previousSibling : 선택한 요소의 형제 요소 중 앞에 위치한 것을 가져옴 (#text, 주석 모두 node로 카운트하며, 태그들 사이에는 기본적으로 #text가 있다고 해석함)
  • [].nextSibling : 선택한 요소의 형제 요소 중 뒤에 위치한 것을 가져옴 (#text, 주석 모두 node로 카운트하며, 태그들 사이에는 기본적으로 #text가 있다고 해석함)
  • [].children : 선택한 요소의 자식요소를 가져옴 (HTMLCollection 배열 형태로, 요소 노드만 가져옴)
  • [].childNode : 선택한 요소의 자식요소를 가져옴 (NodeList 배열 형태로, 요소 노드와 텍스트 노드 모두 가져옴)

5) 요소 생성하기

  • document.createElement(html요소) : 원하는 html 요소를 생성할 수 있다.

6) 생성된 요소 추가하기

  • [].appendChild() : 선택한 요소의 맨 뒤 자식요소로 추가 (요소 노드만 추가 가능함)
  • [].append() : 선택한 요소의 맨 뒤 자식요소로 추가 (요소 노드가 아니어도 추가 가능함)
  • [].prepend() : 선택한 요소의 맨 앞 자식요소로 추가
  • [].before() : 선택한 요소의 앞에 형제 요소로 추가
  • [].after() : 선택한 요소의 뒤에 형제 요소로 추가

7) 요소 삭제

  • [].remove() : 선택한 요소'[ ]'를 삭제
  • [].removeChild() : 선택한 요소'[ ]'의 자식요소들'( )'을 삭제 -> 삭제하고자 하는 요소의 부모 요소를 선택해야하는 번거로움이 있지만, 삭제된 요소를 반환해줌!
 
728x90