Javascript 2 DOM

📌 DOM (Document Object Model) 

; 문서 객체 모델

웹 문서를 브라우저가 이해할 수 있게 객체로 구조화하여 표현하는 방식.
문서의 요소들은 노드가 되어 부모-자식 관계의 계층적 구조. 
이 객체들을 Javascript를 통해 수정, 삭제, 추가 등 동적으로 조작 가능.
 

DOM Tree

 
 

---

 

 
 

🔵 동기식 처리 모델 (Synchronous processing model)

 
- 순차적으로 실행 (직렬)
 

 
자바스크립트는 싱글 스레드 언어로 하나의 작업만 수행 가능.
입력한 코드대로 순차적으로 동작하는 방식을 동기식 처리라고 함.
순차적으로 처리를 하게 되면 응답이 올 때까지 다른 작업을 하지 못 하고 대기해야 함.
그만큼 기다림이 길어지고 효율이 떨어지기에 성능과 사용자 경험에 영향을 미칠 수 있음.
 
ex.) 요리를 하다가 참기름이 필요해짐.
→ 요리하던 사람이 직접 참기름을 사오고  
→  다시 마저 요리를 완료한 뒤에 다른 요리를 새로 시작.

 

 

🔴 비동기식 처리 모델 (Asynchronous processing model)

- 비순차적으로 실행 (병렬)
 

 
자바스크립트는 기본적으로 싱글 스레드 언어이지만, 비동기 처리를 통해 멀티태스킹처럼 작업을 수행.
작업의 완료를 기다렸다가 다음 작업을 실행하지 않고, 메인 스레드가 작업을 다른 곳에 맡기고 처리가 완료되면 다시 받음. 이로써 동시적으로 빠르게 여러 작업을 효울적으로 처리 가능.
시간이 오래 걸리고, 실시간 상호작용이 중요한 작업에서 많이 사용.

 
ex.) 요리를 하다가 참기름이 필요해짐.
→ 다른 사람에게 참기름 사다주길 요청함. 참기름이 올 동안 다른 요리를 하면서 기다림.
→  그리고 참기름이 오면 다시 원래의 요리를 마저 완성.
 
 
 

💭 싱글 스레드 언어인 자바스크립트가 어떻게 멀티 태스킹이 가능한 걸까?

=> 자바스크립트를 실행하는 스택은 싱글스레드지만, Web APIs는 멀티 스레드이기 때문.

• Web APIs : 브라우저에 내장된 기능. 자바스크립트가 웹에서 다양한 작업을 할 수 있게끔 돕는 인터페이스. (Html 문서 제어, 네트워크 요청, 파일 입출력, 타이머, 이벤트 처리 등의 작업을 수행)
• ➡️ Web APIs는 각 API마다 스레드가 할당되어 있고 이것들이 모여 멀티 스레드 형성.

API ❓
- 서로 다른 소프트웨어나 시스템이 정보를 주고받을 수 있게 상호작용을 돕는 중간 매개체.

 
 
 
 

이렇듯 브라우저는 멀티 스레드로 작동하기 때문에,
자바스크립트의 메인 스레드와 Web APIs의 작업을 동시에 처리가 가능한 것.
➡️ 비동기 함수를 통해 성능 향상 효과를 누릴 수 있음.


 

☑️ 이벤트 루프(Event Loop)와 동시성(Concurrency)

 

여러 작업을 처리하는 것처럼 느껴지는 이러한 자바스크립트의 특성을 동시성(Concurrency)이라고 하며, 
이것을 돕는 것을 이벤트 루프(Event Loop)라고 함.
 

● Call Stack(호출 스택)

- 함수가 호출되면 요청된 작업들이 Call Stack에 쌓이고 순서대로 실행됨.
자바스크립트는 하나의 Call Stack을 가지고 있기 때문에, 하나의 작업이 종료되기 이전에 다른 작업을 실행 불가능.
 

●  Heap
- 동적으로 생성된 객체 및 데이터 저장소.
 
●  Event Queue(Task Queue)
-  비동기 작업 완료 시 실행될 함수들의 대기실.
DOM 이벤트, 비동기식 콜백 함수, 비동기식 이벤트 핸들러, 타이머 함수(setTimeout(), setInterval()), HTTP 요청(fetch(), XMLHttpRequest)
등의 작업들이 이벤트 큐에 들어갔다가 → 이벤트 루프에 의해 순차적으로 Call Stack으로 이동된 후 실행됨.
 
