자바스크립트 기초: 객체, DOM, 이벤트 핸들링

객체에 대한 이해 

JS 객체는 여러 데이터를 key-value 쌍으로 구성된 형태로 묶을 수 있는 자료형을 말합니다.
객체는 데이터를 구조화하고, 이를 활용하는 과정에서 유용합니다.

const person = {
    name: "Hong Gil Dong", // string
    age: 17,                // number
    isMale: true,           // boolean
    sayHello: function () { // method (함수도 객체의 value다!)
        console.log("Hi! My name is " + this.name);
    }
};

 

DOM (Document Object Model)

HTML 문서를 브라우저가 이해하고 “조작”할 수 있도록 만든 트리 형태의 객체 구조
JS로 이 DOM 구조에 접근하여 객체를 읽고, 수정하고, 추가하고, 삭제할 수 있습니다.
 
> Dom Query (Element 선택하기)

<h1 id="title">안녕하세요</h1>

const title = document.getElementById("title");
console.log(title.textContent); // 안녕하세요

 
 
DOM Tree : DOM을 트리 자료 구조로 표현한 것

DOM Tree

 
DOM Tree의 구성 요소

• Document Node : DOM 트리에 접근하기 위한 entry point
• Element Node : 문서의 구조를 서술하는 노드, Attribute Node 와 Text Node에 접근하기 위해서는 거쳐야한다.
• Attribute Node : id, class, href 와 같은 Attribute를 표현하는 노드
• Text Node: HTML 요소의 텍스트를 표현하는 노드 

 

DOM Query로 Element node를 가져와보기

하나의 노드 선택 

document.getElementById(id);
document.querySelector(CSS Selector); //여러개가 있을 경우 제일 앞 요소 선택

 
여러개의 노드 선택
 

document.getElementsByClassName(class);
document.getElementsByTagName(tagName);
document.querySelectorAll(Css selector);

 
 
 

---

실습

DOM 폴더에서 clss가 text인 element node를 출력해보세요 

console.dir(document.getElementsByClassName('text'));

DOM 폴더에서 id가 params인 element node를 출력해보세요

console.dir(document.getElementById('params'));

 
DOM폴더에서 #params안에 있는 h1 태그만을 출력해보세요 

console.dir(document.querySelector('#params h1'));

 
 

---

 

DOM Attribute Node를 다뤄보기

Attribute Node란 HTML 요소(Element)의 속성(Property)을 말한다.
예: <h1 id="test">Hello</h1>

• id="test" 가 바로 Attribute
• key-value 쌍으로 관리됨 → key: id, value: test

기본 코드 예시

<h1 id="test">Hello</h1>

const h1 = document.getElementById('test');

console.log(h1.hasAttribute('id'));    // true → id 속성이 있는지 확인
console.log(h1.getAttribute('id'));    // test → id 속성 값 가져오기
h1.setAttribute('class', 'class1');    // class 속성을 class1으로 추가/변경
h1.removeAttribute('id');              // id 속성을 제거

 
 

주요 메서드 

메서드 설명

hasAttribute('속성명')	해당 속성이 존재하는지 확인 (true/false 반환)
getAttribute('속성명')	해당 속성의 값을 가져옴
setAttribute('속성명', '값')	속성을 새로 추가하거나 값을 변경
removeAttribute('속성명')	해당 속성을 제거

 

---

실습: class 변경

 

• 기존의 class="text white"인 요소를 자바스크립트로 바꿔보는 실습.
• 목표: 글자 색깔 = 주황색, 배경 색깔 = 검은색
• CSS에는 .black 과 .orange 클래스를 활용

const second = document.getElementById('second');
second.setAttribute('class', 'black orange');

 
 
추가 Attribute 참고 
https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes

HTML attribute reference - HTML | MDN

---

DOM 의 node 추가하고 삭제하기 

document.createElement(tagName);
document.createTextNode(text);
document.appendChild(Node);
document.removeChild(Node);

