꺾이지 않는 마음

Q1. DOM이란? Document Object Model의 줄임말로, 문서 내의 HTML 요소들을 객체화하여 트리 구조의 형태로 표현한 모델을 말한다. 이는 문자열로 표현된 HTML 파일을 자바스크립트가 이해할 수 있도록 한 것이며, 이를 통해 자바스크립트로 HTML 요소에 접근하여 다양한 조작을 가할 수 있다. Q2. DOM을 사용하는 이유? HTML, CSS를 조작하여 사용자와 상호작용 하기 위함이다. HTML과 CSS만으로 작성된 웹 페이지는 정적이다. HTML과 CSS는 짜여진 코드대로 웹 페이지에 내용을 표시할 뿐, 사용자와의 다양한 상호작용 기능을 구현하기 위해선 자바스크립트를 활용해야 한다. 자바스크립트는 HTML과 CSS에 접근하여 조작함으로써 보다 동적인 기능을 웹에 구현한다. 하지만 ..

여태 DOM을 활용하여 HTML 요소를 수정할 때마다 줄곧 innerHTML만 써왔는데, 최근에 innerAdjacentHTML라는 메서드도 알게 되어 정리해보았다. 1️⃣ innerHTML 우선 innerHTML은 대상 노드 안에 있는 모든 후손 요소까지 전부 렌더링 한다는 특징이 있다. 이는 변경점이 없는 대상까지도 전부 렌더링하여 불필요한 동작을 야기한다는 의미를 갖는다. 아래 예시를 보자, 나는 첫번째 자식 요소 노드 나는 두번째 자식 요소 노드 나는 세번째 자식 요소 노드 const div = document.querySelector('div'); console.log(div.innerHTML); /* 결과 나는 첫번째 자식 요소 노드 나는 두번째 자식 요소 노드 나는 세번째 자식 요소 노드 *..