<frontend> {13} </JS와 객체, 문서객체모델(DOM)>

Javascript에서 객체란?
웹, 프로그램에서 인식가능한 모든 대상으로 JS에서 사용하는 객체는 다음과 같다.

∙내장 객체 : 웹프로그래밍 시 자주 사용하는 요소는 JS에 미리 객체로 정의되어 있다.

∙브라우저 관련 객체 : 웹 브라우저에서 사용하는 정보도 객체이다.

∙문서객체모델(DOM) : 웹문서 내부 삽입된 링크는 물론, 웹문서 그 자체도 객체이다.

 

 

 

 

1.  기본적인 객체의 인스턴스 만들기

📌 객체의 인스턴스 만들기

new 객체명

ex)
let current = new Date();
document.write("현재 시각은 " + now.toLocaleString());

 

 

 

 

---

2.  Javascript의 내장 객체

• 🤔 Array 객체
• 🤔 Date 객체
• 🤔 Math 객체

 

---

🤔 Array 객체

◼︎ Array 객체로 배열 만들기

let num = new Array(4);	// 배열크기가 4인 num배열 선언


let arr = ['a', 'b', 'c', 'd'];

for (let i = 0; i < arr.length; i++){
	document.write("<p>" + arr[i] + "</p>");
}

◼︎ Array 객체 메서드
∙ concat
∙ every
∙ filter
∙ forEach
∙ indexOf : 주어진 값과 일치하는 배열요소의 첫 인덱스를 찾는다.
∙ join : 배열 요소를 문자열로 합치며 구분자를 지정 가능
∙ push : 맨끝에 요소 추가
∙ unshift : 시작부분에 요소 추가
∙ pop : 맨끝 요소 반환
∙ shift : 첫 요소 반환
∙ splice : 배열에 요소 추가/삭제
∙ slice : 배열에 특정부분 잘라냄
∙ reverse 
∙ sort
∙ toString : 배열에서 지정한 부분을 문자열로 반환, 요소는 (,)로 구분

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array

Array - JavaScript | MDN

 

 

---

🤔 Date 객체

◼︎ Date 객체를 사용해 날짜와 시간을 지정.
- 이때, JS가 인식할 수 있는 형식으로 날짜와 시간을 써야한다.

    1. YYYY-MM-DD 형식
    2. YYYY-MM-DDTHH 형식
    3. MM/DD/YYYY 형식

new Date("2023-07-05")
new Date("2023-07-05T20:41:13")
new Date("02/28/2025")

◼︎ Date 객체 메서드

 

 

---

🤔 Math 객체
◼︎ 사용 방식

Math.프로퍼티명
Math.메서드명

ex)
Math.random()

◼︎ Math 객체 property 및 메서드

 

 

 

 

 

 

 

 

 

 

 

---

3.  브라우저 관련 객체

웹 브라우저 창에 문서가 표시되면 브라우저는 HTML소스를 한줄씩 읽으며 화면에 내용을 표시, 관련 객체를 생성한다.

 

 

 

 

 

 

 

 

 

 

 

 

 

---

4.  문서객체모델 (DOM)

 

📌 DOM 트리

 

📌 DOM 구성 기본원칙

• 모든 HTML 태그는 요소(element)노드이다.
• HTML 태그에서 사용하는 텍스트 내용은 자식노드인 텍스트 노드이다.
• HTML 태그의 속성은 자식노드인 속성노드이다.
• 주석은 주석(comment)노드이다.

 

 

🤔 DOM 요소에 접근하고 속성 가져오기

📌 DOM에 접근하기

// id 선택자로 접근하는 getElementById() 메서드
요소명.getElementById("id명")

// class값으로 접근하는 getElementByClassName() 메서드
요소명.getElementByClassName("class명")

// 태그 이름으로 접근하는 getElementByTagName() 메서드
요소명.getElementByTagName("태그명")

// 다양한 방법으로 접근하는 querySelector(), querySelectorAll() 메서드
노드.querySelector(선택자)
노드.querySelectorAll(선택자 | 태그)

📌 웹 요소 내용을 수정하는 innerText, innerHTML 프로퍼티

요소명.innerText = 내용
요소명.innerHTML = 내용

📌 속성을 가져오거나 수정하는 getAttribute(), setAttribute() 메서드

getAttribute("속성명")
setAttribute("속성명", "값")

 

 

 

🤔 DOM에서 이벤트 처리하기

📌 DOM 요소에 함수 직접 연결

📌 함수 이름을 사용해 연결

📌 DOM의 event 객체 알아보기

📌 addEventListener() 메서드 사용하기

📌 CSS 속성에 접근하기
 

 

 

🤔 DOM에서 노드 추가∙삭제하기

📌 노드 리스트란

📌 텍스트 노드를 사용하는 새로운 요소 추가

📌 속성값이 있는 새로운 요소 추가

📌 노드 삭제하기

📌 CSS 속성에 접근하기
 

 

이후 추가작성

(Typescript로 부트캠프가 방향을 선회해버려서...)