나는 모든 웹 페이지의 핵심이다.나는 당신의 문서 대상 모델입니다. 반드시 나무가 아닙니다.

당신은 HTML/CSS를 처음 사용한 사람입니까, 아니면 HTML의 고급 기능을 깊이 이해하고 싶은 사람입니까?그럼 잘 왔네.따라서 커피를 한 잔 마시고 HTML 시리즈의 세 번째 부분을 감상하며 HTML DOM을 깊이 있게 이해한다.재미있는 사실을 얻기 위해'부가점'부분을 교차 검사하는 것을 잊지 마라.

W3C 문서 객체 모델(DOM)은 플랫폼과 언어가 중립적인 인터페이스로 프로그램과 스크립트가 문서의 내용, 구조, 스타일에 동적으로 접근하고 업데이트할 수 있도록 한다

곤혹스러웠어간단히 말해볼게요.모든 웹 페이지는 하나의 문서이며, 웹 페이지의 모든 요소(텍스트, 이미지, 표)는 트리 형식으로 이 문서에 저장되며, 잠시 후에 자바스크립트 등 스크립트 언어로 조작할 수 있다고 상상해 보세요.

현재 브라우저는 웹 페이지를 로드할 때마다 이러한 문서를 만듭니다. 이를 페이지의 **문서 객체 모델(DOM)**이라고 합니다.
DOM은 프로그램이 문서 구조, 스타일 및 내용을 변경할 수 있도록 문서를 노드 및 객체로 표시합니다.이런 방식을 통해 프로그래밍 언어는 웹 페이지에 연결된다.

왜 DOM이 중요합니까?

자바스크립트 팬?그리고 꼭 읽어주세요.

The DOM is not a programming language, but without it, the JavaScript language wouldn’t be able to acess any of the web pages elements in HTML documents, XML documents or their component parts .
As per the W3C specification, one important objective for the Document Object Model is to provide a standard programming interface that can be used in a wide variety of environments and applications.

DOM을 통해 JavaScript는 페이지의 HTML 요소, 속성, CSS 스타일, 요소 및 이벤트 변경 등 동적 HTML을 만드는 데 필요한 모든 기능을 제공합니다.우리는 다음과 같이 말할 수 있습니다.

API = DOM + JavaScript

DOM 유형:

W3C DOM 표준은

핵심 DOM - 모든 문서 유형의 표준 모델(모든 DOM 구현은 핵심 규범에 "기본"으로 열거된 인터페이스를 지원해야 합니다.)

XML DOM-XML 문서의 표준 모델(즉, 모든 XML 요소는 XML DOM을 통해 액세스할 수 있음)

HTML DOM-HTML 문서의 표준 모델(HTML DOM은 HTML 요소의 표준을 획득, 변경, 추가 또는 삭제하는 방법입니다.)

이 문서에서는 핵심과 HTML DOM에 대해 다루고 있으므로 XML DOM에 대한 자세한 내용은 this 를 참조하십시오.

파일

인터페이스의 문서는 브라우저에 불러온 모든 웹 페이지를 표시하고 웹 내용의 입구점DOM tree으로 한다.DOM에는 및 등의 요소가 노드로 포함됩니다.페이지의 URL을 가져오거나 문서에 새 요소를 만드는 방법 등 문서 전체에 다양한 기능을 제공합니다.
"text/HTML"내용 유형을 가진 HTML 문서도 HTMLDocument 인터페이스를 실현하고, XML과 SVG 문서는 XMLDocument 인터페이스를 실현한다.

know more about the Document interface here

창(BOM 테이블)

윈도우 대상에 들어가기 전에 다른 개념, BOM에 대해 간단하게 이야기합시다.브라우저 객체 모델(BOM)을 사용하면 JavaScript가 브라우저와 대화할 수 있습니다.비록 브라우저 대상 모델(BOM)에 대한 공식 표준은 없지만 현대 브라우저는 같은 자바스크립트 상호작용 방법과 속성을 실현했다.현재 창 대상은 기본적으로 브라우저 창을 표시합니다.모든 글로벌 JavaScript 객체, 함수 및 변수는 자동으로 창 객체의 구성원이 됩니다.심지어 문서 객체(HTML DOM)도 창 객체의 속성입니다.

