html에서 dom 사용하기

ChatGPT, html

Person:

1
2
3
4
5
HTML에서
1. DOM을 설명
2. 사용법
3. 예제를 10개
알려주세요.

ChatGPT:

    1. DOM(Document Object Model)은 HTML, XML 및 XHTML 문서의 프로그래밍 인터페이스입니다. DOM은 문서의 구조화된 표현을 제공하며, JavaScript와 같은 스크립트 언어를 사용하여 문서의 내용, 구조 및 스타일을 동적으로 조작할 수 있게 합니다. DOM은 트리 구조로 표현되며, 각 요소는 노드(Node)로 표현됩니다. DOM은 웹 페이지의 모든 요소에 대한 추상화된 표현을 제공하여 스크립트가 문서 구조, 스타일 및 콘텐츠에 액세스하고 수정할 수 있게 합니다.
  1. DOM을 사용하기 위해서는 다음과 같은 단계를 거칩니다:
  • 웹 페이지의 HTML 구조를 파싱하여 DOM 트리를 생성합니다.
  • DOM 트리에는 HTML 문서의 모든 요소가 노드로 포함됩니다.
  • 스크립트 언어를 사용하여 DOM 노드에 액세스하고 조작할 수 있습니다.
  • DOM 메서드와 속성을 사용하여 문서의 구조, 스타일 및 콘텐츠를 변경할 수 있습니다.
  • 변경된 DOM은 웹 페이지에 실시간으로 반영되어 사용자에게 업데이트된 콘텐츠를 제공합니다.
  1. 다음은 HTML DOM을 사용한 예제 10개입니다:

(1) HTML 요소에 접근하여 내용 변경하기:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<!DOCTYPE html>
<html>
<head>
  <script>
    function changeText() {
      document.getElementById("myElement").innerHTML = "새로운 내용";
    }
  </script>
</head>
<body>
  <p id="myElement">원래 내용</p>
  <button onclick="changeText()">텍스트 변경</button>
</body>
</html>

(2) 요소의 속성 변경하기:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<!DOCTYPE html>
<html>
<head>
  <script>
    function changeColor() {
      document.getElementById("myElement").style.color = "red";
    }
  </script>
</head>
<body>
  <p id="myElement">내용</p>
  <button onclick="changeColor()">색상 변경</button>
</body>
</html>

(3) 새로운 요소 생성하여 문서에 추가하기:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<!DOCTYPE html>
<html>
<head>
  <script>
    function addElement() {
      var newElement = document.createElement("p");
      newElement.innerHTML = "새로운 요소";
      document.body.appendChild(newElement);
    }
  </script>
</head>
<body>
  <button onclick="addElement()">요소 추가</button>
</body>
</html>

(4) 요소 숨기기/보이기:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<!DOCTYPE html>
<html>
<head>
  <script>
    function toggleElement() {
      var element = document.getElementById("myElement");
      if (element.style.display === "none") {
        element.style.display = "block";
      } else {
        element.style.display = "none";
      }
    }
  </script>
</head>
<body>
  <p id="myElement">내용</p>
  <button onclick="toggleElement()">숨기기/보이기</button>
</body>
</html>

(5) 이벤트 처리하기:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<!DOCTYPE html>
<html>
<head>
  <script>
    function showMessage() {
      alert("버튼이 클릭되었습니다!");
    }
  </script>
</head>
<body>
  <button onclick="showMessage()">클릭</button>
</body>
</html>

(6) 요소 제거하기:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<!DOCTYPE html>
<html>
<head>
  <script>
    function removeElement() {
      var element = document.getElementById("myElement");
      element.parentNode.removeChild(element);
    }
  </script>
</head>
<body>
  <p id="myElement">제거될 요소</p>
  <button onclick="removeElement()">요소 제거</button>
</body>
</html>

(7) 요소의 클래스 변경하기:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<!DOCTYPE html>
<html>
<head>
  <script>
    function toggleClass() {
      var element = document.getElementById("myElement");
      element.classList.toggle("highlight");
    }
  </script>
  <style>
    .highlight {
      background-color: yellow;
    }
  </style>
</head>
<body>
  <p id="myElement">내용</p>
  <button onclick="toggleClass()">클래스 변경</button>
</body>
</html>

(8) 요소의 속성 값 가져오기:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<!DOCTYPE html>
<html>
<head>
  <script>
    function getAttributeValue() {
      var element = document.getElementById("myElement");
      var value = element.getAttribute("data-value");
      alert("속성 값: " + value);
    }
  </script>
</head>
<body>
  <p id="myElement" data-value="123">내용</p>
  <button onclick="getAttributeValue()">속성 값 가져오기</button>
</body>
</html>

(9) 요소의 위치 변경하기:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<!DOCTYPE html>
<html>
<head>
  <script>
    function moveElement() {
      var element = document.getElementById("myElement");
      var container = document.getElementById("container");
      container.appendChild(element);
    }
  </script>
  <style>
    #container {
      height: 200px;
      width: 200px;
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <div id="container">
    <p id="myElement">이동할 요소</p>
  </div>
  <button onclick="moveElement()">요소 이동</button>
</body>
</html>

(10) 폼 데이터 읽기:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<!DOCTYPE html>
<html>
<head>
  <script>
    function submitForm() {
      var name = document.forms["myForm"]["name"].value;
      var email = document.forms["myForm"]["email"].value;
      alert("이름: " + name + ", 이메일: " + email);
    }
  </script>
</head>
<body>
  <form name="myForm">
    <label for="name">이름:</label>
    <input type="text" id="name" name="name">
    <br>
    <label for="email">이메일:</label>
    <input type="email" id="email" name="email">
    <br>
    <input type="button" value="제출" onclick="submitForm()">
  </form>
</body>
</html>

위 예제들은 간단한 DOM 조작을 보여주기 위한 것이며, DOM을 사용하여 HTML 요소를 조작하고 동적으로 변경하는 다양한 방법을 보여줍니다. DOM은 웹 개발에서 매우 중요한 개념이며, 이를 통해 웹 페이지의 동적인 기능과 상호작용을 구현할 수 있습니다.