[JS] 표준 객체 DOM

1. Primitive 자료형

1) Boolean

• 참(true), 거짓(false) 둘 중 하나의 값을 갖는 요소

2) Number

• 숫자형으로 정수와 부동 소수점, 무한대 및 NaN(숫자 아님)

  NaN : 수학적 or 계산 상황에서 예상치 못한 결과 / 정의되지 않은 결과를 나타냄

3) String

• 문자 데이터를 나타낼 때 사용

4) Null

• 빈 값을 뜻하는 null 타입
• 타입은 존재하지만 값은 존재하지 않음
• 개발자가 직접 선언하기도 한다.

5) Undefined

• 값과 타입이 없다.

다른 변수에 값을 할당하거나 함수 인자를 넘길 때 값을 복사해 전달한다.

2. Object 자료형

• 원시 타입을 제외한 나머지 값 (함수,배열,클래스 등)은 모두 객체
• 키(key)와 값(value)로 구성된 프로퍼티(property) 집합
  -> 프로퍼티 : 데이터
  -> 메소드 : 동작 (프로퍼티 값이 함수일 때)

메모리 주소의 참조값을 저장한다.

1) 배열

• []나 new Array()를 이용해 생성한다.
• 배열 객체는 쉽게 값을 쉽게 변경가능하다. (주소값 참조하는 Object 자료형이라서)
  -> 반면에 number,null같은 경우 값을 쉽게 변경 불가능(Primitive 자료형이라서)
  
• 변수명.length, 변수명.push(추가할값), 변수명.pop(), 변수명.unshift(추가값), 변수명.shift(), 변수명.indexOf(찾을값)

2) 객체

• 키 - 값 형태로 저장한다.
• 실생활에서 우리가 인식할 수 있는 사물을 객체라고 할때, 객체 : 고양이, 메소드 : 특성,행동 등이라고 볼 수 있다.
  

3. 표준 객체

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

1) Date 객체

• 매 순간 바뀌는 시간과 날짜에 관한 정보를 얻기 위해 사용하는 객체
• 현재 날짜 출력은 let now = new Date()로 한다.
• 만약 ()안에 값을 넣으면, 1970년 1월 1일 기준으로 한다.
  -> let Jan_02_1970 = new Date(1000360024) = 1970년 1월 2일
  -> 1000ms는 1초로 1000 * 3600 = 1h(1시간)이다. 여기에 24를 곱하면 하루가 되므로 원래값인 1970년 1월 1일보다 하루지난 1월 2일이 출력되는 것이다.

Date 객체 메소드(함수)

• date.now() / new Date() : 현재시간 반환
• date.prototype getter 메소드
  -> getFullYear() : 년도만 (4자리) / Number타입이다.
  -> getMonth() : 월 ( 0 ~ 11) / 0이 1월이다.
  -> getDate() : 일
  -> getDay() : 요일 ( 0 ~ 6 ) / 0이 일요일이다.
  -> getTime() : 시간
  -> getHours() : 시
  -> getMinutes() : 분
  -> getSeconds(): 초
  -> getMilliseconds() : 밀리초

2) Math 객체

• 수학에서 자주 사용하는 상수와 함수들을 미리 구현해놓은 Javascript 표준 내장객체
• 웹 브라우저마다 다른 결과를 얻을 가능성이 있기에 정확한 결과를 얻어야 할 경우에는 Math 메소드를 사용하지 않는 것이 좋다.

Math 메소드(함수)

• Math.Pi : 원주율 3.14
• Math.E : 자연 로그의 값
• Math.SQURT2 : 2의 제곱근
• Math.min(인자) : 인자로 전달받은 값 중 최소값
• Math.max(인자) : 인자로 전달받은 값 중 최대값
• Math.random() : 0 <= x < 1 사이의 난수 생성
• Math.round(인자) : 소수를 반올림하여 정수로 변환
• Math.floor(인자) : 소수를 내림하여 정수로 변환
• Math.ceil(인자) : 소수를 올림하여 정수로 변환

Math.random 응용

• 0 ~ 9 사이의 난수 생성
  -> Math.floor(Math.random() * 10);
  -> 원래 random은 0의 소수점 자리만 나타내고 1개의 범위 (0)만 나타낸다. 여기에 곱하기 10을 하면 10개 범위(0~9)를 나타낼 수 있게된다. Math.floor는 소수점을 버림으로써 0~9의 난수를 생성하기 위해서다.
