English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

JavaScript 기본 강의

JavaScript 객체

JavaScript 함수

JS HTML DOM

JS 브라우저 BOM

AJAX 기본 강의

JavaScript 참조 매뉴얼

JS HTML DOM(문서 객체 모델)

문서 객체 모델, 일반적으로DOM، 이는 웹 사이트가 상호작용할 수 있게 하는 중요한 부분입니다。

문서 객체 모델창에 표시된 HTML 문서를 나타냅니다.

JavaScript가 웹 사이트의 내용, 구조 및 스타일을 처리할 수 있는 인터페이스입니다.

HTML DOM(문서 객체 모델)

웹 페이지를 로드한 후, 브라우저는 해당 페이지의문서 객체 모델.

HTML DOM모델 구조의 트리오브젝트.

다음 예제는 DOM이 무엇인지 설명합니다:

  <html>
  <head>
  <title>Example</title>
  </head>  
  <h1>Example Page</h1>
  <p>This is an example page</p>
  </html>

위 코드의 DOM 표현은 다음과 같습니다:

HTML DOM은 HTML의 표준입니다오브젝트모델과프로그래밍 인터페이스. 그러나 그것은 정의합니다:

  • HTML 요소는오브젝트

  • 모든 HTML 요소의속성

  • 모든 HTML 요소에 접근할 수 있는메서드

  • 모든 HTML 요소의이벤트

다시 말해:HTML DOM은 HTML 요소를 얻고, 변경하고, 추가하거나 제거하는 표준입니다.

DOM과 JavaScript

객체 모델을 통해 JavaScript는 동적 HTML을 생성하기 위해 필요한 모든 기능을 얻습니다:

  • JavaScript는 페이지에서 모든 HTML 요소를 변경할 수 있습니다

  • JavaScript는 페이지에서 모든 HTML 속성을 변경할 수 있습니다

  • JavaScript는 페이지에서 모든 CSS 스타일을 변경할 수 있습니다

  • JavaScript는 기존 HTML 요소와 속성을 제거할 수 있습니다

  • JavaScript는 새로운 HTML 요소와 속성을 추가할 수 있습니다

  • JavaScript는 페이지에서 모든 기존 HTML 이벤트에 반응할 수 있습니다

  • JavaScript는 페이지에서 새로운 HTML 이벤트를 생성할 수 있습니다

학습할 내용

이 튜토리얼의 다음 장에서는 다음을 배울 것입니다:

  • HTML 요소를 어떻게 찾을 수 있는지

  • HTML 요소의 내용을 어떻게 변경할 수 있는지

  • HTML 요소를 어떻게 추가하고 제거할 수 있는지

  • HTML 요소의 스타일(CSS)을 어떻게 변경할 수 있는지

  • HTML 속성을 어떻게 추가하고 제거할 수 있는지

  • DOM 트리를 어떻게 탐색할 수 있는지