반응형
DOM(Document Object Model)은 웹 페이지의 내용을 트리 형태로 표현하는 문서 객체 모델로, HTML, XML 또는 XHTML 문서의 구조와 콘텐츠에 접근하고 조작하는 기능을 제공합니다. 웹 브라우저는 HTML 문서를 로드하면서 DOM을 생성하고, 이를 통해 웹 페이지의 내용과 구조에 동적으로 접근하고 변경할 수 있습니다. DOM을 조작하여 웹 페이지를 동적으로 제어하는 방법에 대해 알아보겠습니다.
DOM 요소 선택하기
DOM 요소를 선택하는 것은 해당 요소에 접근하여 조작하는 기본 단계입니다. 다양한 선택자를 사용하여 요소를 선택할 수 있습니다.
ID 선택자
<div id="myDiv">This is a div element.</div>
let myDiv = document.getElementById('myDiv');
클래스 선택자
<p class="highlight">This is a paragraph.</p>
let highlightedParas = document.getElementsByClassName('highlight');
태그 선택자
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
let listItems = document.getElementsByTagName('li');
쿼리 선택자
<div class="container">
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</div>
let paragraphs = document.querySelectorAll('.container p');
DOM 요소 변경하기
선택한 DOM 요소의 내용이나 속성을 변경하여 웹 페이지를 동적으로 조작할 수 있습니다.
<div id="myDiv">This is a div element.</div>
let myDiv = document.getElementById('myDiv');
myDiv.textContent = 'Updated content'; // 내용 변경
myDiv.style.color = 'blue'; // 스타일 변경
myDiv.setAttribute('class', 'highlight'); // 속성 변경
DOM 이벤트 처리하기
DOM 요소에 이벤트 리스너를 추가하여 사용자의 동작에 응답하거나 웹 페이지의 상호작용을 구현할 수 있습니다.
<button id="myBtn">Click me</button>
let myBtn = document.getElementById('myBtn');
function handleClick() {
console.log('Button clicked!');
}
myBtn.addEventListener('click', handleClick);
DOM 요소 생성 및 추가하기
자바스크립트를 사용하여 새로운 DOM 요소를 생성하고, 기존의 요소에 추가할 수 있습니다.
let newDiv = document.createElement('div');
newDiv.textContent = 'New div element';
let container = document.getElementById('container');
container.appendChild(newDiv); // 새로운 div 요소를 container에 추가
DOM(Document Object Model)을 조작하여 웹 페이지의 내용과 구조를 동적으로 제어할 수 있습니다. DOM 요소를 선택하고, 변경하고, 이벤트를 처리하는 방법을 활용하여 웹 페이지에 인터랙티브한 기능을 추가하고 사용자와 상호작용하는 웹 애플리케이션을 개발할 수 있습니다. 웹 프론트엔드 개발에서 DOM 조작은 필수적인 기술이며, 이를 잘 활용하여 사용자에게 좋은 사용자 경험을 제공하는 웹 페이지를 구현해보세요!
반응형
'Language > JavaScript' 카테고리의 다른 글
[JS] AJAX와 비동기적 프로그래밍 (0) | 2023.07.20 |
---|---|
[JS] 이벤트 핸들링 (클릭, 마우스 오버 등) (0) | 2023.07.20 |
[JS] 배열과 객체 (0) | 2023.07.20 |
[JS] 함수 정의와 활용 (0) | 2023.07.20 |
[JS] 조건문과 반복문 (if/else, switch, for, while 등) (0) | 2023.07.20 |