[2026.04.06]TIL - 6일차 JavaScript(Location, 입력 요소 처리, DOM 탐색과 생성)

오늘은 JavaScript를 이용해서 브라우저의 현재 주소를 다루는 방법, checkbox와 select 같은 입력 요소를 처리하는 방법,
그리고 DOM을 탐색하고 직접 생성하는 실습을 진행했다.

이전까지는 이미 있는 요소를 선택해서 값을 바꾸는 흐름이 많았다면, 이번에는 부모·자식 요소를 따라가거나 새로운 요소를 직접 만들어 화면에 추가하는 부분까지 이어졌다는 점이 인상적이었다.

 

 

1. Location 객체

Location 객체는 현재 페이지의 주소(URL)와 관련된 정보를 다루는 객체이다.

이번 실습에서는 현재 페이지의 host 정보를 확인하고, 페이지를 이동하거나 새로고침하는 방식도 함께 확인했다.

1) 주요 기능

• location.href : 현재 페이지의 URL 확인 및 다른 페이지로 이동
• location.replace() : 현재 페이지를 다른 주소로 대체
• location.reload() : 새로고침
• location.host : 호스트명과 포트번호 확인

 

2) 예제에서 확인한 내용

• 버튼 클릭 시 현재 host 출력하기
• URL 변경을 통해 페이지 이동하기
• 새로고침 기능 확인하기

---

 

2. Checkbox 처리 실습

체크박스를 이용해서 색상을 선택하고, 선택된 값에 따라 화면을 바꾸는 기능을 구현했다.

단순히 체크 여부만 확인하는 것이 아니라, 전체 선택 / 전체 해제, 개별 선택 수 확인, 그리고 선택된 값에 따라 div 배경색을 바꾸는 흐름까지 연결해서 실습했다.

1) 주요 기능

• 전체 선택 체크박스 처리
• 개별 체크 상태 확인
• 체크된 개수 세기
• 체크된 값에 따라 색상 적용
• 초기화 버튼으로 전체 해제 및 배경색 원상복구

2) 예제에서 확인한 내용

• checked 속성을 이용해 체크 여부 확인하기
• getElementsByName()으로 여러 checkbox 한 번에 가져오기
• document.getElementById()로 선택한 값에 맞는 div 찾아 배경색 바꾸기

• querySelectorAll()로 여러 div를 선택해 한 번에 초기화하기

 

같은 파일 안에서 이벤트 처리 방식도 함께 확인했다.
일반 함수에서의 this와 화살표 함수에서의 this 차이,그리고 event.target, event.currentTarget이 무엇을 가리키는지도 같이 확인할 수 있었다.

 

---

 

3. Select 처리 실습

이번에는 select 태그를 이용해서
단일 선택과 다중 선택을 처리하는 실습을 진행했다.

1) 주요 기능

• selectedIndex로 현재 선택된 option 위치 확인
• options로 전체 option 접근
• value로 선택된 값 가져오기
• selected 속성으로 다중 선택된 항목 확인하기

2) 예제에서 확인한 내용

• 단일 선택 메뉴에서 선택된 값 alert로 출력하기

• 다중 선택 메뉴에서 선택된 값들을 반복문으로 모아서 출력하기

checkbox와 select는 둘 다 사용자 입력 요소이지만,
선택 상태를 확인하는 방식이 조금 다르다는 점을 같이 확인할 수 있었다.

 

---

 

4. DOM 탐색

DOM 구조 안에서 부모 요소와 자식 요소를 찾아가는 실습을 했다.

이전에는 id나 name으로 바로 요소를 찾는 방식이 많았다면, 이번에는 특정 요소를 기준으로 위아래 관계를 따라가며 찾는 방법을 확인했다.

1) 부모 탐색

부모 요소를 찾을 때는 parentNode, parentElement를 사용할 수 있다.

이번 실습에서는 p 태그를 기준으로 그 태그를 감싸고 있는 div를 찾아 배경색을 바꾸는 방식으로 확인했다.

2) 자식 탐색

자식 요소를 찾을 때는 childNodes, children을 사용할 수 있다.

부모 div를 먼저 찾은 뒤 그 안에 있는 자식 요소들 중 원하는 태그를 골라 배경색이나 글자 크기를 바꿔보는 식으로 실습했다.

 

3) 실습에서 확인한 부분

• p 태그를 기준으로 부모 div를 찾는 방식
• 마지막 div 안에서 원하는 자식 요소를 찾는 방식
• 부모 기준 탐색과 자식 기준 탐색의 차이

- DOM은 단순히 id로만 찾는 게 아니라 부모·자식 관계를 따라가면서도 원하는 요소를 찾을 수 있다.
- 구조를 보고 찾아가는 느낌이라 화면 구성 이해에도 도움이 됐다.

 

---

 

