JAN's History
DOM 접근 키워드, document부터 시작해보자! 🖥️ 본문
안녕하세요! 이번에는 JavaScript에서 DOM(Document Object Model)에 접근하는 방법에 document 객체에 대해 알아보겠습니다 :) DOM은 웹 페이지의 구조를 자바스크립트로 조작할 수 있도록 만드는 아주 중요한 개념인데요, 정적인 HTML에 동적인 JavaScript를 더해 더 풍부한 웹 페이지를 만들 수 있도록 하는 과정이라고 생각하면 더 이해가 쉬우실거에요 ㅎㅎ 예제를 통해 어떻게 직접 동작하는지 살펴보겠습니다!🙌🏼
🎯 1. DOM이란?
DOM은 웹 페이지의 구조를 자바스크립트가 이해할 수 있도록 문서의 각 요소를 객체로 표현한 구조입니다. HTML 문서의 모든 태그, 속성, 텍스트 등을 객체로 변환하여 JavaScript로 쉽게 접근하고 변경할 수 있게 해주는 역할을 합니다.
DOM에 접근할 수 있다는 건, 웹 페이지를 동적으로 수정하거나 데이터에 따라 UI를 변경할 수 있다는 것을 의미해요!
🎯 2. document 객체란?
document 객체는 웹 브라우저에서 현재 로드된 HTML 문서 자체를 의미합니다. 이 객체를 사용하면 HTML 요소에 접근하고, 내용을 읽거나 변경할 수 있습니다.
쉽게 말해, document는 페이지에 있는 모든 HTML 요소들을 JavaScript가 제어할 수 있도록 제공해주는 시작점입니다.
⭐ 중요:
- document는 웹 페이지 전체를 가리키는 전역 객체입니다.
- document.getElementById()와 같은 메서드를 사용하여 특정 요소에 접근합니다.
🎯 3. DOM 접근 방법: getElementById
DOM에 있는 특정 요소에 접근하기 위해서는 document.getElementById() 메서드를 자주 사용합니다. 이 메서드는 HTML에서 id 속성을 가진 요소를 가져옵니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>DOM 접근</title>
</head>
<body>
<label for="music">좋아하는 음악은?</label>
<input id="music" value="장르를 입력하세요.">
</body>
</html>위 HTML에서 input 태그에 id 요소를 접근해 값을 읽고 수정해보겠습니다.
🎯 4. DOM 조작 예제
자, 이제 자바스크립트를 통해 DOM 요소를 선택하고, 그 값을 읽고 수정해보는 코드를 작성해볼까요?
const music = {
createElement(id) {
this.element = document.getElementById(id); // document로 id가 'music'인 요소를 가져옴
},
get getAttributeValue() {
return this.element.value; // 선택한 요소의 value 속성 값을 반환
},
set setAttributeValue(value) {
this.element.value = value; // 선택한 요소의 value 속성 값을 변경
}
};
// music 객체가 id가 'music'인 요소를 찾아 할당
music.createElement("music");
// 현재 'music' 요소의 값을 콘솔에 출력
console.log(music.getAttributeValue);
// 'music' 요소의 값을 '클래식'으로 변경
music.setAttributeValue = "클래식";위 코드는 document.getElementById()로 id="music"인 <input> 요소를 가져와 자바스크립트로 그 값을 읽고 수정하는 예제입니다. 여기에서 this(=music).element는 <input id="music" value="장르를 입력하세요.">가 되겠죠?
- document.getElementById()로 id="music"인 요소에 접근.
- music.getAttributeValue로 해당 요소의 value 값을 읽음.
- music.setAttributeValue로 value를 '클래식'으로 변경.
🎯 5. DOM과 this 키워드
여기서 한 가지 중요한 점이 있는데요, 바로 this 키워드입니다. 위 코드에서 this.element는 music.createElement() 메서드가 호출될 때, 해당 메서드 내에서의 this가 music 객체를 가리킵니다. 이 music.element가 결국 <input id="music"> 요소가 되는 것이죠.
⭐헷갈릴 만한 부분:
- this는 자바스크립트에서 해당 코드가 실행되는 문맥에 따라 다르게 동작합니다. 메서드 내부에서의 this는 그 메서드가 속한 객체를 가리키는 반면, 함수나 전역에서의 this는 전역 객체 (window)를 가리킬 수 있어서 this 키워드에 무엇을 참조하는지 문맥에 따라 이해하는 것이 중요하답니다 😁
📌 결론
DOM은 HTML 문서를 JavaScript로 다룰 수 있게 하는 중요한 개념입니다. 이를 통해 웹 페이지의 동적인 변화를 쉽게 구현할 수 있습니다. document 객체는 DOM을 다루는 시작점이며, getElementById()를 통해 특정 요소에 접근해 값을 읽거나 수정할 수 있습니다.
🛠 실무적인 팁
DOM을 조작할 때는 성능을 고려하는 것이 중요합니다. 특히 많은 요소에 자주 접근할 때는 다음을 주의하세요:
- DOM 접근은 가능한 최소화해야 합니다. DOM 접근은 상대적으로 비용이 많이 드는 작업이므로, 동일한 요소를 반복적으로 접근하지 말고 변수에 저장해두는 것이 좋습니다.
- 이벤트 위임을 통해 여러 요소에 이벤트를 걸지 말고, 상위 요소에 한 번만 이벤트를 걸어서 관리하는 것이 가독성, 성능에도 좋아요.
이번 글에서는 DOM에 대한 기본적인 접근 방법을 설명했지만, 더 깊이 공부하고 다양한 메서드를 익혀보는 것이 중요합니다! DOM 조작은 프런트엔드 개발에서 매우 중요한 스킬이니, 여러 예제를 통해 익숙해지는 것이 좋습니다. 다음 글에서도 DOM에 대해서 더 깊이있게 알아보도록 할게요 :-) 😊
'Javascript' 카테고리의 다른 글
| DOM 접근 시 알아야 할 HTMLCollection과 Host Environment 🖥️ (0) | 2024.11.16 |
|---|---|
| jQuery의 .data(), .attr(), .prop() 각각 다른 사용 용도 알아보기 ✨ (1) | 2024.11.11 |
| 📚 콜백 지옥, 프로미스, 그리고 async/await까지 (1) | 2024.11.07 |
| 📚 자바스크립트의 비동기 프로그래밍 (0) | 2024.11.05 |
| 📚 클로저(Closure)란? (0) | 2024.11.02 |
