728x90
반응형
자바스크립트에서 DOM(Document Object Model) 객체를 처리하는 방법에 대해 5단계로 나누어 설명해드릴게요. 각각의 단계에서 자주 사용되는 메서드와 속성을 예시와 함께 설명하겠습니다.
1단계: DOM 요소 선택하기
DOM 요소를 선택하는 것은 첫 번째 단계입니다. 이를 통해 HTML 요소에 접근할 수 있습니다.
- document.getElementById(id): 특정 id를 가진 요소를 선택합니다.
const element = document.getElementById('myElement');
- document.querySelector(selector): CSS 선택자를 사용하여 첫 번째 일치하는 요소를 선택합니다.
const element = document.querySelector('.myClass');
const inputElement = document.querySelector('input[name="myInput"]');- document.querySelectorAll(selector): CSS 선택자를 사용하여 모든 일치하는 요소를 선택합니다. NodeList를 반환합니다.
const elements = document.querySelectorAll('.myClass');2단계: DOM 요소의 속성 및 값 다루기
선택한 요소의 속성과 값을 읽거나 수정할 수 있습니다.
- element.getAttribute(attributeName): 요소의 특정 속성 값을 가져옵니다.
- element.setAttribute(attributeName, value): 요소의 특정 속성 값을 설정합니다.
imageElement.setAttribute('src', 'newImage.jpg');
- lement.value: 입력 요소(input, textarea 등)의 값을 가져오거나 설정합니다.
const inputValue = inputElement.value; inputElement.value = 'New Value';- element.textContent: 요소의 텍스트 콘텐츠를 가져오거나 설정합니다.
const text = paragraphElement.textContent; paragraphElement.textContent = 'New Text';- element.innerHTML: 요소의 HTML 콘텐츠를 가져오거나 설정합니다.
const htmlContent = divElement.innerHTML; divElement.innerHTML = '<p>New HTML content</p>';3단계: DOM 요소 스타일 변경하기
선택한 요소의 스타일을 변경할 수 있습니다.
- element.style.property: 인라인 스타일을 설정합니다.
element.style.color = 'red'; element.style.backgroundColor = 'blue';- element.classList.add(className): 클래스 추가.
element.classList.add('newClass');- element.classList.remove(className): 클래스 제거.
element.classList.remove('oldClass');- element.classList.toggle(className): 클래스 토글.
element.classList.toggle('active');4단계: DOM 요소 이벤트 처리
이벤트 리스너를 사용하여 사용자 상호작용을 처리합니다.
- element.addEventListener(event, callback): 이벤트 리스너 추가.
buttonElement.addEventListener('click', function() { alert('Button clicked!'); });- element.removeEventListener(event, callback): 이벤트 리스너 제거.
const handleClick = function() {
alert('Button clicked!');
};
buttonElement.addEventListener('click', handleClick);
buttonElement.removeEventListener('click', handleClick);5단계: DOM 요소 추가 및 제거
새로운 요소를 생성하고 기존 요소를 추가하거나 제거할 수 있습니다.
- document.createElement(tagName): 새로운 요소 생성.
const newDiv = document.createElement('div');- element.appendChild(newChild): 자식 요소로 추가.
parentElement.appendChild(newDiv);- element.removeChild(childElement): 자식 요소 제거.
parentElement.removeChild(childElement);- element.insertBefore(newElement, referenceElement): 참조 요소 앞에 삽입.
parentElement.insertBefore(newDiv, referenceElement);종합 예제
다음은 위 단계를 종합하여 실제 예제입니다.
<!DOCTYPE html>
<html>
<head>
<title>DOM 조작 예제</title>
</head>
<body>
<div id="content">
<p class="message">Hello, world!</p>
<input type="text" id="inputField" value="Initial value">
<button id="changeTextButton">텍스트 변경</button>
</div>
<script>
// 1단계: 요소 선택
const contentDiv = document.getElementById('content');
const messageParagraph = document.querySelector('.message');
const inputField = document.querySelector('#inputField');
const changeTextButton = document.querySelector('#changeTextButton');
// 2단계: 속성 및 값 다루기
console.log(messageParagraph.textContent); // "Hello, world!"
messageParagraph.textContent = 'Hello, DOM!';
console.log(inputField.value); // "Initial value"
inputField.value = 'New value';
// 3단계: 스타일 변경
messageParagraph.style.color = 'blue';
messageParagraph.classList.add('highlight');
// 4단계: 이벤트 처리
changeTextButton.addEventListener('click', function() {
messageParagraph.textContent = inputField.value;
});
// 5단계: 요소 추가 및 제거
const newParagraph = document.createElement('p');
newParagraph.textContent = 'This is a new paragraph.';
contentDiv.appendChild(newParagraph);
// 3초 후에 새 요소 제거
setTimeout(() => {
contentDiv.removeChild(newParagraph);
}, 3000);
</script>
</body>
</html>이 예제는 HTML 요소를 선택하고, 속성을 읽고 설정하며, 스타일을 변경하고, 이벤트를 처리하고, 요소를 추가 및 제거하는 방법을 보여줍니다. 이를 통해 DOM을 다루는 기본적인 방법을 익힐 수 있습니다.
'Coding 공부 > JavaScript' 카테고리의 다른 글
| [javaScript_Web] 파일 시스템 경로 접근 불가 해결 방법 (0) | 2024.06.18 |
|---|---|
| [JavaScript] 구조 분해 할당 (0) | 2024.06.13 |
| [JavaScript_project] ToDoList (미니 프로젝트) (0) | 2024.04.02 |
| [JavaScript] DOM 선택 메소드, Input type('text', 'checkbox', 'radio'), select, setAtrribute, Audio 예제 (0) | 2024.04.01 |
| [JavaScript_Example] TrafficLight(HTML+CSS+JavaScript)#2 (0) | 2024.03.27 |
댓글