JavaScript를 사용하면 전체 HTML 문서를 재구성 할 수 있습니다. 페이지의 항목을 추가, 제거, 변경 또는 재구성 할 수 있습니다. 페이지의 무언가를 변경하려면 JavaScript는 HTML 문서의 모든 요소 입구에 액세스해야합니다. 이 입구는 HTML 요소의 메소드 및 속성과 함께 추가, 이동, 변경 또는 제거를 문서 개체 모델 (DOM)에 의해 얻습니다. 1998 년 W3C는 첫 번째 레벨 DOM 사양을 발표했습니다. 이 사양을 사용하면 HTML 페이지에서 각 개별 요소의 액세스 및 작동이 가능합니다. 모든 브라우저는이 표준을 실행하므로 DOM의 호환성을 찾기가 거의 어렵습니다. JavaScript에서 DOM을 사용하여 HTML, XHTML 및 XML 문서를 읽고 변경할 수 있습니다.
DOM은 다른 부품 (코어, XML, HTML) 및 레벨 (DOM 레벨 1/2/3)으로 나뉩니다.핵심 Domom
구조화 된 문서 개체에 대한 표준 세트 정의
XML DOM
XML 문서의 표준 세트를 정의하십시오
HTML DOM
HTML 문서의 표준 세트를 정의하십시오.
마디DOM에 따르면 HTML 문서의 각 구성 요소는 노드입니다.
Dom은 다음과 같이 제공됩니다.
노드는 서로 계층 적 관계를 맺고 있습니다. HTML 문서의 모든 노드는 문서 트리 (또는 노드 트리)를 형성합니다. HTML 문서의 각 요소, 속성, 텍스트 등은 트리의 노드를 나타냅니다. 트리는 문서 노드에서 시작하여 트리의 가장 낮은 레벨의 모든 텍스트 노드가 어디에나있을 때까지 분기를 계속 확장합니다.
다음 그림은 문서 트리 (노드 트리)를 보여줍니다.
문서 트리 (노드 수)다음 HTML 문서를 참조하십시오.
html; "> <html> <head> <title> dom 튜토리얼 </title> </head> <hod> <h1> dom Lesson One </h1> <p> Hello World! </p> </body> </html>
위의 모든 노드는 서로 관계가 있습니다. 문서 노드를 제외한 각 노드에는 부모 노드가 있습니다. 예를 들어 <head> 및 <body>의 부모 노드는 <html> 노드이며 텍스트 노드 Hello World의 부모 노드는 <p> 노드입니다. 대부분의 요소 노드에는 하위 노드가 있습니다. 예를 들어, <head> 노드에는 <title> 노드가 있습니다. <title> 서브 노드 : 텍스트 노드 DOM 튜토리얼도 있습니다. 노드가 동일한 상위 노드를 공유하면 동일한 생성 (동일한 노드)입니다. 예를 들어, <H1> 및 <P>는 부모 노드가 <hod> 노드이기 때문에 동료입니다. 노드는 또한 자손을 가질 수 있습니다. 예를 들어, 모든 텍스트 노드는 <html> 노드의 자손이며 첫 번째 텍스트 노드는 <head> 노드의 자손입니다. 노드는 또한 조상을 가질 수 있습니다. 조상은 노드의 상위 노드 또는 부모 노드의 상위 노드 등입니다. 예를 들어, 모든 텍스트 노드는 <html> 노드를 선행 노드로 사용할 수 있습니다.