JavaScript DOM 조작

소개

JavaScript DOM 조작 실습에 오신 것을 환영합니다. Document Object Model (DOM) 은 웹 문서의 프로그래밍 인터페이스입니다. DOM 은 페이지를 표현하여 프로그램이 문서의 구조, 스타일 및 콘텐츠를 변경할 수 있도록 합니다. 웹 페이지가 로드되면 브라우저는 페이지의 DOM 을 생성하며, 이는 객체의 트리와 같은 구조입니다.

이 실습에서는 JavaScript 를 사용하여 DOM 과 상호 작용하는 방법을 배우게 됩니다. 요소를 선택하고, 콘텐츠를 변경하고, 속성을 수정하고, 동적으로 새 요소를 생성하여 페이지에 추가하는 연습을 하게 됩니다. 이러한 기술은 대화형 및 동적 웹 애플리케이션을 만드는 데 필수적인 기술입니다.

이 실습을 완료하면 다음을 수행할 수 있습니다.

• ID 를 사용하여 DOM 에서 요소를 선택합니다.
• 요소의 콘텐츠를 변경합니다.
• 요소의 속성을 설정합니다.
• 새 요소를 생성합니다.
• 새 요소를 문서에 추가합니다.

시작해 봅시다!

getElementById 로 ID 를 사용하여 요소 선택

이 단계에서는 고유한 ID 를 사용하여 HTML 요소를 선택하는 방법을 배우게 됩니다. document.getElementById() 메서드는 DOM 에서 특정 요소에 접근하는 가장 일반적인 방법 중 하나입니다.

먼저, WebIDE 왼쪽의 파일 탐색기에서 script.js 파일을 찾으십시오. 파일을 클릭하여 편집기에서 엽니다. 설정 스크립트에서 이 파일을 이미 생성했습니다.

이제 script.js에 다음 코드를 추가합니다. 이 코드는 ID 가 main-content인 div 요소를 선택하여 contentDiv라는 변수에 저장합니다. 그런 다음 이 요소를 콘솔에 기록하여 올바르게 선택했는지 확인합니다.

const contentDiv = document.getElementById("main-content");

console.log(contentDiv);

코드를 추가한 후 script.js 파일을 저장합니다. 결과를 보려면 인터페이스 상단의 "Web 8080" 탭을 클릭하십시오. 페이지 자체에는 시각적인 변경 사항이 보이지 않지만 console.log의 출력을 볼 수 있습니다. 이를 위해 브라우저의 개발자 도구를 엽니다 (일반적으로 페이지에서 마우스 오른쪽 버튼을 클릭하고 "Inspect"를 선택한 다음 "Console" 탭으로 이동하여 열 수 있습니다). 콘솔에 HTML div 요소가 기록된 것을 볼 수 있습니다.

innerHTML 로 텍스트 내용 변경

이 단계에서는 선택한 요소의 콘텐츠를 수정하게 됩니다. innerHTML 속성을 사용하면 요소 내의 HTML 콘텐츠를 가져오거나 설정할 수 있습니다. 이는 웹 페이지에 표시되는 내용을 동적으로 변경하는 강력한 방법입니다.

script.js 파일 편집을 계속합니다. 이전 단계에서 작성한 코드 아래에 다음 줄을 추가합니다. 이 줄은 우리가 선택한 div 안의 텍스트를 변경합니다.

const contentDiv = document.getElementById("main-content");

// This line is new
contentDiv.innerHTML = "The content has been changed by JavaScript!";

console.log(contentDiv);

script.js 파일을 저장했는지 확인하십시오. 이제 "Web 8080" 탭으로 다시 전환하고 페이지를 새로 고칩니다. 상자 안의 텍스트가 "This is the original content."에서 "The content has been changed by JavaScript!"로 변경된 것을 볼 수 있습니다.

setAttribute 메서드로 속성 설정

이 단계에서는 링크의 href나 이미지의 src와 같이 요소의 속성을 변경하는 방법을 배우게 됩니다. 이를 위해 setAttribute() 메서드를 사용합니다. 이 메서드는 두 개의 인수를 받습니다: 설정할 속성의 이름과 해당 속성에 설정할 값입니다.

index.html 파일에는 labex-link라는 ID 를 가진 링크 (<a> 태그) 가 포함되어 있습니다. 이 링크의 href 속성을 LabEx 웹사이트를 가리키도록 변경해 보겠습니다.

