Backend/Web

[JavaScript] DOM 폼

해로몬 2024. 11. 6. 17:12

DOM이란?

DOM (Document Object Model)은 웹 페이지를 조작하고 제어할 수 있는 JavaScript의 강력한 기능입니다. DOM은 HTML 문서를 트리 구조의 객체 모델로 표현하여, JavaScript를 통해 각 요소를 선택하고, 속성이나 내용을 변경하며, 요소를 추가하거나 삭제할 수 있게 합니다.

DOM 트리 구조

HTML 문서는 DOM을 통해 트리 구조로 표현되며, 각 HTML 요소가 하나의 노드로 변환됩니다. DOM 트리 구조는 부모-자식 관계를 유지하여 문서의 계층 구조를 나타냅니다. 이 트리 구조 덕분에 JavaScript는 HTML 요소를 탐색하고 조작할 수 있습니다.

html
코드 복사
<!DOCTYPE html>
<html>
<head>
    <title>Sample Page</title>
</head>
<body>
    <h1>Heading</h1>
    <p>This is a paragraph.</p>
</body>
</html>

이 HTML 문서는 아래와 같은 DOM 트리로 변환됩니다.

  • html
    • head
      • title
    • body
      • h1
      • p

DOM 요소 선택하기

DOM 요소를 선택하는 방법은 여러 가지가 있습니다. 각 메서드는 특정 상황에 맞춰 선택할 수 있으며, HTML 요소의 id, class, 태그명, CSS 선택자를 통해 원하는 요소에 접근할 수 있습니다.

  1. getElementById: 특정 id를 가진 요소 하나를 선택합니다.
  2. getElementsByClassName: 특정 클래스를 가진 모든 요소를 선택하여 HTMLCollection으로 반환합니다.
  3. getElementsByTagName: 특정 태그명을 가진 모든 요소를 선택하여 HTMLCollection으로 반환합니다.
  4. querySelector 및 querySelectorAll: CSS 선택자를 사용하여 요소를 선택합니다. querySelector는 첫 번째로 일치하는 요소 하나를, querySelectorAll은 모든 일치하는 요소를 NodeList로 반환합니다.

 

DOM 요소 조작하기

DOM을 통해 선택한 요소는 다양한 방식으로 조작할 수 있습니다. JavaScript를 통해 요소의 텍스트, HTML 내용, 속성, 스타일 등을 수정할 수 있습니다.

  • 텍스트 조작:
    • textContent : 요소의 텍스트 내용을 변경
    • innerHTML : 요소의 HTML 콘텐츠를 설정하거나 변경
  • 속성 조작:
    • setAttribute & getAttribute : 요소의 특정 속성을 설정하거나 가져옴
  • 스타일 조작:
    • style : 요소에 CSS 스타일을 직접 적용

DOM 요소 추가 및 삭제

DOM을 통해 HTML 문서에 동적으로 요소를 추가하거나 제거할 수 있습니다. 이를 통해 웹 페이지의 내용을 JavaScript로 유연하게 조절할 수 있습니다.

  • 요소 생성:
    • createElement : 새로운 HTML 요소를 생성. 생성한 요소를 DOM 트리에 추가하기 위해 appendChild나 insertBefore 메서드를 사용
  • 요소 삭제:
    • removeChild : 특정 자식 요소를 삭제
    • remove : 요소자체를 삭제

DOM 이벤트 처리