●  Event Loop(이벤트 루프)

- Call Stack 및 Event Queue에 작업이 있는지 반복하여 확인. 
Call Stack이 비어있게 되면 Event Queue의 작업들을 이동시킴.
 
이 과정들을 거쳐 자바스크립트는 비동기 작업을 처리하면서도 동기 코드와 조화를 이룸.
+ 자바스크립트는 가비지 컬렉션(Garbage Collection)을 통해 자동으로 메모리를 관리.
 

---

✔️ 비동기 처리 3가지 방식

ⓛ 콜백 함수

- 비동기 작업이 완료되면, 함수를 받아와 출력하는 함수.

console.log(“첫번째 실행”);

// 1초 후에 실행
setTimeout(() => {
  console.log(“두번째 실행”);
}, 1000);

console.log(“세번째 실행”);

첫번째 실행
세번째 실행
두번째 실행 // -> 1초 후 실행되어, 세번째 보다 늦게 출력됨.

 


 

② Promise

- 비동기 작업이 완료되면 성공/실패를 나타내는 객체.
- 성공하면 resolve / 실패하면 reject 로 결과 처리.

• then

- then 메서드는 Promise가 성공(resolve)했을 때 실행될 콜백 함수를 받음.

let promise = new Promise((resolve, reject) => {
  setTimeout(() => resolve(“성공”), 1000);
});

promise.then(result => {
  console.log(result);
});

// “성공” 출력

 

• catch

- catch 메서드는 Promise가 실패(reject)했을 때 실행될 콜백 함수를 받음.
- catch는 then 뒤에 체이닝으로 붙여서 사용.

let promise = new Promise((resolve, reject) => {
  setTimeout(() => reject(“실패”), 1000);
});

promise.then(result => {
  console.log(result);
}).catch(error => {
  console.error(error);
});

 
 


③ Async / Await

- 비동기 코드를 동기 코드처럼 작성 가능하게 하는 역할.
- Promise를 더 쉽게 사용할 수 있게 도움.
await를 통해 promise가 완료될 때까지 기다린 후 결과값 반환.

async function Function() {  // async 키워드를 사용하여 비동기 함수 선언
  let promise = new Promise((resolve, reject) => {  // 새로운 Promise 생성
    setTimeout(() => resolve("완료!"), 1000);  // 1초 후에 "완료!"로 resolve
  });

  let result = await promise;  // promise가 완료될 때까지 기다림

  alert(result);  // promise가 resolve되면 "완료!"라는 결과가 result에 저장되고, alert로 표시
}

Function();  // 비동기 함수 호출

 
Promise 처리를 기다리는 동안 엔진이 다른 일(다른 스크립트 실행, 이벤트 처리 등)을 하기 때문에 CPU 리소스가 낭비되지 않으며, 동기적 처리처럼 보이지만 비동기적 처리를 하고 있는 것.

---

🕹️ JavaScript가 DOM을 조작하는 방법

 

🔹 DOM 요소 선택

• document.getElementById() - 특정 ID를 가진 요소를 선택
• document.querySelector() - css선택자를 이용해 제일 먼저 부합하는 요소를 선택
• document.querySelectorAll() - 부합하는 모든 요소들을 노드 리스트에 반환. (클래스명 및 태그명으로 선택)

let elements = document.querySelectorAll('.myClass');

 

🔹 콘텐츠 수정

• innerHTML - 요소 안에 HTMl 구조 삽입
• textContent - 텍스트 요소의 내용 수정

🔹 DOM 요소 속성 추가 및 수정

• setAttribute() - 속성 수정
• getAttribute() - 특정 속성의 값을 불러오기
• removeAttribute() - 속정 제거

🔹 CSS 스타일 변경

- style 속성을 통해 인라인 스타일 설정 변경 가능

element.style.backgroundColor = “black”;

 

🔹 DOM 요소 생성 및 추가

• document.createElement()
- 새로운 HTML 요소 생성

let newDiv = document.createElement(“div”);

• appendChild() - 부모 요소 아래 새로운 자식 요소 추가

document.body.appendChild(newDiv);

• insertBefore() - 요소 앞에 새로운 요소 추가

🔹 DOM 요소 제거

• removeChild() - 부모 요소 아래의 자식 요소를 제거
• remove() - 직접 특정 요소 제거

🔹 클래스 추가 및 제거

• classList.add() - 클래스 추가
• classList.remove() - 클래스 제거
• classList.toggle() - 클래스 toggle 있으면 제거하고 없으면 추가.

