[JS] JavaScript(3) - 객체 / DOM

 

1. JavaScript 표준 객체 

 

- 자바 스크립트가 기본적으로 가지고 있는 객체들

Date 객체 - 함수	date.now()	기준 시간으로부터 지금까지 지난 밀리초
	date.getFullYear()	년도
	date.getDate()	초기화 한 시간의 일
	date.getDay()	현재 요일의 index
	date.getTimes()	내가 기준으로 잡은 시간이 기준 시간으로부터 얼마나 지났는지 밀리초
	date.getHours()	현재 시간 (시)
	date.getMinutes()	현재 시간 (분)
	date.getSeconds()	현재 시간 (초)
Math 객체 - 함수	Math.PI()	π
	Math.E()	e
	Math.min()	최솟값
	Math.max()	최댓값
	Math.random()	랜덤한 수를 추출
	Math.round()	반올림
	Math.floor()	내림
	Math.ceil()	올림

 

- 코드 예시 

      // 표준 객체 : 자바 스크립트에 기본적으로 내장되어 있는 친구들
      // String, Number,Array

      // Date
      // Date : javascript에서 시간과 날짜에 대한 정보를 얻기 위해 사용되는 객체
      // 초기화 ( new )
      // new Date(): 현재 시간
      // new Date(년,월,일,시,분,초,밀리초) : 내가 parameter로 넣은 특정 시간을 가져온다.
      // month = ['']
      let date = new Date();

      console.log(date);
      // 초기화 할 때 Date 에 값을 넣으면(숫자를 넣으면) 어떤 시간이 나오냐?->1970년 1월 1일 0시부터 밀리초만큼 지난 날짜

      console.log(Date.now()); // 기준 시간으로부터 지금까지 지난 밀리초

      // Date 객체
      console.log(date.getFullYear()); // getFullYear : 년도
      console.log(date.getDate()); //getDate : 초기화 한 시간의 일
      console.log(date.getDay()); // getDay : 현재 요일의 index
      // 일요일(0) , 월요일(1), 화요일(2), 수요일(3)...토요일(6)

      console.log(date.getTime()); // 내가 기준으로 잡은 시간이 기준 시간으로부터 얼마나 지났는지를 밀리초로.

      console.log(date.getHours()); // 현재시간 (시)
      console.log(date.getMinutes()); // 현재시간 (분)
      console.log(date.getSeconds()); // 현재시간 (초)

      // yyyy-mm-dd
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();

      console.log(`${year}-${month}-${day}`);

      // Math: 수학적인 계산을 위해 사용
      console.log(Math.PI);
      console.log(Math.E);
      console.log(Math.SQRT2);

      // Math 객체 안의 메소드
      // 1.min: 최솟값
      console.log(Math.min(45, 2, 0, -1, -5));

      // 2.max : 최댓값
      console.log(Math.max(45, 2, 0, -1, -5));

      // 3.random : 랜덤한 수를 추출
      console.log(Math.random());

      //min~max 1~10
      //let a = Math.random * (max - min) + min;
      console.log(Math.random() * 9 + 1);

      // 4. round , floor, ceil
      //round(): 반올림
      // floor : 인수로 전달받은 값과 같거나 작은 수 중에서 가장 큰 정수를 반환 = 내림
      // ceil : 인수로 전달받은 값과 같거나 큰 수 중에서 가장 작은 정수를 반환 = 올림
      console.log(Math.round(1.8));
      console.log(Math.floor(1.9));
      console.log(Math.ceil(1.9));

 

 

 

2. DOM ( Document Object Model )

 

- HTML 문서 요소의 집합

- HTML 문서는 각각의 node와 object의 집합으로 문서를 표현

    ➡️ 따라서 각각 node 또는 object에 접근하여 문서 구조 / 스타일 / 내용 등을 변경 할 수 있도록 하는 것

 

 Document ?

- 웹페이지에 존재하는 HTML 요소에 접근하여 행동을 하고자 할 때 사용하는 객체

 

DOM 의 기능?   1. 새로운HTML요소나속성추가 2. 존재하는 HTML 요소나 속성 제거 3. HTML 문서의 모든 HTML 요소 변경 4. HTML 문서의 모든 HTML 속성 변경 5. HTML 문서의 모든 CSS 스타일 변경 6. HTML 문서에 새로운 HTML 이벤트 추가 7. HTML 문서의 모든 HTML 이벤트에 반응

 

 Document - 요소 선택 

 

document.getElementById(아이디 속성 값)	id 속성 값으로 요소를 선택해서 가져옴 즉, id 는 한개 씩 줘야함. 중복 불가	HTMLInputElement
document.getElementByClassName(클래스 속성 값)	class 속성값으로 요소를 선택해서 가져옴	HTMLCollection
document.getElementsByTagName(태그 이름)	태그 이름을 기준으로 요소를 선택해서 가져옴	HTMLCollection
document.getElementsByName(name 속성 값)	name 속성 값으로 요소를 선택해서 가져옴	HTMLCollection
document.querySelector(CSS 선택자)	특정 속성이 아니라 내가 원하는 걸 선택자를 이용해서 가져옴	HTMLHeadingElement
document.querySelectorAll(CSS 선택자)	querySelector와 동일하지만 , 다른점은 n개 가져올 수 있음	NodeList

 

