DOM(Document Object Model)이란 무엇입니까? document object model_DOM

D:document 문서 브라우저에 의해 로드된 페이지

DOM O:object 개체 페이지와 페이지의 모든 요소는 개체입니다.

M:module 모델 페이지의 요소 조직 형태

DOM은 W3C 조직에서 프로그램이나 스크립트가 문서의 콘텐츠, 스타일 및 구조에 동적으로 액세스하고 수정할 수 있는 플랫폼 독립적, 언어 독립적 API로 설계되었습니다.

DOM은 웹 브라우저의 운영 사양으로, JavaScript는 DOM의 도움으로 웹 표준 언어로서의 지위를 얻었으며 웹 분야에서 소위 "한 번 작성하면 어디서나 실행"이라는 목표를 달성했습니다.


DOM(문서 개체 모델)은 HTML 및 XML 문서용 프로그래밍 인터페이스입니다. 문서의 구조화된 표현을 제공하고 문서의 내용과 표현을 변경할 수 있습니다. 우리가 가장 우려하는 점은 DOM이 웹페이지를 스크립트 및 기타 프로그래밍 언어와 연결한다는 것입니다.

스크립트 개발자는 문서 개체의 속성, 메서드 및 이벤트를 통해 동적 웹 페이지 요소를 제어, 조작 및 생성할 수 있습니다. 각 웹 페이지 요소(HTML 태그)는 개체(개체, 소위 "개체"는 모국어로 "사물"을 의미합니다. 단어 개체는 일반적으로 대만에서 "개체"로 번역됨)에 해당합니다. 웹 페이지의 태그는 레이어별로 중첩되어 있으며 가장 바깥쪽 레이어는 입니다. 문서 개체 모델도 레이어별로 중첩되어 있지만 일반적으로 나무 모양으로 이해됩니다. 트리의 루트는 창 또는 문서 개체로, 가장 바깥쪽 레이블의 주변, 즉 전체 문서에 해당합니다. 나무의 뿌리 아래(나무는 일반적으로 유전적 가계도나 가계도처럼 거꾸로 그려집니다. 뿌리는 유일한 공통 조상입니다)에는 다음과 같은 자체 하위 개체도 있는 하위 수준 개체가 있습니다. 루트 객체를 제외한 모든 객체는 자신의 상위 객체를 가지며, 동일한 객체의 하위 객체 간의 관계는 형제애입니다.

'아버지, 아들, 형제'로 구성된 이 '동성 가계도' 프레임 구조에서는 각 웹페이지 요소를 정확하게 배치할 수 있습니다. 문서 개체 모델은 전체 웹 페이지를 이러한 트리 구조로 구성하며 트리 구조의 각 요소는 노드로 간주됩니다. JavaScript를 포함한 다양한 프로그래밍 언어는 문서 개체 모델을 통해 웹 페이지의 다양한 세부 사항에 액세스하고 변경할 수 있습니다.

W3C(World Wide Web Consortium)는 문서 개체 모델에 대한 일련의 표준을 개발했으며 더 많은 관련 표준을 개발하고 있습니다. 이러한 표준 중 일부를 지원하는 것 외에도 최신 브라우저는 W3C 표준이 공식화되기 전에 널리 사용되었던 일부 역사적 및 확립된 프로그래밍 인터페이스도 지원합니다. 즉, 오늘날 브라우저가 사용하는 기술의 역사는 복잡하고, 사람들이 일반적으로 사용하는 일부 DOM 기술에는 따라야 할 표준이 없습니다.

실용 중심 기술을 완전히 파악하기 위해 모든 일반적인 DOM(IE 브라우저에서 "다른" 일부 기술 포함)을 자세히 살펴보겠습니다.


DOM 및 JavaScript

QQ, MSN 및 이메일에서 자주 받는 "JavaScript 관련" 질문 중 95%는 실제로 DOM 문제에 관한 것입니다. 사람들은 습관적으로 DOM에 대해 이야기하는 것을 좋아하지 않습니다. JavaScript에 대해 이야기하거나 "Ajax"(지난 세기 말의 "DHTML"처럼 최근에 식어버린 한 때 유명했던 "개념")에 대해 이야기하는 것을 좋아하지 않습니다. 이러한 핫한 단어의 등장에 대해 저는 개인적으로 매우 기쁩니다. 매번 JavaScript 기술에 대한 사람들의 열정을 불러일으킬 것이기 때문입니다. 아마도 우리가 만들어 낼 수 있는 것은 무엇일까요... 의사 매쉬업(Pseudo-Mashup)은 어떨까요?