window.document.getElementById(“header”);

Obviously there are even more stuff you can do with the window object which you will be able to find here

대상

모든 속성, 방법,웹 페이지를 조작하고 만들 수 있는 이벤트는dom 내의 대상에 조직된다. (예를 들어 문서 자체는 문서 자체를 나타내는 대상, 표는 HTML 테이블에 접근하는 특수한 HTMLTableElementdom 인터페이스를 실현하는 대상 등).현대 DOM은 여러 개의 함께 작동하는 API를 사용하여 구축됩니다.핵심DOM은 문서와 그 내부 대상을 근본적으로 묘사하는 대상을 정의했다.필요에 따라 향상되고 확장됩니다.예를 들어, HTML DOM API 에는 HTML 문서를 핵심 DOM에 표시하는 지원이 추가됩니다.

인터페이스

많은 객체가 여러 인터페이스에서 대여됩니다.

The HTMLTableElement interface provides special properties and methods (beyond the regular HTMLElement object interface it also has available to it by inheritance) for manipulating the layout and presentation of tables in an HTML document.

예를 들어table 대상은 전문적인 HTMLTableElement 인터페이스를 실현했다. 이 인터페이스는createCaption과insertRow 등 방법을 포함한다.그러나 이것도 HTML 요소이기 때문에table는 DOM 요소가 한 장에서 기술한 요소 인터페이스를 참조하는 것을 실현했다.마지막으로 DOM의 경우 HTML 요소도 HTML 또는 XML 페이지를 구성하는 객체 모델의 노드 트리의 노드이기 때문에 테이블 객체는 더욱 기본적인 노드 인터페이스를 실현하고 요소는 파생된다.

When you get a reference to a table object, as in the following example, you routinely use all three of these interfaces interchangeably on the object, perhaps without knowing it.

