hanker

JavaScript - JavaScript에서 DOM 조작 방법 본문

카테고리 없음

JavaScript - JavaScript에서 DOM 조작 방법

hanker 2024. 12. 19. 00:00
반응형

1. JavaScript가 뭘까?
2. JavaScript를 시작하기
3. JavaScript의 기본 문법

4. JavaScript 제어문

5. JavaScript 함수

6. JavaScript에서 객체와 배열은 무엇일까?

7. JavaScript에서 DOM 조작 방법

 

 

JavaScript는 웹 페이지의 요소를 조작하여 동적인 웹 애플리케이션을 만들 수 있다.

DOM(Document Object Model)은 웹 페이지의 구조를 표현하는 프로그래밍 인터페이스로, JavaScript를 통해 HTML 요소를 읽고, 수정하고, 삭제하거나 새로운 요소를 추가할 수 있게 해준다.

 

이번 글에서는 DOM의 개념과 주요 조작 방법을 알아보자!

 

1. DOM이란?

 

DOM은 웹 페이지의 HTML 문서를 트리 형태로 표현한 구조이다.

이를 통해 JavaScript로 HTML 문서의 각 요소에 접근하고 조작할 수 있다.

<!DOCTYPE html>
<html>
<head>
    <title>Sample Page</title>
</head>
<body>
    <h1 id="title">Hello, Hanker!</h1>
    <p class="description">Sample Page</p>
    <button onclick="fn_alert()">알림</button>
</body>
</html>

위 HTML코드의 DOM 구조는 아래와 같이 표현된다. (트리구조)

- html
  - head
    - title
  - body
    - h1 (id="title")
    - p (class="description")
    - button

 

 

2. DOM 요소 선택

 

JavaScript는 DOM 요소를 선택하기 위해 다양한 메서드를 제공한다.

 

위 코드로 예를들어 알아보자

 

1. getElementById : ID를 기준으로 요소를 선택핟나.

let title = document.getElementById("title");
console.log(title); // <h1 id="title">Hello, Hanker!</h1>

 

2. getElementsByClassName : 클래스를 기준으로 요소를 선택하며, 배열과 비슷한 객체를 반환한다.

let paragraphs = document.getElementsByClassName("description");
console.log(paragraphs[0]); // <p class="description">Sample Page</p>

 

3. getElementsbyTagName : 태그 이름을 기준으로 요소를 선택한다.

let buttons = document.getElementsByTagName("button");
console.log(buttons[0]); // <button>알림</button>

 

4. querySelector : CSS 선택자를 사용하여 첫 번째 요소를 선택한다.

let title = document.querySelector("#title"); // ID 선택
let paragraph = document.querySelector(".description"); // 클래스 선택

 

5. querySelectorAll : CSS 선택자를 사용하여 모든 요소를 선택하며, NodeList를 반환한다.

let allParagraphs = document.querySelectorAll(".description");
console.log(allParagraphs); // NodeList(1) [p.description]

 

 

3. DOM 요소 조작

 

 

1. 텍스트 변경 : innerText 또는 textContent를 사용하여 요소의 텍스트를 변경할 수 있다.

let title = document.getElementById("title");
title.innerText = "Welcome to JavaScript!"; // 텍스트 변경

 

2. HTML 변경 : innerHtml을 사용하여 요소의 HTML 내용을 변경할 수 있다.

let paragraph = document.querySelector(".description");
paragraph.innerHTML = "<strong>Updated content!</strong>";

 

3. 스타일 변경 : style 속성을 사용하여 CSS를 직접 수정할 수 있다.

let title = document.getElementById("title");
title.style.color = "blue";
title.style.fontSize = "24px";

 

4. 속성 변경 : setAttribute 와 getAttribute를 사용하여 요소의 속성을 추가하거나 수정한다.

let button = document.querySelector("button");
button.setAttribute("disabled", true); // 버튼 비활성화
console.log(button.getAttribute("disabled")); // "true"

 

 

이벤트 처리

 

DOM 요소에 이벤트를 추가하여 사용자와 상호작용할 수 있다.

 

1. 이벤트 추가 : onclick 속성  또는 addEventListener을 직접 설정

function fn_alert() {
    document.getElementById("title").innerText = "알림창";
}

 

let button = document.querySelector("button");
button.addEventListener("click", function() {
    alert("알림창!!");
});

 

 

2. 이벤트 제거 : removeEventListener 를 사용하여 이벤트를 제거한다.

function handleClick() {
    console.log("Button clicked!");
}
button.addEventListener("click", handleClick);
button.removeEventListener("click", handleClick);

 

 

5. DOM 요소 추가 및 삭제

 

1. 요소 추가 : createElement와 appendChild를 사용하여 새 요소를 추가한다.

let newParagraph = document.createElement("p");
newParagraph.innerText = "New Sample Page!";
document.body.appendChild(newParagraph);

 

2. 요소 삭제 : remove 메서드를 사용하여 요소를 삭제한다.

let paragraph = document.querySelector(".description");
paragraph.remove();

 

정리

 

DOM 조작은 JavaScript를 사용해 웹 페이지를 동적으로 만들 수 있는 가장 중요한 기술이다.

요소를 선택하고, 수정하며, 이벤트를 처리하는 방법을 잘 이해하면 복잡한 웹 애플리케이션도 구현할 수 있다.

 

다음 단계에서는 JavaScript의 유용한 기능과 ES6+의 주요 기능들을 살펴보자!

 

 

끝.

반응형
저작자표시