자바스크립트로 HTML 조작하기: document 객체와 DOM 접근 방법 기초

1. 자바스크립트와 HTML의 관계 이해하기

웹 개발을 처음 시작하면 HTML, CSS, JavaScript가 어떻게 연결되어 작동하는지 궁금할 수 있다. 이 세 가지는 서로 긴밀히 연결되어 있으며, 특히 JavaScript는 HTML과 상호작용하는 핵심적인 역할을 한다.

HTML은 웹 페이지의 구조를 정의하고, CSS는 스타일을 담당하며, JavaScript는 이러한 요소들과 상호작용을 가능하게 만든다. JavaScript는 브라우저가 제공하는 다양한 객체 중 하나인 document 객체를 활용하여 HTML 요소를 읽고 변경할 수 있다.

 

2. 브라우저에서 document 객체 확인하기

브라우저의 콘솔 창에 document를 입력하면, 현재 웹 페이지의 HTML 전체를 JavaScript의 객체 형태로 확인할 수 있다. 이 객체는 HTML을 구조화된 정보로 제공하며, 이를 통해 JavaScript는 HTML 문서를 읽거나 조작할 수 있다.

 

console.dir(document);

 

이 명령어를 실행하면, document 객체의 내부 구조를 상세히 확인할 수 있다. 예를 들어 document.title을 조회하면 현재 페이지의 <title> 내용을 볼 수 있다.

 

3. 자바스크립트로 HTML 내용을 변경해보기

자바스크립트를 사용하면 HTML의 내용을 동적으로 변경할 수 있다. 아래 예시는 페이지의 타이틀을 변경하는 코드다.

 

document.title = "Hi";

 

이렇게 하면 브라우저 탭에 표시되는 타이틀이 "Hi"로 바뀐다. 물론 새로고침을 하면 원래 HTML 파일에 정의된 값으로 돌아오지만, JavaScript가 HTML을 실시간으로 변경할 수 있다는 중요한 사실을 보여준다.

 

4. HTML 요소 선택하기: getElementById

HTML에서 특정 요소를 JavaScript로 가져오려면, document.getElementById() 함수를 사용할 수 있다.

 

<h1 id="title">Grab me!</h1>

 

const title = document.getElementById("title");
console.log(title);

 

이 코드는 id="title"을 가진 <h1> 요소를 가져온다. console.dir(title)을 사용하면 해당 요소의 속성을 더 자세히 확인할 수 있고, title.innerText = "Got You!"를 통해 텍스트를 변경할 수도 있다.

 

5. 여러 요소를 선택하기: Class, Tag, CSS 선택자

때때로 여러 요소를 한 번에 선택해야 할 때가 있습니다. 이럴 때는 다양한 선택자 함수를 사용할 수 있다.

 

const itemsByClass = document.getElementsByClassName("hello");
const itemsByTag = document.getElementsByTagName("h1");
const singleItem = document.querySelector(".hello h1");
const allItems = document.querySelectorAll(".hello h1");

 

• getElementsByClassName: 특정 클래스명을 가진 모든 요소 반환
• getElementsByTagName: 특정 태그명을 가진 요소들 반환
• querySelector: CSS 선택자 형식으로 첫 번째 일치 요소 반환
• querySelectorAll: 조건에 맞는 모든 요소 반환

querySelector는 특히 CSS 선택자 문법을 그대로 사용할 수 있어 매우 직관적이다.

 

6. 마무리 및 다음 학습 예고

이번 글에서는 자바스크립트가 HTML과 어떻게 연결되는지, 그리고 document 객체를 통해 HTML 요소를 선택하고 조작하는 기본 방법을 배웠다. 다음 글에서는 HTML 요소에 이벤트를 연결하거나, 동적으로 생성하는 방법에 대해 배워보겠습니다.

웹 개발의 핵심은 문서 구조에 대한 이해와 자바스크립트를 통한 조작 능력이다. 자바스크립트는 단순히 코드를 실행하는 언어가 아니라, 웹 페이지의 내용을 실시간으로 변경하고 사용자와 상호작용할 수 있게 만드는 도구라는 점을 꼭 기억했으면 한다.

 

이 이미지는 chatGPT에게 프롬프트를 받아 imagine으로 이미지를 생성하였습니다.