5. DOM 요소 생성

이번에는 이미 있는 요소를 수정하는 것에서 더 나아가 새로운 요소를 직접 만들어서 화면에 추가하는 실습을 했다.

1) createEle

버튼을 누르면 div를 새로 만들고, 그 안에 텍스트를 넣고, 스타일 속성을 추가한 뒤
마지막에 body에 붙여서 화면에 보이게 했다.

이 과정에서
요소 생성 → 텍스트 추가 → 속성 추가 → 화면 출력 순서로 DOM이 만들어지는 흐름을 확인할 수 있었다.

2) createEle2

같은 결과를 조금 더 간단한 방식으로 만드는 방법을 확인했다.

innerText로 텍스트를 넣고, style로 바로 테두리를 적용한 뒤 appendChild()로 화면에 붙였다.

처음 방식보다 코드가 짧아서 좀 더 실용적으로 느껴졌다.

이번에는 이미 있는 요소를 수정하는 것에서 더 나아가 새로운 요소를 직접 만들어서 화면에 추가하는 실습을 했다.

버튼을 누르면 div를 새로 만들고, 그 안에 텍스트를 넣고, 스타일 속성까지 추가한 뒤 마지막에 body에 붙여서 화면에 보이도록 했다.

 

처음 예제에서는 createElement(), createTextNode(), createAttribute()를 하나씩 사용하면서 요소가 만들어지는 과정을 순서대로 확인했다.

그다음에는 좀 더 간단한 방식으로 innerText와 style을 바로 넣어서 비슷한 결과를 만드는 방법도 같이 봤다.

지금까지는 이미 있는 태그를 선택해서 수정하는 경우가 많았는데,
이번에는 아예 없는 요소를 새로 만들고 붙이는 흐름을 확인했다.

 

---

 

6. DOM 요소 교체와 이미지 변경

이번에는 라디오 버튼으로 이미지를 선택하고, n선택한 값에 따라 화면에 보이는 이미지를 바꾸는 실습을 했다.

1) 선택한 이미지 확인

먼저 어떤 라디오 버튼이 선택되어 있는지 확인하고, 선택된 값으로 이미지 경로를 만들었다.

즉, 입력값을 그대로 쓰는 게 아니라 선택값을 읽어서 화면에 반영하는 흐름으로 연결했다.

2) 이미지 생성과 교체

선택된 값을 확인한 뒤에는 새로운 img 요소를 만들고 src 속성을 넣었다.

그다음 replaceChild()를 이용해서 기존 이미지 대신 새 이미지를 넣어 화면에 보이는 그림이 바뀌도록 처리했다.

3) 이미지 삭제

이미지를 지우는 방법도 한 가지만 있는 게 아니라 여러 방식으로 처리할 수 있다는 점을 같이 확인했다.

 

가장 간단한 방법은 현재 이미지의 src 값을 빈 문자열로 바꾸는 방식이다.

 

이 방법은 코드가 짧고 바로 적용할 수 있어서 실습에서는 이 방식을 사용했다.

 

또 다른 방법으로는 새로운 img 요소를 다시 만든 뒤, 기존 이미지와 교체하는 방식도 생각해볼 수 있다.

 

즉, 같은 결과라도 속성만 비워서 처리할 수도 있고, 요소 자체를 다시 만들어 교체하는 방식으로도 처리할 수 있다는 점을 같이 볼 수 있었다.

이번 실습은 입력 요소 처리, DOM 생성, 기존 요소 교체가 한 번에 연결된 예제였다.
선택한 값을 읽어와서 새로운 요소를 만들고 이미 화면에 있는 요소와 바꾸는 흐름이 자연스럽게 이어졌다.

 

---

7. 정리 및 느낀점

오늘은 Location 객체부터 checkbox, select 같은 입력 요소 처리, 그리고 DOM 탐색, 생성, 교체까지 이어서 실습했다.

 

이번에는 단순히 값을 확인하거나 출력하는 것보다, 선택한 값에 따라 화면이 실제로 바뀌는 흐름이 더 많이 보였던 것 같다.

 

특히 이미지를 삭제하는 부분에서는 같은 기능이라도 한 가지 방법만 있는 게 아니라 여러 가지 방식으로 처리할 수 있다는 점이 인상적이었다.

 

그리고 DOM을 이용해서 태그를 직접 생성하고 수정할 수 있다는 점도 새로웠다.

 

이전까지는 계속 HTML 안에서만 태그를 만들고 배치한다고 생각했는데, 이제는 script 안에서도 태그를 만들고 바꿀 수 있다는 게 신기했다.

 

실습이 점점 이어지다 보니까 JavaScript가 단순히 값을 계산하는 언어가 아니라 화면 구성 자체를 바꿀 수 있는 도구라는 게 조금씩 더 와닿는 느낌이었다.