element.classList.toggle('active');

---

 

❗️ 이벤트(Event)와 이벤트 처리(Event Handling)

 

• 이벤트(Event)

웹 브라우저에서 어떠한 동작이 발생한 것.

• 이벤트 처리(Event Handling)

자바스크립트는 발생하는 이벤트에 대해,
이벤트 핸들러(Event Handler) or 이벤트 리스너(Event Listener) 함수를 사용하여 처리.

 
 

💫 이벤트 유형

마우스 이벤트

• click : 마우스 클릭
• dblclick : 마우스 더블 클릭
• mouseover : 마우스가 영역 안에 들어있을 시
• mouseout : 마우스가 영역을 벗어났을 시
• mousedown : 마우스를 눌렀을 시
• mouseup : 마우스를 떼었을 시
• mousemove : 마우스를 움직일 시
• contextmenu : 마우스 우클릭

키보드 이벤트

• keydown : 키보드 키 눌렀을 시
• keyup : 키보드 키 떼었을 시
• keypress : 키보드 키 누른 상태일 시

폼 이벤트

• submit : submit 버튼 눌렀을 시
• reset : reset 버튼 눌렀을 시 (최근에는 사용 X)
• focus : html 요소가 포커스를 받을 시
• blur : html 요소가 포커스를 잃을 시
• change : 값이 변경되었을 시
• select : input 또는 textarea 태그 안의 텍스트를 드래그 했을 때

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Focus예시</title>
  </head>
  <body>
    <input type="text" id="Input" placeholder="^^" />
    <script>
      let inputBox = document.getElementById("Input");

      inputBox.addEventListener("focus", function () {
        inputBox.style.backgroundColor = "lightyellow"; // 포커스가 맞춰지면 배경색 변경
      });

      inputBox.addEventListener("blur", function () {
        inputBox.style.backgroundColor = " "; // 포커스가 벗어나면 배경색 복구
      });
    </script>
  </body>
</html>

문서/윈도우 이벤트

• DOMContentLoaded : html 문서 로드 후 DOM 트리가 완성되었을 시
• load : 페이지 로딩 완료 시
• unload : 페이지 이동 시
• resize : 요소의 사이즈 변경 시
• scroll : 스크롤바 움직였을 시

 
 

📡 이벤트 전파(Event Propagation)

- 이벤트는 DOM tree(부모-자식 요소)를 통해 전파됨

◎ 캡쳐링(Capturing)
: 최상위 요소(부모 요소)부터 자식 요소들을 거쳐 타킷 요소로 전파되는 방식.

◎ 버블링(Bubbling)
: 타깃 요소(자식 요소)에서 먼저 처리되고 부모 요소로 전파되며 거슬러 올라가 최상의 요소까지 도달하는 방식.

 

🔶 이벤트 핸들러

: 이벤트 발생 시 실행되는 함수.
- 인라인 방식 (= html 내부에 속성으로 할당)
- 이벤트 핸들러 하나만 등록이 가능.

<button onclick="Function">클릭</button>

<script>
function Function() {
    alert("() 클릭 이벤트 발생 시 함수 실행");
}
</script>

 
 

 

🔶 이벤트 리스너

: addEventListener 메소드를 통해 해당 요소에 연결하여 실행될 함수를 전달.

 
- js 코드를 통해 이벤트 핸들러를 동적으로 할당.
- 이벤트 리스너 여러 개 등록이 가능, HTML 요소 뿐 아니라 모든 DOM 노드에 리스너 등록 가능.
- 캡쳐링 및 버블링 지원.
 

let Button = document.getElementById('button'); // 버튼 요소 가져오기
Button.addEventListener("click", myEvent); // 클릭 이벤트 발생 시 myEvent 함수 실행

let myEvent = () => {
  alert("이것은 이벤트 리스너 예시입니다.");
}

 
 
 
 

💠 이벤트 객체

: DOM에서 이벤트 발생 시, 그 정보를 포함하는 객체.
이 이벤트 객체는 이벤트 핸들러 함수로 전달되어, 다양한 정보를 제공함.
 
- ' event, evt, e '의 이름으로 매개변수를 사용.
- 이벤트 핸들링을 더욱 세부적으로 제어 가능.
- 기본 동작 및 이벤트 전파 등 기본 동작들까지 제어가 가능하여 더욱 다양한 사용자 경험 제공 가능.
- 이벤트 정보(발생 요소 및 위치 등)를 바탕으로 그때그때 상황에 알맞은 처리가 가능해짐.
 
