알토리 0주차 JavaScript

1. 자바스크립트 기본 문법 이해하기 (변수생성,if,for,while,function,array,object 등)

2. 자바스크립트 DOM 조작 이해하기

1. 자바스크립트 기본 문법

(1) 변수 생성

• var / let / const
  • var : 함수 스코프 / 재선언 가능 / 재할당 가능
  • let : 블록 스코프 / 재선언 불가 / 재할당 가능
  • const: 블록 스코프 / 재선언 불가 / 재할당 불가 ( 상수 )
    • 재선언: 이미 선언된 변수에 동일한 이름으로 다시 선언
    • 재할당: 이미 선언된 변수에 새로운 값을 다시 할당

(2) 조건문

if (조건 1) {

} else if (조건 2) {

} else {

}

if와 스위치의 차이

---

(3) 반복문

for (let i = 0; i < 5; i++) {
  console.log(i);
}

let j = 0;
while (j < 5) {
  console.log(j);
  j++;
}

for와 while 차이

---

(4) 함수

function add(x, y) {
  return x + y;
}

const multiply = (x, y) => x * y;

일반 함수 / 화살표 함수
this 선언 / this 전역 변수

---

(5) 배열

let arr = [1, 2, 3];
arr.push(4);
console.log(arr.length);

• 배열 내장 함수 : push / pop / map / filter / forEach

---

(6) 객체

let obj = {
  name: '홍길동',
  age: 30,
  greet: function() {
    console.log('안녕하세요, ' + this.name);
  }
};

obj.greet();

 

---

 

DOM 조작의 기본 3단계

1. 요소 선택 (Selecting Elements): 조작하고 싶은 HTML 요소 선택
2. 요소 속성 및 내용 수정 (Modifying Elements): 선택한 요소의 내용 및 스타일 변경
3. 요소 추가/삭제 (Adding/Removing Elements): 새로운 요소 추가 및 기존 요소 제거

 

단계 1: 요소 선택 (Selecting Elements)

가장 기본적인 단계

원하는 요소를 정확하게 선택 후 조작할 수 있다