• 즉, 곱하는 수는 원하는 범위의 숫자 + 1를 해줘야 한다.
• 1 ~ 100 사이의 난수 생성
  -> ( Math.floor (Math.random() * 100 ) + 1);
  -> 범위는 100이라서 100 곱하고, 여기에 1부터 시작이라서 +1을 해줬다.
• 20 ~ 22 사이의 난수 생성
  -> (Math.floor(Math.random() * 3 ) + 20)
  -> 범위는 3이라서 3곱하고, 여기에 20부터 시작이라서 +20 해줬다. 원래 random은 0부터 시작하므로 +20 을 해서 20부터 시작하게 한 것이다. 또한 원래 random은 1개의 범위이므로 곱하기 3을 해서 범위가 3이도록 해줬다.

4. DOM

• 문서 객체 모델 ( Document Object Model)
• XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스로 문서 내의 모든 요소를 정의하고 각각의 요소에 접근하는 방법을 제공
  
• 새로운 HTML 요소/속성 추가
• 존재하는 HTMl 요소/속성 제거
• HTML 모든 HTML 요소/속성 변경
• HTML 모든 CSS 스타일 변경
• HTML 새로운 HTML 이벤트 추가
• HTML 모든 HTML 이벤트에 반응

5. Document

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

// * document객체
console.log(document); // html 문서 전체
console.log(document.documentElement); // html 문서 내의 모든 element(요소)들을 가져옴
console.log(document.head); // head 태그와 내부 모든 element들
console.log(document.body); // body 태그와 내부 모든 element들
console.log(document.URL); // http, www. ... 전부 포함
console.log(document.domain); // ip주소나 우리가 아는 도메인

1) 요소 선택

getElementById("id이름")

• 해당 id를 갖는 요소를 불러오는 메소드
• document.getElementById("green");
  
  -> html에서 green이라는 id를 갖고 있는 코드가 가져와진다.

getElementByClassName("class이름")

• 동일한 클래스 이름을 가진 요소가 여러개 일 수 있으므로 elements (복수형)이다.
• document.getElementByClassName("pink");
  

getElementsByTagName("tag이름")

console.log(document.getElementsByTagName("div"));

querySelector("css선택자")

• css에서 사용했던 선택자를 이용해 요소 선택
• 문서에서 만나는 제일 첫번재 요소를 반환
  
• console.log(document.querySelector("#green"));
• console.log(document.querySelector("body div"));
  

querySelectorAll("css선택자")

• 해당 css 선택자 중에서 일치하는 모든 요소 선택
• console.log(document.querySelectorAll("div"));
• console.log(document.querySelectorAll("div.pink")[2]); // 인덱스 사용해 접근
  
  
  -> 배열로 저장된다.

2) 요소 다루기

태그 내부 content 다루기

• innerText : 요소 안의 텍스트를 가져오거나 수정, 남는 공백문자 제거
• innerHTML : 요소 안의 코드를 가져오거나 수정, 남는 공백문자 제거

// 해당 요소 내부의 텍스트 변경
div1.innerText =
  "       여기는 첫 번째 div 태그이면서 js에서 수정이 있었습니다.     ";

// 해당 요소 내부에 태그를 작성해도 태그 적용 안됨
div1.innerText =
  "여기는 첫 번째 div 태그이면서 js에서 <strong>수정</strong>이 있었습니다.";

// 해당 요소 내부의 html 변경
div1.innerHTML =
  "    여기는 첫 번째 div 태그이면서 innerHTML을 사용해 수정했습니다.    ";

// 해당 요소 내부에 태그 작성하면 적용 됨
div1.innerHTML =
  "여기는 첫 번째 div 태그이면서 <strong>innerHTML을 사용해 수정</strong>했습니다.";

// div1.innerHTML = "<ul> <li>1</li> <li>2</li> <li>3</li> </ul>"; // 이와같이 ul,li 태그를 사용할 수도 있다.

속성 접근

• 요소 속성 가져오기
  -> 요소.getAttrbute("속성명");

let naver = document.getElementById("naver");
console.log(naver);

• 요소 속성 수정