<이벤트 객체의 주요 속성과 메서드>

• type - 이벤트의 타입을 나타냄 (click, keydown, submit)
• target - 이벤트가 발생한 DOM 요소를 가리킴
• currentTarget - 이벤트 리스너가 발생한 요소 가리킴(event.target), 이벤트 핸들러가 등록된 요소를 가리킴(event.currentTarget)
• preventDefault() - 기본 동작 방지
• stopPropagation() - 이벤트 전파 차단
• clientX / clientY - 마우스 이벤트 시 X,Y 좌표 위치 반환.
• key / keyCode - 키보드 이벤트 시 눌러진 키값의 코드를 반환.

 

<button id="button">버튼 클릭</button>

<script>
  let Button = document.getElementById("button");

  Button.addEventListener("click", function (event) {
    alert(`클릭된 요소: ${event.target.tagName}`); // 클릭한 요소의 태그 이름 대문자 반환
    console.log(`Mouse position: X=${event.clientX}, Y=${event.clientY}`); // 클릭 위치
  });
</script>

 
⬇️ 출력 화면

 

---

 

✅ 이벤트 핸들러 함수 내부의 this

: 함수가 호출된 맥락에 따라 this 값이 달라짐.
ES5 - 함수 값 상관없이 this 값 설정 가능한 bind 메소드 도입.
ES6 - 스스로의 this 바인딩을 하지 않는 화살표 함수를 추가.  
 
 

●  기본 규칙

- 브라우저 환경에서 window 객체를 가리킴.
- Node.js 환경에서 global 객체를 가리킴.

console.log(this);
// 브라우저에서는 window 객체 출력

 
 
 

●  this (in 메소드)

- 해당 메소드를 호출한 객체를 가리킴.

let person = {
  name: "홍길동",
  introduce: function () {
    console.log(this.name);
  },
};

person.introduce();
// 출력: 홍길동

 
 

● this (in 함수)

-  일반 함수에서는 호출된 맥락에 따라 달라짐.
 
<엄격 모드> → 함수에서 this는 undefined가 됨.

"use strict"; // 엄격 모드 설정

function StrictThis() {
  console.log(this); // undefined 출력
}

StrictThis();

 
<비엄격 모드> → 일반 함수에서 this는 전역 객체를 가리킴.

function NoneStrictThis() {
  console.log(this); // 브라우저에서는 window 객체 출력
}

NoneStrictThis();

 
 

● this (in 생성자 함수)

- 생성자 함수 및 클래스에서는 새로 생성된 객체를 가리킴.

function Person(name) {
  this.name = name;
}

let HongGilDong = new Person("홍길동"); 
console.log(HongGilDong.name); // this는 새로 생성된 HongGilDong 객체를 가리킴.
// 출력: 홍길동

 
 

● this (in 화살표 함수)

- 자신의 this 가지지 않고, 외부 스코프(전역 객체)의 this를 사용. 

let person = {
  name: "HongGilDong",
  introduce: () => {
    console.log(this.name); // 화살표 함수는 전역 객체의 this를 사용함
  },
};

person.introduce(); 
// 출력: undefined 
// (전역 객체에 name이 있는 게 아니니 undefined 출력)

 
 
 

● 명시적 this 설정

• call() : 첫번째 인자로 this를 지정하여 함수에 인자를 하나씩 넘기며 호출 가능.

function introduce() {
  console.log(this.name);
}

let person = { name: "홍길동" };

introduce.call(person); 
// 출력: 홍길동

 

• apply() : call()과 유사하지만, 함수에 전달하는 인자를 배열로 넘김.

function introduce() {
  console.log(this.name);
}

let person = { name: "홍길동" };

introduce.apply(person); 
// 출력: 홍길동

 

• bind()

- 새로운 함수를 반환하는데, 해당 함수의 this는 고정.

function introduce() {
  console.log(this.name);
}

let person = { name: "홍길동" };

// bind를 사용하여 this가 person으로 고정된 새로운 함수 생성
let boundIntroduce = introduce.bind(person);

boundIntroduce(); 
// 출력: 홍길동

 
 

● this (in 이벤트 핸들러)

- 이벤트 핸들러 내부에서, 이벤트가 발생하는 해당 DOM 요소를 가리킴.

<button id="myButton">버튼 클릭</button>

<script>
  document.getElementById("myButton").addEventListener("click", function() {
    console.log(this); // 클릭한 버튼 요소를 가리킴
  });
</script>