서론

오늘의 학습 목표는 웹 개발의 중요한 기초 중 하나인 DOM(Document Object Model)에 대해 깊이 이해하는 것이었다. DOM은 웹 페이지의 구조를 표현하는 방식으로, JavaScript를 사용하여 웹 페이지의 내용과 구조를 동적으로 변경할 수 있게 해준다. 이러한 이해를 바탕으로, 우리는 더욱 동적이고 반응이 빠른 웹 페이지를 만들 수 있다. 본 글에서는 두 가지 주요 주제에 대해 다룬다: 첫 번째는 'Node vs Element'로, DOM의 기본 개념을 탐색하며, 두 번째는 'DOM API'를 통한 웹 페이지의 동적 조작 방법을 알아본다.

본론

환급 챌린지 조건에 의해 최소 두 개의 강의를 들어야 한다. 다음 두 강의를 나누어 간략히 내용과 후기를 적으려 한다.

첫 번째 강의: Node vs Element
두 번째 강의: 검색과 탐색

첫 번째 강의: Node vs Element

이 강의에서는 DOM을 구성하는 기본 단위인 Node와 Element에 대해 배웠다. 특히, 다음과 같은 코드 예시를 통해 이 두 개념의 차이를 실제로 확인할 수 있었다:

텍스트1

</div>

위 코드에서 console.log(parents.childNodes)를 실행하면, 주석, 텍스트 노드, 그리고 자식 엘리먼트를 포함하여 총 7개의 노드가 담긴 NodeList가 출력된다. 반면, console.log(parents.children)을 실행하면, 오직 자식 엘리먼트만을 포함하는 2개의 엘리먼트가 담긴 HTMLCollection이 나타난다. 이러한 결과를 통해 모든 엘리먼트는 노드이지만, 모든 노드가 엘리먼트는 아니라는 점을 이해할 수 있었다. 즉, 엘리먼트는 노드의 한 종류로, HTML의 구조적 요소를 의미한다.

두 번째 강의: 검색과 탐색

검색과 탐색 강의에서는 DOM을 통해 웹 페이지의 요소를 검색하고 조작하는 방법을 배웠다. document.querySelector, document.getElementById, document.createElement와 같은 메서드들을 통해 웹 페이지의 요소를 찾아내고, 수정하며, 새로운 요소를 추가하는 방법을 실습했다. 이러한 메서드들은 웹 페이지를 동적으로 조작하여 사용자 경험을 향상시키는 데 필수적인 도구들이다.

예를 들어, 다음과 같은 코드를 통해 새로운 엘리먼트를 생성하고, 페이지에 추가하는 방법을 배웠다:

const newElement = document.createElement('div');

newElement.textContent = '새로운 내용';

document.body.appendChild(newElement);

이 코드는 새로운 div 엘리먼트를 만들고, 그 내용으로 '새로운 내용'을 추가한 후, 문서의 body에 이를 추가한다. 이처럼 DOM API를 사용하면, JavaScript를 통해 웹 페이지의 내용을 자유롭게 변경할 수 있다.

결론

DOM에 대한 이해는 웹 개발에서 매우 중요하다. 오늘 배운 'Node vs Element'와 'DOM API'는 웹 페이지를 구성하고 조작하는 데 있어 기본적이면서도 필수적인 지식이다. 이 두 강의를 통해 배운 내용을 바탕으로, 앞으로 더욱 효과적으로 웹 페이지를 설계하고 개발할 수 있을 것이다. 실습을 통해 배운 내용을 직접 적용해보며, 웹 개발에 필요한 실력을 더욱 키워나갈 계획이다.

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다. https://bit.ly/48sS29N