Document 객체는 해당 창에 표시되는 문서. Document 개체에는 문서 콘텐츠에 대한 액세스 및 수정을 허용하는 다른 개체를 참조하는 다양한 속성이 있습니다. 이 기사에서는 HTML DOM을 이해합니다.
HTML DOM 개념
문서화 된 콘텐츠에 액세스하고 수정하는 방식을 문서 개체 모델 또는 DOM. 개체는 계층 구조로 구성됩니다. 이 계층 구조는 웹 문서의 개체 구성에 적용됩니다.
- 창 개체 (&-) 계층의 맨 위. 개체 계층 구조의 가장 중요한 요소입니다.
- 문서 개체 (& minus) 창에로드되는 각 HTML 문서는 문서 개체가됩니다. 문서에는 페이지의 내용이 포함되어 있습니다.
- 양식 개체 (& minus)… 태그로 묶인 모든 항목이 양식 개체를 설정합니다.
- 양식 제어 요소 빼기 양식 개체에는 텍스트 필드, 단추, 라디오 단추 및 확인란과 같이 해당 개체에 대해 정의 된 모든 요소가 포함됩니다.
HTML DOM이란?
문서 개체 모델은 문서를위한 프로그래밍 API입니다. 개체 모델 자체는 모델링하는 문서의 구조와 매우 유사합니다. 예를 들어, HTML 문서에서 가져온 다음 테이블을 고려하십시오.
| Shady Grove | 에 올리 언 |
| 강 너머, 찰리 | 도리스 사람 |
HTML DOM이 아닌 것
이 섹션은 문서 객체 모델을 유사하게 보일 수있는 다른 시스템과 구별하여 문서 객체 모델을보다 정확하게 이해하도록 설계되었습니다.
문서 객체 모델은 동적 HTML의 영향을 많이 받았지만 레벨 1에서는 모든 동적 HTML을 구현하지 않습니다. 특히 이벤트는 아직 정의되지 않았습니다. 레벨 1은 문서 자체의 견고하고 유연한 모델을 제공하여 이러한 종류의 기능에 대한 확고한 기반을 마련하도록 설계되었습니다.
문서 개체 모델은 이진 사양이 아닙니다. 동일한 언어로 작성된 문서 개체 모델 프로그램은 플랫폼간에 소스 코드가 호환되지만 문서 개체 모델은 어떤 형태의 이진 상호 운용성을 정의하지 않습니다.
문서 개체 모델은 개체를 XML 또는 HTML로 유지하는 방법이 아닙니다. 객체가 XML로 표현되는 방식을 지정하는 대신 문서 객체 모델은 XML 및 HTML 문서가 객체로 표현되는 방식을 지정하여 객체 지향 프로그램에서 사용할 수 있습니다.
문서 개체 모델은 데이터 구조의 집합이 아니라 인터페이스를 지정하는 개체 모델입니다. 이 문서에는 부모 / 자식 관계를 보여주는 다이어그램이 포함되어 있지만 이는 특정 내부 데이터 구조의 표현이 아니라 프로그래밍 인터페이스에 의해 정의 된 논리적 관계입니다.
문서 객체 모델은 XML 또는 HTML의 '진정한 내부 의미'를 정의하지 않습니다. 이러한 언어의 의미는 언어 자체에 의해 정의됩니다.
자바에서 문자열을 날짜로 변환하는 방법
문서 객체 모델은 이러한 의미를 존중하도록 설계된 프로그래밍 모델입니다. 문서 객체 모델은 XML 및 HTML 문서를 작성하는 방식에 영향을 미치지 않습니다. 이러한 언어로 작성할 수있는 모든 문서는 문서 객체 모델에 표시 될 수 있습니다.
문서 개체 모델은 이름에도 불구하고 구성 요소 개체 모델 (COM)의 경쟁자가 아닙니다. CORBA와 마찬가지로 COM은 인터페이스 및 개체를 지정하는 언어 독립적 인 방법입니다. Document Object Model은 HTML 및 XML 문서를 관리하기 위해 설계된 인터페이스 및 개체 집합입니다. DOM은COM 또는 CORBA와 같은 언어 독립적 시스템을 사용하여 구현되며이 문서에 지정된 Java 또는 ECMAScript 바인딩과 같은 언어 별 바인딩을 사용하여 구현할 수도 있습니다.
문서 객체 모델의 출처
Document Object Model은 JavaScript 스크립트와 Java 프로그램을 웹 브라우저간에 이식 할 수 있도록하는 사양으로 시작되었습니다. 동적 HTML은 Document Object Model의 직계 조상이었으며 원래는 주로 브라우저 측면에서 생각되었습니다.
그러나 Document Object Model Working Group이 구성되었을 때 HTML 또는 XML 편집기와 문서 저장소를 포함한 다른 도메인의 공급 업체와도 합류했습니다. 이러한 공급 업체 중 일부는 XML이 개발되기 전에 SGML과 함께 작업했으며 문서 객체 모델은 SGML Groves 및 HyTime 표준의 영향을 받았습니다. 이러한 공급 업체 중 일부는 문서를 제공하기 위해 자체 개체 모델을 개발했습니다.SGML / XML 편집기 또는 문서 저장소를위한 프로그래밍 API와 이러한 개체 모델은 문서 개체 모델에도 영향을 미쳤습니다.
HTML DOM의 속성
문서 객체에서 액세스하고 수정할 수있는 문서 객체의 속성을 살펴 보겠습니다.
- 창 개체 : 창 개체는 항상 계층 구조의 맨 위에 있습니다.
- 문서 개체 : HTML 문서가 창에로드되면 문서 객체가됩니다.
- 양식 개체 : 다음과 같이 표현됩니다. 형태 태그.
- 링크 개체 : 다음과 같이 표현됩니다. 링크 태그.
- 앵커 개체 : 다음과 같이 표현됩니다. a href 태그.
- 양식 제어 요소 : 양식에는 텍스트 필드, 단추, 라디오 단추 및 확인란 등과 같은 많은 제어 요소가있을 수 있습니다.
행동 양식 문서 개체의 :
- 쓰기 ( '문자열') : 문서에 주어진 문자열을 씁니다.
- getElementById () : 주어진 id 값을 가진 요소를 반환합니다.
- getElementsByName () : 주어진 이름 값을 가진 모든 요소를 반환합니다.
- getElementsByTagName () : 주어진 태그 이름을 가진 모든 요소를 반환합니다.
- getElementsByClassName () : 주어진 클래스 이름을 가진 모든 요소를 반환합니다.
HTML 요소 찾기
자바 스크립트로 HTML 요소에 액세스하려면 먼저 요소를 찾아야합니다.
자바의 문자열 메소드
이를 수행하는 몇 가지 방법이 있습니다.
- ID로 HTML 요소 찾기
- 태그 이름으로 HTML 요소 찾기
- 클래스 이름으로 HTML 요소 찾기
ID로 HTML 요소 찾기
DOM에서 HTML 요소를 찾는 가장 쉬운 방법은 요소 ID를 사용하는 것입니다.
예
태그 이름으로 HTML 요소 찾기
이 예에서는 id =”main”인 요소를 찾은 다음
'메인'내부 요소 :
이것으로 우리는이 HTML DOM 기사를 마칩니다. HTML DOM 인 Document Object Model의 다양한 측면을 이해 하셨기를 바랍니다.
우리를 확인하십시오 강사 주도의 라이브 교육 및 실제 프로젝트 경험과 함께 제공됩니다. 이 교육을 통해 백엔드 및 프런트 엔드 웹 기술을 다루는 기술을 능숙하게 사용할 수 있습니다. 여기에는 웹 개발, jQuery, Angular, NodeJS, ExpressJS 및 MongoDB에 대한 교육이 포함됩니다.
질문이 있으십니까? 'HTML 이미지'블로그의 댓글 섹션에 언급 해 주시면 다시 연락 드리겠습니다.