DOM에서는 사용자의 상호작용을 감지하는 이벤트 시스템을 제공합니다. 예를 들어, 버튼 클릭, 키보드 입력, 마우스 이동 등의 사용자 행동에 반응할 수 있습니다. JavaScript는 이벤트 처리기를 사용하여 이러한 이벤트에 대응할 수 있습니다.

  • addEventListener 메서드를 사용하여 특정 요소에 이벤트를 연결할 수 있습니다.



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM 조작 예제</title>
</head>
<body>

    <h1 id="mainTitle">DOM 조작 예제</h1>
    <p class="description">이 문단은 JavaScript로 변경됩니다.</p>
    <div class="container"></div>
    <button id="myButton">Click Me!</button>

    <script type="text/javascript">
        // 1. 요소 선택하기

        // ID를 통한 요소 선택
        const mainTitle = document.getElementById("mainTitle");

        // 클래스명을 통한 요소 선택
        const descriptions = document.getElementsByClassName("description");

        // 태그명을 통한 요소 선택
        const paragraphs = document.getElementsByTagName("p");

        // CSS 선택자를 통한 요소 선택
        const container = document.querySelector(".container");
        const allParagraphs = document.querySelectorAll("p");

        // 2. 요소 조작하기

        // 텍스트 조작
        mainTitle.textContent = "JavaScript DOM 조작 예제";

        // HTML 내용 조작
        container.innerHTML = "<p>새로운 내용이 추가되었습니다.</p>";

        // 속성 조작
        mainTitle.setAttribute("data-info", "Title Element");
        console.log(mainTitle.getAttribute("data-info"));

        // 스타일 조작
        mainTitle.style.color = "blue";
        mainTitle.style.fontSize = "24px";

        // 3. 요소 추가 및 삭제하기

        // 새로운 요소 생성
        const newParagraph = document.createElement("p");
        newParagraph.textContent = "이것은 동적으로 추가된 문단입니다.";
        container.appendChild(newParagraph);

        // 요소 삭제
        descriptions[0].remove();

        // 4. 이벤트 처리하기

        // 클릭 이벤트 처리
        const button = document.getElementById("myButton");
        button.addEventListener("click", function() {
            alert("버튼이 클릭되었습니다!");
        });
    </script>

</body>
</html>

 

DOM 폼 요소 제어

HTML 폼 요소에 접근하기

HTML 문서에서 폼 요소는 <form>, <input>, <select>, <textarea> 같은 요소들을 포함합니다. JavaScript는 document.forms를 통해 HTML 문서 내에 정의된 모든 폼에 접근할 수 있습니다.

  • document.forms: HTML 문서 내 모든 폼을 배열 형태로 가져옵니다. 각 폼은 document.forms[n] 또는 document.forms['폼 이름']처럼 인덱스나 이름을 통해 접근할 수 있습니다.
  • 개별 필드 접근: 폼 내 특정 필드는 form.elements 또는 form['필드 이름']을 통해 접근합니다.

 

let form = document.forms["myForm"]; // 이름으로 폼 접근
let inputField = form.elements["username"]; // 폼 내 특정 필드 접근

위의 접근 방식을 통해 개별 폼과 필드에 접근할 수 있습니다.

폼 요소의 주요 속성

폼과 필드는 다양한 속성을 가지고 있어 사용자의 입력을 제어하고 관리할 수 있습니다.

주요 폼 속성

  • action: 폼 데이터가 제출되는 서버 URL을 나타냅니다.
  • method: 폼 제출 방식(예: GET, POST)을 정의합니다.

주요 필드 속성

  • value: 필드의 현재 값에 접근하거나 설정할 수 있습니다. 예를 들어, <input> 요소에 텍스트를 입력하거나 값을 가져오는 데 사용됩니다.
  • type: 필드 유형을 나타냅니다. <input> 요소는 text, password, checkbox 등 다양한 유형을 가질 수 있습니다.
  • checked: 체크박스나 라디오 버튼의 선택 상태를 확인합니다.
  • disabled: 필드가 비활성화 상태인지 여부를 나타냅니다. true로 설정하면 해당 필드는 사용 불가능해집니다.

 

let username = form.elements["username"].value; // 필드 값 가져오기
form.action = "/submit"; // 폼의 action 속성 설정
저작자표시 비영리 변경금지 (새창열림)

'Backend > Web' 카테고리의 다른 글

[JSP] JDBC 연동  (3) 2024.11.08
JSP(Java Server Page)/Sevelt  (1) 2024.11.07
[JavaScript]배열 / 객체 / 내장클래스  (3) 2024.11.06
[JavaScript] 기본문법 / 함수 / 이벤트  (1) 2024.11.06
[HTML] Form  (0) 2024.11.05

'Backend/Web'의 다른글

  • 현재글[JavaScript] DOM 폼

관련글

티스토리툴바