logo

TechCodeview

HTML DOM(문서 개체 모델)

HTML DOM(문서 개체 모델) HTML 문서의 계층적 표현입니다. 이는 웹페이지 요소의 구조와 속성을 정의하여 JavaScript가 콘텐츠에 동적으로 액세스하고, 조작하고, 업데이트할 수 있도록 하여 상호작용성과 기능을 향상시킵니다.

메모 : DOM은 객체 간의 관계를 지정하지 않기 때문에 논리 구조라고 합니다.

내용의 테이블



10억~100만

DOM이란 무엇입니까?

DOM , 또는 문서 개체 모델 은 다음과 같은 구조화된 문서를 나타내는 프로그래밍 인터페이스입니다. HTML 그리고 XML 객체의 나무로. JavaScript와 같은 스크립팅 언어를 사용하여 문서 요소에 액세스하고, 조작하고, 수정하는 방법을 정의합니다.

따라서 기본적으로 문서 개체 모델은 API HTML 또는 XML 문서를 나타내고 상호 작용합니다.

DOM은 W3C (월드와이드웹 컨소시엄) 기준 그리고 문서에 접근하기 위한 표준을 정의합니다.

W3C Dom 표준은 세 가지 부분으로 나뉩니다.

  • 코어 DOM – 모든 문서 유형에 대한 표준 모델
  • XML DOM – XML 문서의 표준 모델
  • HTML DOM – HTML 문서의 표준 모델

HTML DOM

HTML DOM은 표준입니다 객체 모델 및 프로그래밍 인터페이스 HTML 문서. HTML DOM 웹페이지를 표현하는 방법 중 하나입니다. 구조화된 계층적 방식 프로그래머와 사용자가 문서를 살펴보는 것이 더 쉬워질 것입니다.

HTML DOM을 사용하면 문서 객체에서 제공하는 명령이나 메서드를 사용하여 HTML의 태그, ID, 클래스, 속성 또는 요소에 쉽게 액세스하고 조작할 수 있습니다.

DOM JavaScript를 사용하면 웹 페이지의 HTML과 CSS에 액세스할 수 있으며 HTML 요소의 동작을 수정할 수도 있습니다.

DOM이 필요한 이유는 무엇입니까?

HTML은 다음과 같은 데 사용됩니다. 구조 웹페이지와 자바스크립트 추가하는 데 사용됩니다 행동 우리 웹 페이지에. HTML 파일이 브라우저에 로드되면 JavaScript는 HTML 문서를 직접 이해할 수 없습니다. 따라서 HTML 문서를 기반으로 브라우저에서 생성된 DOM(문서 개체 모델)을 해석하고 상호 작용합니다.

DOM은 기본적으로 동일한 HTML 문서를 표현하지만 객체로 구성된 트리와 같은 구조입니다. JavaScript는 HTML 문서의 태그()를 이해할 수 없지만 DOM의 객체 h1은 이해할 수 있습니다.

JavaScript는 DOM을 요소에 액세스하고 조작하기 위한 브리지로 사용하여 DOM을 쉽게 해석합니다. DOM Javascript를 사용하면 다양한 기능을 사용하여 각 개체(h1, p 등)에 액세스할 수 있습니다.

DOM(문서 개체 모델)은 다음과 같은 여러 가지 이유로 웹 개발에 필수적입니다.

  • 동적 웹페이지: 이를 통해 동적 웹 페이지를 만들 수 있습니다. 이는 JavaScript가 페이지 콘텐츠, 구조 및 스타일에 동적으로 액세스하고 조작할 수 있도록 하여 전체 페이지를 다시 로드하지 않고 콘텐츠를 업데이트하거나 사용자 작업에 즉시 응답하는 등 대화형 및 반응형 웹 경험을 제공합니다.
  • 상호작용: DOM을 사용하면 사용자 작업(예: 클릭, 입력 또는 스크롤)에 응답하고 이에 따라 웹 페이지를 수정할 수 있습니다.
  • 콘텐츠 업데이트: 전체 페이지를 새로 고치지 않고 콘텐츠를 업데이트하려는 경우 DOM을 사용하면 웹 애플리케이션을 보다 효율적이고 사용자 친화적으로 만드는 대상 변경이 가능합니다.
  • 브라우저 간 호환성: 다양한 브라우저는 HTML과 CSS를 다양한 방식으로 렌더링할 수 있습니다. DOM은 페이지 요소와 상호 작용하는 표준화된 방법을 제공합니다.
  • 단일 페이지 애플리케이션(SPA): React 또는 Angular와 같은 프레임워크로 구축된 애플리케이션은 전체 페이지를 다시 로드하지 않고도 단일 HTML 페이지 내에서 콘텐츠를 효율적으로 렌더링하고 업데이트하기 위해 DOM에 크게 의존합니다.