• 선택한 요소의 속성 값을 직접 지정할 수 있는 메소드이다.
  -> 요소.setAttrbute("속성명","속성값");
  

• 점 접근법 사용가능하다.

• 요소.접근할 곳
  

ClassList.xx

• 선택 요소에 class를 더하거나, 빼거나, 클래스가 존재하는지 체크하는 메소드
• 해당 기능 CSS를 잘 활용하면 액티브한 웹페이지 구성이 가능

let flowers = document.querySelectorAll("#flower li");
for (let li of flowers) {
  // style 속성 지정
  //   li.style.backgroundColor = "skyblue";
  //   li.style.color = "green";

  // 클래스 추가
  li.classList.add("changeStyle"); // html css에 있던 changeStyle 클래스를 추가함.
}
html 코드
.changeStyle {
   background-color: greenyellow;
   color: blue;
}

-> 주석처럼 하나하나 적용할 수도 있지만, 보통 html 코드에 css를 추가하고 클래스 추가하여 적용하는게 보편적이다.

• 요소.classList : 클래스 목록 가져오기
• 요소.classList.remove("클래스명") : 클래스 지우기
• 요소.classList.contains("클래스명") : 클래스를 갖고있는지 여부 확인 (t/f) -> 조건문에서 사용
• 요소.classList.toggle("클래스명") : 클래스 토글하기 / 해당 클래스가 있으면 제거,없으면 추가
• 요소.classList.add("추가할 클래스명") : 요소에 클래스 추가한다.

부모자식 노드

• 특정 노드를 선택한 후, 그 노드의 형제,부모,자식 노드에 접근하는 방법
• 모든 태그,엘리먼트는 노드이다. 모든 노드들은 요소가 될 수 없다.

html
    <!-- 요소 스타일링, for of문으로 순회, classList, 부모 형제 요소 접근 -->
    <ul id="flower">
      <li class="pink">벚꽃</li>
      <li>진달래</li>
      <li>개나리</li>
      <li>장미</li>
    </ul>
    
js 
const parentEl = document.querySelector("#flower"); // ul
const childEl = document.querySelector("#flower .pink"); // ul > li.pink

// 자식 노드 접근하기
console.log(parentEl.children); // ul의 자식 li들 유사배열로 불러옴
console.log(parentEl.children[2]); // 개나리
// 자식 요소에 접근하려면 배열 접근 방식을 따름
// 자식이 하나여도 동일

// 부모 노드 접근하기
// 요소 자체에 접근
console.log(childEl.parentNode); // childEl의 부모를 선택

// 형제 노드 접근
// 위 노드 접근
console.log(childEl.previousElementSibling); // 앞 형제 요소가 없기 때문에 null
console.log(childEl.parentNode.children[2].previousElementSibling); // 진달래
// 아래 노드 접근
console.log(childEl.nextElementSibling); // 진달래

createElement("html요소")

• html의 특정 노드(태그)를 생성
• 괄호안에는 html의 요소인 태그명 작성

html
 <!-- 요소 생성, 추가, 삭제 -->
<div class="container"></div>

js
const pEl2 = document.createElement("p"); // p태그 생성
pEl2.innerHTML = "새로 만들어진 두 번째 p태그";

// 여러 자식요소 한 번에 삽입가능
container.append(pEl, pEl2);

// createElement를 사용해 만든 요소는 여러번 삽입해도 한번만 들어감
container.append(pEl, pEl2, pEl2, pEl2);

요소 추가하기

• 부모.append(자식요소) : 해당 요소를 부모요소의 마지막 자식으로 추가
  -> 여러개 요소를 한번에 추가 할 수 있다. (단, 여러번 삽입해도 한번만 들어감)
  -> 텍스트 추가 가능하다.

• 부모.appendChild(요소) : 해당요소를 부모요소의 마지막 자식으로 추가
  -> 한 번에 하나의 요소만 추가 가능하다.
  -> 텍스트 추가 불가능하다.

// 선택된 요소의 자식요소로 매개변수 요소가 추가되는데, 가장 뒤에 자식요소로 추가됨
// 한번에 하나의 요소만 추가할 수 있음
const p2 = document.createElement("p");
p2.innerText = "appendChild 사용해서 추가할 첫 번째 p태그";
const p3 = document.createElement("p");
p3.innerText = "appendChild 사용해서 추가할 두 번째 p태그";
const p4 = document.createElement("p");
p4.innerText = "appendChild 사용해서 추가할 세 번째 p태그";