JavaScript를 사용하여 웹페이지에서 수행하는 모든 작업은 DOM을 통해 수행됩니다. DOM은 브라우저에 속하며 자바스크립트 언어 스펙에 명시된 핵심 내용이 아니기 때문에 자바스크립트 언어 참조 도움말 문서를 다운받아 확인해 보면 잘 맞는 document.write 메소드조차 찾아볼 수 없다. 여성과 어린이에게 알려져 있습니다.

다음 코드의 기능은 프롬프트 상자를 사용하여 웹 페이지의 모든 링크의 URL을 하나씩 표시하는 것입니다. 코드에서 빨간색으로 표시된 부분이 DOM입니다.

코드 복사 코드는 다음과 같습니다.

var 앵커태그 = document.getElementsByTagName("a ");
for (var i = 0; i {
alert("이 요소의 Href는 다음과 같습니다. "anchorTags[i].href "n") ;
}

이렇게 하면 핵심 JavaScript인 DOM이 무엇인지, 각각이 어떤 역할을 하는지 한눈에 알 수 있습니다.

var anchorTags =
anchorTags라는 JavaScript 변수를 생성합니다.

document.getElementsByTagName("a")
Document 인터페이스는 DOM1 Core 사양에 정의된 첫 번째 인터페이스이며 document는 Document 인터페이스를 구현하는 호스트 객체입니다. 문서는 웹페이지의 모든 것을 제어합니다.
DOM1 코어는 문서 인터페이스에 대한 getElementsByTagName() 메서드를 정의합니다. 이 메소드는 일치하는 매개변수 조건을 충족하는 모든 태그를 포함하여 문서에 나타나는 순서대로 정렬된 노드를 포함하는 DOM 특정 배열인 노드 목록(NodeList)을 반환합니다. 따라서 anchorTags 변수는 이제 노드 목록이 됩니다.

;
자바스크립트에서 세미콜론은 문장의 끝 기호입니다.

for (var i = 0; i 프로그래밍 언어의 일반적인 "for 루프"입니다. 루프 변수 i가 선언되고 AnchorTags 노드 목록의 각 노드가 하나씩 처리됩니다. . 이것은 또한 JavaScript 항목입니다.

anchorTags.length
DOM1 코어는 NodeList 인터페이스의 길이 속성을 정의하며, 이는 노드 목록에 포함된 노드 수입니다. JavaScript 배열에는 길이 속성도 있습니다.

i ) {
일반적인 JavaScript 변수 증가 작업입니다.

alert(
alert()는 메소드에 전달된 매개변수(문자열)를 표시하기 위해 프롬프트 상자를 표시하는 DOM 메소드입니다. 이것을 일반적으로 DOM 레벨 0(DOM 레벨 0)이라고 합니다. 또는 DOM0은 역사상 확립된 프로그래밍 인터페이스 중 하나입니다. DOM0은 "일부 브라우저에서 지원되는" 프로그래밍 인터페이스 세트입니다(실제로 일부 소프트웨어 취미에서만 DOM0를 지원하지 않는 브라우저가 시장에 없습니다). 🎜>
"이 a 요소의 Href는 다음과 같습니다. "
문자열 리터럴 및 문자열 링커입니다.

anchorTags[i].href
href는 정의된 HTMLAnchorElement 인터페이스의 속성입니다. DOM1 HTML 사양에서는 링크() 요소의 href 속성 값을 반환합니다. 여기서는 앵커태그[i]와 같은 사용법을 사용합니다. 이는 i번째 배열 항목에 액세스하는 구문과 동일합니다. JavaScript에서는 언어 중립적인 소위 "DOM 방식" 액세스(특정 언어에 관계 없음) 노드 목록의 항목에 액세스하는 방법은 NodeList 인터페이스에 정의된 item() 메서드(anchorTags)를 사용하는 것입니다. .item(1).href, 그러나 대부분의 JavaScript 구현에서는 이 간단한 배열형 구문을 사용할 수 있으며 이는 대부분의 사람들이 실제로 사용하는 것입니다.

"n"); 연쇄. 문자열 끝에 캐리지 리턴 문자를 추가합니다.

}
"for 루프"가 종료됩니다.