HTMLCollectiion vs NodeList 차이 비교해보기  1.     - HTMLCollection 객체는 <> 요소 노드만 포함하고, ( = 태그 요소만 포함한다. )     - NodeList 객체는 <>  요소 노드, 텍스트 노드 등을 모두 포함한다.     2.     - HTMLCollection 객체는 자식 요소 노드에 접근 할 때 인덱스 방식과 namedItem 메소드 방식을 사용할 수 있다.     - NodeList 객체는 인덱스로만 접근이 가능하다.     3.     - HTMLCollection 은 동적이고, NodeList는 정적이다.     - HTMLCollection 객체는 DOM을 다루면서 새로운 요소를 추가했을 때 추가된 요소도 가져올 수 있다.     - NodeList 객체는 새로 추가된 요소를 가져올 수 없다.     4.      - HTMLCollection[] : 실제 배열 x, 배열과 유사한 객체. 실제 배열이 아니기 때문에 forEach 문 사용 불가.     - NodeList[] : 실제 배열 ㅇ, forEach 문을 사용할 수 있다.

 

 요소 다루기 

 

.textContent	태그 내에 들어 갈 문자열을 지정 Ex. 요소.textContent="hi"; -> 선택된 요소 내부의 문자열로 hi가 들어가게 됨
.innerText
.innerHTML

 

classList -> 선택 요소에 class를 더하거나, 빼거나, 클래스가 존재하는지 체크하는 메소드 -> 해당 기능과 CSS를 잘 활용하면 액티브한 웹페이지 구성 가능
요소.classList.add()	클래스 추가
요소.classList.remove()	클래스 제거
요소.classList.contains()	클래스의 유무를 확인하고, true / false 값 반환
요소.classList.toggle()	원하는 클래스가 있으면 제거, 없으면 추가

 

요소.setAttribute("속성명","지정할 속성")

선택한 요소의 속성 값을 직접 지정할 수 있는 메소드

 

 다른 노드에 접근하기 

 

- 특정 노드를 선택한 후, 그 노드의 형제, 부모, 자식 노드에 접근하는 방법 

- 중첩 사용 가능

 

previous Sibiling ?  - 요소를 가져오는데 요소 노드 , 텍스트 노드 구분 없이 다 가져옴 - #text 와 주석까지 모두 노드로 카운트 함

 

요소.children / 요소.childres[0]
요소.parentNode
요소.previousElementsiblings
요소.nextElementSiblings

 생성 

createElement('html 요소')

- html의 특정 노드를 생성 - 괄호 안에는 html의 요소인 태그명을 넣음

 

 추가 

 

요소.append() / 요소.appendChild()	선택된 요소의 맨 뒤 자식 요소로 추가
요소.prepend()	선택된 요소의 맨 앞쪽 자식 요소로 추가
요소.before()	선택된 요소의 앞에 있는 형제 요소로 추가
요소.after()	선택된 요소의 바로 뒤 형제 요소로 추가

 

 삭제 

 

요소.remove();	선택된 요소 삭제
요소.removeChild('요소의 자식요소');	선택된 요소의 자식 요소 삭제

 

- 코드 예시

 

	function createNode() {
        // 노드를 만드는 친구
        // createElement(태그)

        let li = document.createElement("li");

        // li 태그 안에 글자넣기
        li.innerText = "새로 추가된 리스트";
        console.log("li : ", li);

        let td = document.createElement("h3");
        console.log("td : ", td);
      }
      
      
      function appendNode() {
        let input = document.getElementById("input");
        let value = input.value;
        // input 요소를 선택하고 value 속성을 이용하면 입력창의 값을 가져 올 수 있다.
        console.log("value : ", value);
        let li = document.createElement("li");

        li.innerText = value;
        console.log("li : ", li);

        // append(): 요소.append -> 선택한 요소의 맨 뒤 자식요소로 추가가 된다.

        let ul = document.querySelector("ul");
        ul.append(li);
      }
      
      
      function appendChildNode() {
        let input = document.getElementById("input");
        let value = input.value;
        // input 요소를 선택하고 value 속성을 이용하면 입력창의 값을 가져 올 수 있다.

        let li = document.createElement("li");
        li.innerText = value;

        // appendChild(): 요소.appendChild() -> 선택한 요소의 맨 뒤 자식요소로 추가가 된다.
        // append 와 appendChild 의 차이? -> append() 요소노드가 아니어도 (= 태그가 아니어도) 추가를 시켜준다. 즉 태그가 아니어도 상관 없음 / appendChild() :요소 노드만 추가할 수 있다. ( 태그 요소만 선택 가능 )

        let ul = document.querySelector("ul");
        ul.appendChild(li);
      }
      
      
      function prependNode() {
        let input = document.getElementById("input");
        let value = input.value;

        let li = document.createElement("li");
        li.innerText = value;

        let ul = document.querySelector("ul");
        ul.prepend(li);
        // prepend() : 요소.prepend() 선택한 요소의 맨 앞 자식 요소로 추가가 된다.
      }
      
      
      function beforeNode() {
        // 기준 노드 앞에 ( 형제 요소로 추가한다. )
        let standard = document.getElementById("li");
        console.log("standard : ", standard);

        li.inner = "before";

        standard.before(li);
      }
      
      
      function afterNode() {
        let standard = document.getElementById("li");
        console.log("standard : ", standard);

        li.inner = "after";

        standard.after(li);
      }
      
      
      function removeNode() {
        // remove(): 요소.remove() 내가 선택한 요소를 삭제
        let standard = document.getElementById("li");
        standard.remove();
      }
      
      
      function removeChildNode() {
        //removeChild(): 요소.removeChild() 선택한 요소의 자식 요소들을 삭제

        let ul = document.querySelector("ul");
        let standard = document.getElementById("li");

        console.log(ul.removeChild(standard));
        // removeChild 는 부모 요소를 선택해야 하지만, 삭제된 요소를 반환까지 해준다.
        standard.removeChild(standard);
      }