이 랩에서는 참가자들이 JavaScript 메서드를 사용하여 DOM (Document Object Model) 요소를 조작하는 강력한 기술을 탐구합니다. 이 포괄적인 튜토리얼은 학습자들이 HTML 문서 구조를 생성하고, ID 로 요소를 선택하며, 동적으로 새로운 요소를 생성하고 추가하고, 클래스 선택자를 사용하여 스타일을 수정하고, 대화형 요소 생성 과제를 구현하는 과정을 안내합니다.
참가자들은 document.getElementById(), .style 속성 수정, document.createElement()를 사용한 요소 생성, 그리고 동적 콘텐츠 관리와 같은 필수적인 JavaScript DOM 조작 기술에 대한 실질적인 경험을 얻게 될 것입니다. 단계별 지침을 따름으로써 학습자들은 핵심 JavaScript DOM 메서드를 사용하여 웹 페이지 콘텐츠와 상호 작용성을 변환하는 실용적인 기술을 개발할 것입니다.
이 단계에서는 JavaScript DOM 조작 랩의 기반이 될 기본적인 HTML 문서 구조를 만드는 방법을 배우게 됩니다. JavaScript 를 사용하여 상호 작용할 필수 요소가 포함된 간단한 HTML 파일을 설정합니다.
WebIDE 를 열고 ~/project 디렉토리로 이동합니다. 파일 탐색기에서 마우스 오른쪽 버튼을 클릭하고 "New File"을 선택하여 index.html이라는 새 파일을 만듭니다.
다음은 생성할 기본 HTML 구조입니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>DOM Manipulation Lab</title>
</head>
<body>
<div id="container">
<h1 id="main-title">Welcome to DOM Manipulation</h1>
<p class="description">
This is a practice page for JavaScript DOM methods.
</p>
<div id="dynamic-content"></div>
</div>
<script src="script.js"></script>
</body>
</html>주요 구성 요소를 살펴보겠습니다.
<!DOCTYPE html>은 이것이 HTML5 문서임을 선언합니다.id를 포함했습니다.class를 추가했습니다.id="dynamic-content"를 가진 빈 div를 만들었습니다.script.js를 연결했습니다.이 HTML 파일을 브라우저에서 열 때의 예시 출력:
Welcome to DOM Manipulation
This is a practice page for JavaScript DOM methods.이제 동일한 디렉토리에 해당 JavaScript 파일 script.js를 만듭니다.
// Initial JavaScript file for DOM manipulation
console.log("HTML document is ready for DOM manipulation");이 단계에서는 JavaScript 를 사용하여 HTML 요소를 ID 로 선택하고 스타일을 수정하는 방법을 배우게 됩니다. 이전 단계에서 생성한 WebIDE 의 script.js 파일을 엽니다.
document.getElementById() 메서드를 사용하여 요소를 선택하고 .style 속성을 사용하여 모양을 수정합니다. 다음 코드로 script.js를 업데이트하십시오.
// Select elements by ID
const mainTitle = document.getElementById("main-title");
const container = document.getElementById("container");
// Modify styles directly
mainTitle.style.color = "blue";
mainTitle.style.fontSize = "24px";
mainTitle.style.textAlign = "center";
// Modify container styles
container.style.backgroundColor = "#f0f0f0";
container.style.padding = "20px";
container.style.borderRadius = "10px";이 코드가 수행하는 작업을 살펴보겠습니다.
document.getElementById()는 특정 ID 를 가진 요소를 찾습니다..style 속성은 직접적인 스타일 수정을 허용합니다.브라우저에서의 예시 출력:
변경 사항을 확인하려면 브라우저에서 index.html 파일을 열거나 WebIDE 의 브라우저 미리보기를 사용하십시오.
이 단계에서는 JavaScript 를 사용하여 동적으로 새 HTML 요소를 생성하고 기존 문서에 추가하는 방법을 배우게 됩니다. WebIDE 에서 script.js 파일을 열고 다음 코드를 추가합니다.
// Select the dynamic content container
const dynamicContent = document.getElementById("dynamic-content");
// Create new elements
const newParagraph = document.createElement("p");
const newButton = document.createElement("button");
// Set content and attributes
newParagraph.textContent = "This paragraph was created dynamically!";
newParagraph.style.color = "green";
newButton.textContent = "Click Me";
newButton.style.backgroundColor = "lightblue";
newButton.style.padding = "10px";
// Append elements to the dynamic content container
dynamicContent.appendChild(newParagraph);
dynamicContent.appendChild(newButton);
// Add an event listener to the button
newButton.addEventListener("click", () => {
alert("Dynamic button was clicked!");
});주요 메서드를 살펴보겠습니다.
document.createElement()는 새로운 HTML 요소를 생성합니다..textContent는 요소의 텍스트를 설정합니다..appendChild()는 새로운 요소를 DOM 에 추가합니다..addEventListener()는 요소에 상호 작용성을 추가합니다.브라우저에서의 예시 출력:
index.html 파일을 열면 새로 생성된 요소가 페이지에 추가된 것을 볼 수 있습니다.
이 단계에서는 JavaScript 에서 클래스 선택자를 사용하여 요소를 선택하고 수정하는 방법을 배우게 됩니다. index.html을 업데이트하여 동일한 클래스를 가진 여러 요소를 포함합니다.
<div id="container">
<h1 id="main-title">Welcome to DOM Manipulation</h1>
<p class="description">First description paragraph</p>
<p class="description">Second description paragraph</p>
<div id="dynamic-content"></div>
</div>이제 script.js를 수정하여 클래스 선택자를 사용합니다.
// Select all elements with the 'description' class
const descriptionElements = document.getElementsByClassName("description");
// Loop through the elements and modify their styles
for (let element of descriptionElements) {
element.style.fontStyle = "italic";
element.style.color = "darkgreen";
element.style.backgroundColor = "#f0f0f0";
element.style.padding = "10px";
element.style.margin = "5px 0";
}
// Alternative method using querySelector
const firstDescription = document.querySelector(".description");
firstDescription.textContent = "Modified first description using querySelector";시연된 주요 메서드:
document.getElementsByClassName()은 요소의 컬렉션을 반환합니다.document.querySelector()는 일치하는 첫 번째 요소를 선택합니다.for...of 루프를 사용하여 요소를 반복합니다.브라우저에서의 예시 출력:
index.html 파일을 열면 스타일이 지정되고 수정된 설명 단락을 볼 수 있습니다.
이 마지막 단계에서는 사용자가 동적으로 요소를 생성할 수 있는 대화형 챌린지를 만들 것입니다. index.html을 업데이트하여 입력 필드와 버튼을 포함합니다.
<div id="container">
<h2>Dynamic Element Generator</h2>
<input type="text" id="elementInput" placeholder="Enter element text" />
<select id="elementType">
<option value="p">Paragraph</option>
<option value="h3">Heading</option>
<option value="div">Div</option>
</select>
<button id="generateButton">Generate Element</button>
<div id="output-container"></div>
</div>이제 대화형 요소 생성 로직으로 script.js를 업데이트합니다.
// Select key elements
const elementInput = document.getElementById("elementInput");
const elementTypeSelect = document.getElementById("elementType");
const generateButton = document.getElementById("generateButton");
const outputContainer = document.getElementById("output-container");
// Element generation function
function generateElement() {
// Get input values
const text = elementInput.value;
const type = elementTypeSelect.value;
// Check if input is not empty
if (text.trim() === "") {
alert("Please enter some text");
return;
}
// Create new element
const newElement = document.createElement(type);
newElement.textContent = text;
// Style the new element
newElement.style.margin = "10px 0";
newElement.style.padding = "10px";
newElement.style.backgroundColor = getRandomColor();
// Add a remove button to each generated element
const removeButton = document.createElement("button");
removeButton.textContent = "Remove";
removeButton.style.marginLeft = "10px";
removeButton.addEventListener("click", () => {
outputContainer.removeChild(newElement);
});
// Append element and remove button
newElement.appendChild(removeButton);
outputContainer.appendChild(newElement);
// Clear input
elementInput.value = "";
}
// Helper function to generate random color
function getRandomColor() {
const letters = "0123456789ABCDEF";
let color = "#";
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
// Add event listener to generate button
generateButton.addEventListener("click", generateElement);이 대화형 챌린지의 주요 기능:
예시 상호 작용:
이 Lab 에서 참가자는 구조화된 실습 방식을 통해 기본적인 JavaScript DOM 조작 기술을 배웁니다. Lab 은 JavaScript 상호 작용을 용이하게 하는 고유한 ID 와 클래스를 포함하여 전략적인 요소 배치를 통해 기본 HTML 문서 구조를 설정하는 것으로 시작합니다. 참가자는 초기 HTML 파일과 해당 JavaScript 파일을 생성하여 동적 웹 페이지 조작을 위한 기반을 마련합니다.
Lab 은 ID 로 요소 선택, 동적으로 스타일 수정, 새 요소 생성 및 추가, 대화형 요소 생성 구현을 포함하여 필수 DOM 메서드를 통해 학습자를 점진적으로 안내합니다. 이러한 실질적인 과제를 통해 참가자는 JavaScript 를 사용하여 웹 페이지 요소에 직접 액세스하고 변환하는 능력을 습득하여 반응형 및 대화형 웹 애플리케이션을 만드는 데 필요한 중요한 기술을 개발합니다.