container.appendChild(p2);
container.appendChild(p3, p4); // p4는 추가되지 않음 (한번에 하나의 요소만 추가가능)
container.appendChild(p4); // p4는 추가되지 않음 (한번에 하나의 요소만 추가가능)
container.append(p2, p3, p4);

// container.appendChild("과연 될까요?"); // 텍스트 추가 안됨.

• 부모.prepend(자식요소) : 해당요소를 부모요소의 첫 번째 자식으로 추가

const div2 = document.createElement("div");
div2.classList.add("prepend");
div2.innerText = "prepend로 추가된 첫 번째 요소";
container.prepend(div2);

//  ? 화면에는 div2 태그만 나타나는데, 개발자 도구를 보면 div3도 추가 되어 있다.
//  -> 화면에 표시되는 순서는 DOM 계층 구조에서의 위치에 따라 달라진다.
// div2가 먼저 추가되었다면 렌더링 결과에서는 div3 위에 표시됩니다
const div3 = document.createElement("div");
div3.classList.add("prepend");
div3.innerText = "prepend로 추가된 두 번째 요소";
container.prepend(div3);

• 요소.before(추가할 요소) : 선택된 요소의 앞에 추가할 요소 추가
  -> prepend랑 유사한데, 다른점은 선택된 요소의 형제 인자로 전달한 요소를 추가한다는 것이다.

• 요소.after(추가할 요소) : 선택된 요소의 뒤에 추가할 요소 추가
  -> append랑 유사한데, 역시 이도 선택요소의 형제 인자로 전달한 요소를 추가한다.

요소 삭제하기

• 요소.remove(); : 선택된 요소 삭제됨
• 요소.removeChild("요소의 자식요소") : 선택된 요소의 자식요소 삭제됨

5. 이벤트 addEventListener

• 어떤 이벤트가 발생하면 약속된 명령어를 실행시키는 메소드
• 웬만하면 선택자로 읽어온 값을 변수에 담아서 사용한다.
  -> const id = document.querySelector("#id");

1) click : 클릭

2) Mouse 계열

• mouseover : 요소에 커서를 올렸을 때
  -> 마우스를 떼도 계속 적용된다.
• mouseout : 마우스가 요소를 벗어날 때
• mousedown : 마우스 버튼을 누르고 있는 상태
• mouseup : 마우스 버튼을 떼는 순간

3) focus

: 포커스가 갔을 때

4) blur

: 포커스가 벗어나는 순간

5) Key 계열

• keypress : 키를 누르는 순간 + 누르고 있는 동안 계속 발생
• keydown : 키를 누르는 순간에만 발생
• keyup : 키를 눌렀다가 떼는 순간

6) Load

: 웹 페이지에 필요한 모든 파일 (html,css,js 등)의 다운로드가 완료 됐을 때

7) Resize

: 브라우저의 창 크기가 변경될 때

8) Unload

: 링크를 타고 이동하거나, 브라우저를 닫을 때

9) change

: 폼 필드의 상태가 변경되었을 때

10) scroll

: 스크롤이 발생할 때

6. onclick

• 각각 HTML 요소에 속성 값으로 JS함수를 연결한다.
• onclck 보다는 click이벤트를 더 자주 사용한다..
  

7. 쿼리스트링

• url의 ?이후에 나오는 문자열을 말한다.

• 예를들어, https://velog.io/write?id=74abb157-c530-486a-9651-791b476c9c0b&Page=1&groupId=dfke123 에서 ?이후의 'id=74abb157-c530-486a-9651-791b476c9c0b&Page=1&groupId=dfke123 '이다.

• 다양한 쿼리스트링을 사용하는 경우 &로 이어준다.

• window.location.search : 윈도우의 쿼리스트링만 뽑아준다.
  

• URLSearchParams : 많은 쿼리스트링을 쉽게 추출할 수 있도록 도와준다.
  

const urlParam = new URLSearchParams(window.location.search);
const productId = urlParam.get("id"); // 쿼리스트링 중 id 키의 값을 뽑아줌
console.log(productId);