DOM의 구조

DOM은 트리 또는 포레스트(하나 이상의 트리)로 생각할 수 있습니다. 용어 구조 모델 때로는 문서의 나무 모양 표현을 설명하는 데 사용됩니다.

올해의 분기

트리의 각 분기는 노드에서 끝나고 각 노드에는 객체가 포함되어 있습니다. 이벤트 리스너를 노드에 추가하고 특정 이벤트 발생 시 트리거할 수 있습니다. DOM 구조 모델의 중요한 속성 중 하나는 구조적 동형성 : 두 개의 DOM 구현을 사용하여 동일한 문서의 표현을 생성하는 경우 정확히 동일한 객체와 관계를 사용하여 동일한 구조 모델을 생성합니다.

DOM을 객체 모델이라고 부르는 이유는 무엇입니까?

문서는 객체를 사용하여 모델링되며 모델에는 문서의 구조뿐만 아니라 문서의 동작과 HTML의 속성이 있는 태그 요소처럼 문서를 구성하는 객체도 포함됩니다.

여러 줄 주석 파워쉘

DOM의 속성

문서 객체가 접근하고 수정할 수 있는 문서 객체의 속성을 살펴보겠습니다.

DOM 순서도의 속성

DOM 표현

  • 창 개체 : Window 객체는 항상 계층 구조의 최상위에 있는 브라우저의 객체입니다. 이는 브라우저의 모든 속성과 메서드를 설정하고 액세스하는 데 사용되는 API와 같습니다. 브라우저에 의해 자동으로 생성됩니다.
  • 문서 객체: HTML 문서가 창에 로드되면 문서 객체가 됩니다. '문서' 개체에는 웹 페이지 콘텐츠에 대한 액세스 및 수정을 허용하는 다른 개체를 참조하는 다양한 속성이 있습니다. HTML 페이지의 요소에 액세스해야 하는 경우 항상 '문서' 개체에 액세스하는 것부터 시작합니다. Document 객체는 window 객체의 속성입니다.
  • 양식 개체: 그것은 다음과 같이 표현됩니다. 형태 태그.
  • 링크 객체 : 그것은 다음과 같이 표현됩니다. 링크 태그.
  • 앵커 객체 : 그것은 다음과 같이 표현됩니다. a href 태그.
  • 양식 제어 요소: 양식에는 텍스트 필드, 버튼, 라디오 버튼, 체크박스 등과 같은 많은 제어 요소가 있을 수 있습니다.

문서 객체의 메소드

DOM 사용자가 문서와 상호 작용하고 조작할 수 있는 다양한 방법을 제공합니다. 일반적으로 사용되는 DOM 메서드는 다음과 같습니다.

방법설명
쓰다 (끈)문서에 주어진 문자열을 씁니다.
getElementById() 주어진 id 값을 갖는 요소를 반환합니다.
getElementsByName() 주어진 이름 값을 갖는 모든 요소를 ​​반환합니다.
getElementsByTagName() 주어진 태그 이름을 가진 모든 요소를 ​​반환합니다.
getElementsByClassName() 주어진 클래스 이름을 가진 모든 요소를 ​​반환합니다.

예: 이 예에서는 HTML 요소 ID를 사용하여 DOM HTML 요소를 찾습니다.

HTML 
    
techcodeview.comh2>
괴짜를 위한 컴퓨터 공학 포털입니다. 피>
이 예에서는 getElementByIdb> 메소드. 피>
피>