메서드	설명	예시
document.getElementById('id')	id 속성을 사용하여 한 개의 요소 선택	const title = document.getElementById('id);
document.querySelector('selector')	CSS 선택자(ID, 클래스, 태그)를 사용하여 첫 번째 요소 선택	const h1 = document.querySelector('h1');
document.querySelectorAll('selector')	CSS 선택자로 일치하는 모든 요소(NodeList) 선택	const paragraphs = document.querySelectorAll('p');
document.getElementsByClassName ('class')	class 속성으로 모든 요소(HTMLCollection) 선택	const elements = document.getElementsByClassName('item');
document.getElementsByTagName ('tag')	태그 이름으로 모든 요소 선택	const allP = document.getElementsByTagName('p');

 

 

---

단계 2: 요소 속성 및 내용 수정 (Modifying Elements)

선택한 요소의 내용 및 스타일 변경 단계

• 내용 변경: textContent 또는 innerHTML 사용
  • element.textContent = '새로운 텍스트'; : 순수한 텍스트만 변경 (보안상 좋음)
  • element.innerHTML = '<h2>새로운 제목</h2>'; : HTML 태그를 포함하여 변경
• 속성 변경: setAttribute() 사용
  • element.setAttribute('href', 'https://www.google.com'); : 링크 주소 변경
• 스타일 변경: style 속성 사용
  • element.style.color = 'red';
  • element.style.backgroundColor = 'yellow';
• 클래스 추가/제거: classList 사용
  • element.classList.add('active');
  • element.classList.remove('active');
  • element.classList.toggle('active'); : 있으면 제거하고, 없으면 추가

// HTML에서 <p id="my-text"> 요소를 선택
const myText = document.getElementById('my-text');

// 텍스트 내용 변경
myText.textContent = 'DOM 조작이 재미있어요!';

// 스타일 변경
myText.style.color = 'blue';

// 클래스 추가
myText.classList.add('highlight');

 

---

 

• innerText: **"사용자 눈에 보이는 텍스트"**를 다룰 때 사용
  • 성능에 민감하지 않고, 실제로 보이는 내용만 필요한 경우에 적합
• textContent: **"순수한 텍스트 콘텐츠"**를 빠르게 다룰 때 사용
  • 보안상 가장 안전하며, 대부분의 경우 innerHTML 대신 사용을 권장
• innerHTML: **"HTML 구조 전체"**를 다룰 때 사용
  • 동적으로 HTML 태그를 삽입해야 할 때 유용
  • 사용자 입력값으로 사용할 경우 XSS 공격에 취약

 

 

 

---

1. document.querySelectorAll() 사용하기

ocument.querySelectorAll()는 해당 선택자와 일치하는 모든 요소를 NodeList라는 배열과 비슷한 형태로 반환합니다.

따라서 인덱스 번호를 사용해 원하는 요소를 정확하게 선택할 수 있습니다.

 

HTML

 

<ul>
  <li>첫 번째</li>
  <li>두 번째</li>
  <li>세 번째</li>
</ul>

JavaScript

 

// 모든 <li> 요소를 NodeList 형태로 가져옵니다.
const allListItems = document.querySelectorAll('li');

// NodeList의 두 번째 요소(인덱스 1)를 선택합니다.
const secondItem = allListItems[1];

// 선택된 요소의 텍스트를 출력합니다.
console.log(secondItem.textContent); // 결과: "두 번째"

---

2. document.querySelector()와 :nth-child() 또는 + 선택자 사용하기

nth-child 선택자 사용

:nth-child(n)는 n번째 자식 요소를 선택하는 CSS 선택자입니다. 2를 넣으면 두 번째 자식 요소를 선택합니다.

JavaScript

 

// 부모 요소인 <ul> 안에서 두 번째 <li>를 선택합니다.
const secondItem = document.querySelector('ul li:nth-child(2)');

console.log(secondItem.textContent); // 결과: "두 번째"

 

이 방법은 부모-자식 관계가 명확하고, 형제 요소들의 순서가 중요할 때 유용합니다.

+ (인접 형제) 선택자 사용

A + B는 A 바로 뒤에 오는 B 요소를 선택하는 선택자입니다.

이를 활용해 첫 번째 요소 바로 뒤에 있는 두 번째 요소를 선택할 수 있습니다.

HTML

 

<ul>
  <li id="first-item">첫 번째</li>
  <li>두 번째</li>
  <li>세 번째</li>
</ul>

JavaScript

 

// id가 first-item인 요소 바로 뒤에 있는 <li>를 선택합니다.
const secondItem = document.querySelector('#first-item + li');

console.log(secondItem.textContent); // 결과: "두 번째"

 

 

 

 

 

 

 

---

 

단계 3: 요소 추가/삭제 (Adding/Removing Elements)

새로운 요소를 만들거나, 기존 요소를 제거하여 DOM 트리를 변경하는 방법

• 새로운 요소 만들기: document.createElement()
  • const newDiv = document.createElement('div');
• 요소에 내용 추가: appendChild() 또는 prepend()
  • document.body.appendChild(newDiv); : <body> 태그 맨 뒤에 newDiv 추가
• 요소 삭제: remove() 또는 removeChild()
  • myText.remove(); : myText 요소를 DOM에서 제거

예시:

JavaScript

 

// 1. 새로운 <li> 요소를 생성
const newItem = document.createElement('li');

// 2. 새로운 요소에 텍스트 추가
newItem.textContent = '새로운 리스트 항목';

// 3. <ul> 태그를 선택
const ul = document.querySelector('ul');

// 4. 새로운 <li> 요소를 <ul>의 자식으로 추가
ul.appendChild(newItem);

// 5. 기존의 첫 번째 <li> 요소를 제거
const firstItem = document.querySelector('li');
firstItem.remove();

---