script.js 파일에 다음 코드를 추가하십시오.

// Select the link element
const link = document.getElementById("labex-link");

// Set its href attribute
link.setAttribute("href", "https://labex.io");

이제 전체 script.js 파일은 다음과 같이 보일 것입니다.

const contentDiv = document.getElementById("main-content");
contentDiv.innerHTML = "The content has been changed by JavaScript!";
console.log(contentDiv);

// Select the link element
const link = document.getElementById("labex-link");

// Set its href attribute
link.setAttribute("href", "https://labex.io");

파일을 저장하고 "Web 8080" 탭으로 전환한 후 새로 고침하십시오. 이제 "LabEx" 링크 위로 마우스를 가져가면 브라우저의 상태 표시줄에 https://labex.io를 가리키는 것을 볼 수 있습니다. 클릭하면 해당 페이지로 이동을 시도합니다.

createElement 로 새 요소 생성

이 단계에서는 JavaScript 를 사용하여 처음부터 완전히 새로운 HTML 요소를 생성하는 방법을 배우게 됩니다. 이는 동적인 인터페이스를 구축하는 데 핵심적인 부분으로, 목록에 새 항목을 추가하거나 새 메시지를 표시하는 등의 작업이 필요할 수 있습니다. document.createElement() 메서드는 태그 이름으로 지정된 요소를 생성하는 데 사용됩니다.

새로운 단락 (p) 요소를 만들어 보겠습니다. script.js 파일 끝에 다음 코드를 추가하십시오.

// Create a new paragraph element
const newParagraph = document.createElement("p");

// Set its content
newParagraph.innerHTML = "This is a new paragraph created with JavaScript.";

// Add a class for styling
newParagraph.className = "new-element";

이 시점에서 요소는 브라우저 메모리에 생성되었지만 아직 페이지에 표시되지는 않습니다. 요소를 생성하고, innerHTML을 사용하여 콘텐츠를 설정했으며, CSS 클래스를 할당하여 style.css 파일에 따라 스타일이 지정되도록 했습니다. 다음 단계에서는 이 새 요소를 문서에 추가하는 방법을 배우게 됩니다.

appendChild 로 자식 요소 추가

이 마지막 단계에서는 이전 단계에서 생성한 요소를 웹 페이지에 추가하게 됩니다. appendChild() 메서드는 노드 (요소) 를 부모 요소의 마지막 자식으로 추가합니다.

먼저 새 단락을 배치할 부모 요소를 선택해야 합니다. index.html에는 이를 위해 container라는 ID 를 가진 div가 있습니다. 그런 다음 appendChild()를 사용하여 newParagraph를 이 요소에 추가합니다.

script.js 끝에 다음 코드를 추가하십시오.

// Get the container element
const container = document.getElementById("container");

// Append the new paragraph to the container
container.appendChild(newParagraph);

이제 전체 script.js 파일에는 이전 단계의 모든 코드가 포함되어야 합니다. 파일을 저장하고 "Web 8080" 탭을 새로 고침하십시오. 이제 페이지의 링크 아래에 새롭고 스타일이 적용된 단락이 표시되어야 합니다.

축하합니다! DOM 을 성공적으로 조작하여 콘텐츠를 변경하고, 속성을 설정하고, 새 요소를 동적으로 생성 및 표시했습니다.

요약

이 실습에서는 JavaScript 를 사용하여 Document Object Model(DOM) 을 조작하는 기본적인 기술을 배웠습니다. 이러한 기술은 동적이고 상호작용적인 웹 페이지를 만드는 데 필수적입니다.

다음과 같은 내용을 성공적으로 연습했습니다.

• document.getElementById()를 사용하여 DOM 에서 요소 선택하기.
• innerHTML 속성을 사용하여 요소의 콘텐츠 변경하기.
• setAttribute() 메서드를 사용하여 요소의 속성 수정하기.
• document.createElement()를 사용하여 메모리에 새 HTML 요소 생성하기.
• appendChild()를 사용하여 새로 생성된 요소를 웹 페이지에 추가하기.

이러한 메서드를 결합하면 사용자 동작에 반응하고 데이터를 동적으로 표시하는 복잡한 사용자 인터페이스를 구축할 수 있습니다. 실습을 성공적으로 완료하신 것을 축하드립니다!