// 1) h3 요소 생성
const h3 = document.createElement('h3'); 
h3.className = 'white';  // class="white" 속성 부여

// 2) 텍스트 노드 생성
const text = document.createTextNode('Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod ...');

// 3) h3 안에 텍스트 추가
h3.appendChild(text);

// 4) div#params를 찾아서 h3 추가
const params = document.getElementById('params');
params.appendChild(h3);

 

실행 순서

1. createElement() → 새로운 HTML 태그를 동적으로 만든다.
2. className 속성 → CSS 스타일 적용을 위해 class 추가.
3. createTextNode() → 순수 텍스트 내용을 만든다.
4. appendChild() →
   • 텍스트를 h3에 넣는다.
   • 완성된 h3를 div#params 안에 삽입한다.

 

---

 

 

Event Handling 정리 

1. Event 란? 

사용자가 웹 페이지에서 발생시키는 행동 또는 사건을 말합니다.
예 ) 마우스 클릭, 키보드 입력, 스크롤, 값 변경 등등..  --> 이러한 이벤트에 반응하는 코드를 작성하는 것이 Event Handling
 

2. Event Handler 

(1)  Inline Event Handler : HTML 태그 내부에 직접 이벤트를 등록하는 방식

<button onClick= "alert('클릭되었습니다');">클릭 </button>

 
장점 : 간단하고 빠르게 작성 가능
단점: HTML과 JS코드가 섞여 유지보수가 어려움
 
(2) addEventListener 메서드 방식: 자바스크립트에서 이벤트를 등록하는 표준적인 방식

EventTarget.addEventListener('eventType',function);

 
> 예시

const button = document.querySelector('button');

button.addEventListener('click',function () {
	alert('click!');
});

 
장점: 하나의 요소에 여러 이벤트 핸들러 등록 가능 / HTML과 JS 코드의 분리  ->유지보수에 유리 
 
 

대표적인 input 요소들

1. Checkbox

• 다중 선택 가능
• 예) 여러 관심사를 선택할 때 

<input type="checkbox" name="check_group" value="option1">
<input type="checkbox" name="check_group" value="option2">

 
2. Radio 

• 다중 선택 불가 (한그룹 내 하나만 선택 가능)
• name속성이 같아야 그룹으로 인식됨 

<input type="radio" name="radio_group" value="male">
<input type="radio" name="radio_group" value="female">

 
 
3. Select 

• 여러 옵션 중 하나를 선택할 수 있는 드롭다운 메뉴 

<select>
  <option value="mon">월요일</option>
  <option value="tue">화요일</option>
</select>

 
 

label, name 속성의 역할

 

• label
  • for 속성으로 특정 id를 가진 input과 연결
  • 라벨 클릭 시 해당 input 자동 선택됨
• name
  • 서버로 데이터를 전송할 때 key 값으로 사용
  • 같은 그룹으로 묶을 때 사용

 

input 이벤트 감지하기

1. checkbox 

const checkboxes = document.querySelectorAll("input[type='checkbox'][name='check_group']");

checkboxes.forEach(checkbox => {
  checkbox.addEventListener("change", (e) => { //이벤트로 체크 상태 변화 감지 
    if (e.target.checked) { //checked속성으로 체크 여부 확인
      console.log(`${e.target.value}가 선택됨`);//e.target는 이벤트가 발생한 해당요소
    } else {
      console.log(`${e.target.value}가 해제됨`);
    }
  });
});

 
2. Radio

const radios = document.querySelectorAll("input[type='radio'][name='radio_group']");
//같은 name을 가진 라디오 버튼 중 하나만 선택 가능 
radios.forEach(radio => {
  radio.addEventListener('change', (e) => {
    console.log(`${e.target.value}이 선택됨`);
  });
});

 
 
 3. Select 

const select = document.querySelector("select");

select.addEventListener('change', (e) => { //드롭타운의 선택값이 바뀔 때 마다 change 이벤트 발생
  console.log(`${e.target.value}가 선택됨`);
});

 

---