일반 인터페이스: (src:https://developer.mozilla.org/ )

document.getElementById(id)

파일입니다.getElementsByTagName(이름)

document.createElement(이름)

부모 노드.appendChild(노드)

원소.innerHTML

컴포넌트.style .왼쪽

컴포넌트.setAttribute ()

컴포넌트.getAttribute ()

컴포넌트.addEventListener ()

window.content

window.onload

window.scrollTo ()

DOM에서 데이터 액세스

JavaScript 사용document 또는 window API는 DOM을 사용하여 웹 페이지의 문서 및 요소에 액세스합니다.예를 들어 표준 DOM이 지정한 getElementsByTagName 아래 코드의 방법은 문서의 모든 요소 목록을 되돌려야 합니다.

const paragraphs = document.getElementsByTagName("p");
// paragraphs[0] is the first <p> element

마찬가지로 HTML 요소에 접근할 수도 있습니다.

id:var x=document.getElementById("프로필");(이 방법은 하나의 요소만 되돌려줍니다.)

클래스 이름: var x = 문서.getElementsByClassName("프로필");

CSS 선택기: var x= 문서.querySelectorAll(“p.intro”);

HTML 객체 컬렉션에 나열된 HTML 요소:
파일닻을 내리다.길다
파일형식길다
파일이미지길다
파일링크길다
파일각본.길다

비록 우리는 이 참고 문서에서 자바스크립트에만 관심을 가지지만 DOM의 실현은 모든 언어를 구축할 수 있다. 예를 들어 Python의 예시와 같다.

# Python DOM example
#src: [https://developer.mozilla.org/](https://developer.mozilla.org/)

import xml.dom.minidom as m
doc = m.parse(r"C:\Projects\Py\chap1.xml")
doc.nodeName # DOM property of document object
p_list = doc.getElementsByTagName("para")

DOM 데이터 유형

DOM은 거대한 대상이기 때문에 API에서 DOM을 사용하기 위해 다양한 데이터 형식을 전달한다는 점을 주의해야 한다.

** 문서: ** 브라우저에 로드된 웹 페이지를 나타내며 웹 내용의 입구점

*** 노드: ** 기본적으로 * 문서의 각 객체는 특정 노드입니다.

** 요소: ** 요소 또는 요소 유형의 노드를 의미하며 기본적으로 DOM API

의 객체입니다.

**노드 목록:*노드 목록은 요소 그룹입니다

**속성:**속성은 항상 DOM의 HTML 요소에 속하지만 요소와 같은 DOM의 노드입니다.

DOM 속성 및 방법에 대해 자세히 알아보십시오here.

문서 객체 모델이 아닙니다.

이 절은 문서 대상 모델을 다른 보기에 유사한 시스템과 구분하여 문서 대상 모델을 더욱 정확하게 이해하는 데 목적을 둔다.

문서 대상 모델은 인터페이스에 2진 소스 코드를 정의하지 않았습니다.

문서 객체 모델은 XML 또는 HTML 객체를 설명하는 방법이 아닙니다.반대로 XML과 HTML 문서를 객체로 표현하는 방법을 지정하여 객체에 대한 프로그램에서 사용할 수 있도록 합니다.

문서 대상 모델은 데이터 구조가 아니라 각종 인터페이스를 사용하여 대상에 접근하는 대상 모델이다.

문서 객체 모델에 XML이나 HTML을 정의하는 진정한 내부 의미가 없습니다.문서에서 컨텍스트에 적합한 객체가 무엇인지 알 수 없으며 그 반대의 경우도 마찬가지입니다

.

문서 객체 모델은 이름과 관계없이 어셈블리 객체 모델(COM)의 경쟁 상대가 아닙니다.COM은 CORBA와 마찬가지로 인터페이스와 대상을 언어와 독립적으로 지정하는 방식이다.

DOM 요소와의 상호 작용

주의해야 할 기타 요점

문서 대상 모델에서 문서는 나무와 매우 유사한 논리 구조를 가지고 있다.또는 더 정확히 말하면 하나의 숲처럼 여러 그루의 나무를 포함할 수 있다.그러나 DOM은 트리로 구현해야 할 문서와 객체 간의 관계를 어떤 방식으로든 구현해야 하는지 지정하지 않았습니다.다시 말하면 대상 모델은 프로그래밍 인터페이스의 논리 모델을 지정하고 이 논리 모델은 특정한 실현이 편리한 어떤 방식으로 실현할 수 있다.

DOM 구조 모델의 중요한 특징 중 하나는 구조 동일성이다. 두 개의 DOM 구현을 사용하여 같은 문서를 만들면 완전히 같은 대상과 관계를 가진 동일한 구조 모델을 만들 수 있다.

'문서 대상 모델'이라는 이름을 선택한 이유는 전통적인 대상을 대상으로 하는 디자인의 의미에서'대상 모델'을 사용했기 때문이다. 문서는 대상을 사용하여 모델링한 것이다.다시 말하면 DOM 그림의 노드는 데이터 구조를 나타내지 않고 함수와 표지가 있는 대상을 나타낸다.

브라우저에 형식이 잘못된 HTML이 있으면 DOM이 생성될 때 자동으로 수정됩니다.예를 들어, HTML 파일이 단일 단어인 "Hello"인 경우 브라우저가 DOM에 패키지하고 필요한 것<head>을 추가합니다.이와 유사하게 시계는 항상 <tbody>

DOM을 사용하는 브라우저 도구(나중에 설명 예정)는 일반적으로 텍스트의 시작/끝 부분에 공백을 표시하거나 태그

사이에 빈 텍스트 노드(줄 바꿈)를 표시하지 않습니다.

HTML에 내용이 있으면 주석을 포함하여 DOM 트리에 있어야 합니다.

DOM 수준:

리소스

https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction

https://www.w3schools.com/whatis/whatis_htmldom.asp

https://www.w3schools.com/js/js_htmldom.asp

w3.org/TR/WD-DOM/introduction.html

https://javascript.info/dom-nodes