DOM(문서 개체 모델) 이해-JS 튜토리얼-php.cn

DOM(문서 개체 모델) 이해

Susan Sarandon

풀어 주다： 2024-10-13 06:18:02

원래의

846명이 탐색했습니다.

Understanding the Document Object Model (DOM)

문서 개체 모델(DOM)은 문서의 구조를 정의하고 HTML 및 XML 문서와의 동적 상호 작용을 허용하므로 웹 개발자에게 중요한 개념입니다. 이 가이드는 DOM과 그 구조, JavaScript를 사용하여 DOM을 조작하는 방법을 이해하는 데 도움이 됩니다.

DOM이란 무엇입니까?

정의: DOM은 웹 문서용 프로그래밍 인터페이스입니다. 이는 문서를 개체 트리로 나타내므로 문서를 보는 동안 스크립트가 문서의 내용, 구조 및 스타일을 업데이트할 수 있습니다.
트리 구조: DOM은 문서를 노드 트리로 나타냅니다. 각 노드는 요소, 속성, 텍스트 등 문서의 일부를 나타냅니다.

DOM 구조

노드 유형

문서 노드: DOM 트리의 루트입니다. 전체 문서를 나타냅니다.
요소 노드: HTML 요소(예:
,
, )를 나타냅니다.

텍스트 노드: 요소 내의 텍스트를 나타냅니다.

속성 노드: 요소의 속성(예: 클래스, ID)을 나타냅니다.

댓글 노드: HTML의 댓글을 나타냅니다.

예제 DOM 트리

<!DOCTYPE html>
<html>
<head>
    <title>My Page</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is a paragraph.</p>
</body>
</html>

로그인 후 복사

DOM 표현:

Document
├── html (Element)
│   ├── head (Element)
│   │   └── title (Element)
│   │       └── "My Page" (Text)
│   └── body (Element)
│       ├── h1 (Element)
│       │   └── "Hello, World!" (Text)
│       └── p (Element)
│           └── "This is a paragraph." (Text)

로그인 후 복사

DOM에 접근하기

요소 선택

getElementById: ID로 단일 요소를 선택합니다.

  const element = document.getElementById('myId');

로그인 후 복사

getElementsByClassName: 지정된 클래스 이름을 가진 요소의 라이브 HTMLCollection을 반환합니다.

  const elements = document.getElementsByClassName('myClass');

로그인 후 복사

getElementsByTagName: 지정된 태그 이름을 가진 요소의 라이브 HTMLCollection을 반환합니다.

  const elements = document.getElementsByTagName('div');

로그인 후 복사

querySelector: CSS 선택기와 일치하는 첫 번째 요소를 선택합니다.

  const element = document.querySelector('.myClass');

로그인 후 복사

querySelectorAll: CSS 선택기와 일치하는 모든 요소의 정적 NodeList를 반환합니다.

  const elements = document.querySelectorAll('div.myClass');

로그인 후 복사

요소 조작

콘텐츠 변경:

  const element = document.getElementById('myId');
  element.textContent = 'New Content';

로그인 후 복사

속성 변경:

  const element = document.getElementById('myId');
  element.setAttribute('class', 'newClass');

로그인 후 복사

스타일 변경:

  const element = document.getElementById('myId');
  element.style.color = 'blue';

로그인 후 복사

요소 생성 및 추가:

  const newElement = document.createElement('div');
  newElement.textContent = 'I am a new div';
  document.body.appendChild(newElement);

로그인 후 복사

요소 제거:

  const element = document.getElementById('myId');
  element.parentNode.removeChild(element);

로그인 후 복사

DOM 이벤트

이벤트는 브라우저에서 발생하는 작업 또는 발생이며, 이벤트 핸들러를 사용하여 이에 응답할 수 있습니다.

이벤트 리스너 추가

const button = document.getElementById('myButton');
button.addEventListener('click', function() {
    alert('Button clicked!');
});

로그인 후 복사

공통 이벤트

클릭: 요소를 클릭할 때 트리거됩니다.
mouseover: 마우스를 요소 위로 가져갈 때 트리거됩니다.
keydown: 키를 누를 때 트리거됩니다.
제출: 양식이 제출되면 트리거됩니다.

결론

웹 페이지와 상호 작용하고 조작하는 방법을 제공하는 DOM을 이해하는 것은 웹 개발에 필수적입니다. DOM 조작을 마스터하면 동적인 대화형 웹 애플리케이션을 만들 수 있습니다.

문서에 대해 더 자세히 알아보고 DOM API에서 사용할 수 있는 다양한 메서드와 속성을 실험해 보세요. 즐거운 코딩하세요!

위 내용은 DOM(문서 개체 모델) 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!