목차
DOM 트리를 이해하기 전에 먼저 API가 무엇인지 이해해야 합니다.
API _
1 API란 무엇인가
API는 프로그래밍 언어의 구조를 기반으로 하며, 복잡한 코드를 추상화하고 개발자가 원하는 특정 기능을 더 쉽게 완료할 수 있도록 하는 사전 정의된 기능입니다.
2 API는 무엇을 할 수 있나요?
(1) 일반적인 브라우저 API:
운영 문서화 API
문서를 조작하기 위한 API가 브라우저에 내장되어 있습니다. 가장 확실한 것은 HTML, CSS 조작, HTML 생성, 삭제, 수정 및 생성된 페이지에 새 스타일을 동적으로 적용할 수 있는 DOM(Document Object Model) API입니다. 아니면 페이지의 팝업 창을 모두 DOM으로 만드세요.
서버에서 데이터를 가져오는 API
그래픽 그리기 및 조작 등을 위한 API
(2) 일반적인 타사 API
트위터 API
Google 지도 API
(3) 직설적으로 말하면 API는 Bootstrap 프레임워크 및 기타 프레임워크와 유사하며 이미 목적을 작성해 두었으므로 이러한 작성된 내용을 사용하는 방법만 배우면 됩니다.
2. DOM 트리란 무엇입니까?
1 이제 먼저 정의를 내려보겠습니다.
문서 개체 모델(DOM)은 확장 가능 마크업 언어(HTML 또는 XML) 처리를 위해 W3C 조직에서 권장하는 표준 프로그래밍 인터페이스입니다.
W3C는 웹 페이지의 콘텐츠, 구조 및 스타일을 변경할 수 있는 일련의 DOM 인터페이스를 정의했습니다.
그렇긴 하지만, 여러분은 이 큰 텍스트 문자열의 마지막 문장 중 작은 부분만 이해할 수도 있습니다. 아, DOM은 웹페이지의 내용, 구조, 스타일을 변경하는 데 사용됩니다.
그렇다면 표준 프로그래밍 인터페이스란 정확히 무엇입니까? DOM이란 무엇입니까?
2 DOM이란 무엇인가
DOM(문서 개체 모델)은 HTML 및 XML 문서용 프로그래밍 인터페이스입니다. 이는 전체 문서의 구조화된 표현을 가능하게 하며 프로그램에서 이 구조에 액세스하고 문서의 구조, 스타일 및 내용을 변경하는 방법을 정의합니다. DOM은 문서를 노드와 개체(속성과 메서드를 포함하는 개체)의 구조화된 컬렉션으로 구문 분석합니다.
즉, 웹페이지를 스크립팅 또는 프로그래밍 언어와 연결합니다.
조작되고 생성되는 웹 페이지의 모든 속성, 메소드, 이벤트는 객체로 구성됩니다.
3 DOM과 자바스크립트
(1) 둘 사이의 관계: 둘은 두 개의 독립적인 개체이지만 JavaScript는 DOM에 저장된 콘텐츠에 액세스하고 조작할 수 있으며 대략적인 방정식으로 작성할 수도 있습니다.
API(웹 또는 XML 페이지) = DOM + JS(스크립팅 언어)
(2) 첫 번째 기사에서 두 사람은 독립적인 개체라고 말했는데, 이는 두 사람이 특정한 바인딩 관계를 갖고 있지 않지만 DOM 트리는 JS를 통해 액세스할 수 있으므로 예를 들어 Python도 DOM에 액세스할 수 있음을 의미합니다.
3 DOM에 대한 나의 이해
DOM：
세 개의 DOM 인터페이스
DOM 인터페이스를 통해 DOM의 작은 노드에 접근할 수 있으며, 인터페이스에서 제공하는 많은 속성과 메서드를 노드에서 사용할 수 있습니다.
DOM에서 일반적으로 사용되는 핵심 인터페이스 및 관계
위에서 언급했듯이 인터페이스에는 해당 속성과 메서드가 있습니다. 인터페이스마다 계층 관계도 다릅니다. 따라서 인터페이스에도 메서드와 속성이 상속됩니다. 자세한 아이콘은 다음과 같습니다.
EventTarget<----- 노드<------요소<-----문서
1 노드 인터페이스:
노드, 다양한 유형의 DOM API 객체가 이 인터페이스에서 상속됩니다. 이를 통해 다양한 유형의 객체를 유사한 방식으로 처리할 수 있습니다. 예: 동일한 메소드 세트를 상속하거나 동일한 방식으로 테스트합니다.
다음 인터페이스는 모두 Node에서 해당 메서드와 속성을 상속합니다.
Dcument，Element，EventTarget等
2 문서 인터페이스:
Document 인터페이스는 브라우저에 로드된 모든 웹 페이지를 나타내며 웹 페이지 콘텐츠, 즉 DOM 트리의 항목 역할을 합니다.
3 요소 인터페이스:
Element는 매우 다양한 기본 클래스이며 Document 개체 아래의 모든 개체는 이 클래스에서 상속됩니다.
4EventTarget 인터페이스:
EventTarget 인터페이스는 이벤트를 수신하고 리스너를 생성할 수 있는 객체로 구현됩니다.
요소와 해당 하위 요소, 문서 및 창이 가장 일반적인 이벤트 대상입니다.
4개 요약
API는 여러 프로그래밍 언어를 기반으로 구축된 보스로, 복잡한 코드를 추상화하고 개발자가 다양한 기능을 쉽게 구현할 수 있도록 도와주는 도구입니다. API에는 많은 하위 카테고리가 있으며, 그 중 하나는 JS를 통해 웹 페이지 요소에 액세스할 수 있는 DOM API입니다. 동시에 DOM API는 많은 인터페이스를 제공하며 인터페이스에는 웹 페이지의 스타일, 콘텐츠 및 구조를 수정하기 위한 많은 메서드와 속성이 있습니다.
글을 쓰다보니 쉽지 않은 글인데, 도움이 되셨다면 칭찬과 응원 부탁드리겠습니다.