집 >
기사 > 웹 프론트엔드 > Javascript 및 DHTML 예제 프로그래밍(튜토리얼) DOM 기본 및 기본 API_기본 지식
Javascript 및 DHTML 예제 프로그래밍(튜토리얼) DOM 기본 및 기본 API_기본 지식
WBOY원래의
2016-05-16 19:12:481288검색
1. DOM이란 무엇입니까? DOM이란 무엇입니까? DOM은 브라우저 프로그래밍(이 튜토리얼에서는 DHTML 프로그래밍이라고 할 수 있음)을 기반으로 하는 API 인터페이스 집합인 문서 개체 모델입니다. W3C에서 발행한 권장 표준입니다. 브라우저마다 약간의 차이가 있는데 그 중 Mozilla의 브라우저가 가장 표준에 가깝습니다. Simple Javascript를 DOM과 결합하여 아름다운 효과를 만들어 WEB에 적용해야 한다는 점은 다른 언어와 거의 동일합니다. /C에는 라이브러리 지원이 필요합니다. 그렇지 않으면 구문을 연구하면 됩니다. 따라서 WEB 또는 RIA 애플리케이션에 Javascript를 적용하려면 먼저 DOM에 대해 어느 정도 이해해야 합니다. DHTML은 본질적으로 DOM 트리를 작동하는 것이기 때문입니다. . 나중에 프로그래밍할 때 DHTML.chm 매뉴얼을 가져오시면 좋겠습니다. Gecko와 호환되어야 한다면 API가 너무 많기 때문에 Gecko DOM 매뉴얼도 가져가고 싶습니다. 인터페이스를 알면 이 매뉴얼도 볼 수 있습니다
브라우저가 DOM을 지원하는지 테스트하고 싶다면 간단한 문장으로 판단하면 됩니다
2 . DOM 트리 참고: DOM 트리의 루트는 문서 루트로 통합됩니다. DOM은 트리 구조이므로 자연스럽게 다음과 같은 관계를 갖습니다.
루트 노드(문서)
상위 노드(parentNode)
하위 노드(childNodes)
Brother 노드 Brother 노드 (sibling)(sibling)
예:
웹페이지의 HTML이 다음과 같다고 가정하자
never-online의 웹사이트
DHTML과 자바스크립트 프로그래밍 튜토리얼
트리의 개념을 참고하여 HTML 문서의 DOM 트리를 그려봅니다. 구조:
html
head
div title
text text
아이콘을 보면 html에는 두 개의 하위 노드가 있고 html은 이 두 하위 노드의 상위 노드입니다.
헤드에는 노드 제목이 있고 제목 아래에 텍스트 노드가 있습니다
아래에 노드 div가 있습니다. doby, 그리고 div 노드 아래에 텍스트가 있습니다
3. DOM 트리 조작 처음에 언급했듯이 DHTML의 본질은 DOM 트리를 조작하는 것입니다. 그것을 운영하는 방법? 위 HTML 문서에서 div 노드의 텍스트를 변경하고 싶다면 어떻게 해야 할까요? [코드]
never-online 웹사이트
<script> <BR>var isSupportDOM = !!document.getElementById; //两个取反,这已经在上节中说过了,意思是强制转型 <BR>alert("你的浏览器 " +(isSupportDOM?"":"不")+ "支持 DOM!"); <BR></script>튜토리얼 DHTML 및 자바스크립트 프로그래밍<script> <BR> function changedivText (strText) { <BR> var nodeRoot = document; //这个是根结点 <BR> var nodeHTML = nodeRoot.childNodes[0]; //这个是html结点 <BR> var nodeBody = nodeHTML.childNodes[1]; //body结点 <BR> var nodeDiv = nodeBody.childNodes[0]; //DIV结点 <BR> var nodeText = nodeDiv.childNodes[0];//文本结点' <BR> nodeText.data = strText; //文本节点有data这个属性,因此我们可以改变这个属性,也就成功的操作了DOM树中的一个结点了 <BR> } <BR> </script>