Javascript 및 DHTML 예제 프로그래밍(튜토리얼) DOM 기본 및 기본 API_기본 지식

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>
    
  


从上面的示例可以看出，我们可以用上面的这种方法操作DOM树上的任一节点。（注：1. 跨域除外，跨域通常是在操作frame上，简单的说，就是两个frame不属于同一域名。2.上面的操作为了演示，采用的方法是从根结点一直到文本结点的遍历，在DOM方法上，有更简洁的方法，这些以后会有更多示例加以说明，下文中也会有介绍）

三、DOM节点。
细心些的朋友也许发现了，在上面写的HTML代码时用与>包函起来的就是一个结点，事实上是这样的吗？答案是否定的。下面就是说说节点类型，否则在有的时候是会犯错误的。比如，你把上面的代码放到Mozilla firefox的浏览器里运行一下，就会知道了。
DOM中的结点类型比较多，这里写一些在HTML文档中（注：XML也是DOM树结构）常见的几种结点类型。

1、DOCUMENT_NODE
（document）文档根结点类型，该枚举型的值是9.

2、ELEMENT_NODE
（element）元素结点类型，该枚举型的值是1。上文中的html, body, div这些结点都是属于该类型。

3、TEXT_NODE
（text）文本结点类型，该枚举型的值是3。上文中的文本，如：tutorial of DHTML and javascript programming就是属于该类型。
（注：一个空格也就可能是一个文本结点）

通常更需要注意的是文本结点，有可能一个回车，一个空格都是文本结点。这一点以后会碰到，当然，我们也有办法处理，这里先不要急，以后也会说到的。

四、DOM常用的API

这些常用的API是要记下来的，当然在非IE的浏览器里也会有效，是符合w3c的。这些API在以后的编程中会常常用到。正如每个编程平台所提供的API一样，常用必须记下来，节省时间从而提高编程效率。只写几个最常用的，其它的API会在以后的示例中写出。由浅而深，从易到难嘛。

1、获取ELEMENT_NODE，元素节点
  1)、方法：document.getElementById(元素的Id)，返回值为元素的节点引用。可以假想一下这个API的原理：象我们上面所做的是遍历每个节点（从根到我们所需结点），这个API，也可以想成是从根遍历，查询每个结点（空白结点和空结点除外），并获取该结点的id是否为指定的ID，如果是的话，就返回这个结点（注：在JS中，数组和对象是引用类型），如果没有就返回空。我们可以写写这个代码，帮助我们理解document.getElementById。下面是一个简单遍历BODY中元素的示例。


  
    
    <script> <BR> function myGetElementById (id) { <BR> var nodeRoot = document; //这个是根结点 <BR> var nodeHTML = nodeRoot.childNodes[0]; //这个是html结点 <BR> var nodeBody = nodeHTML.childNodes[1]; //body结点 <BR> var bodyChild = nodeBody.childNodes; //body的孩子 <BR> for (var i=0; i<bodyChild.length; i++) { //简单的遍历（指body的孩子下的深度为1) <BR> if (bodyChild[i].id==id) return bodyChild[i]; <BR> }; <BR> return null; <BR> } <BR> function TestGetElementById (id) { <BR> var node = myGetElementById(id); <BR> if (node!=null) { <BR> alert("找到结点 "+id+"!"); <BR> alert(node.childNodes[0].data); <BR> } else { <BR> alert("没有找到结点 "+id+"."); <BR> } <BR> } <BR> </script>
  
  
    

    

tutorial of DHTML and javascript programming

    
  


  2)、属性：object.innerHTML，返回值：一个节点内的HTML值。该属性为可写属性。它虽然不是获取结点，但经常与获取结点相结合，所以我把它放在获取结点这一类，它的属性就类似于是纯文本节点属性中的data。以document.getElementById和object.innerHTML这两个API为例，我们就可以把上面所写的代码简化一下了，示例如下：


  
    
    <script> <BR> function changedivText (strText) { <BR> var node = document.getElementById("textNode"); <BR> node.innerHTML = strText; <BR> } <BR> </script>
  
  
    

tutorial of DHTML and javascript programming

    
  


  3)、方法：object.getElementsByTagName(标签的名字)，返回一个集合，该集合的把有元素都是有指定标签的元素。访问集合里的元素，可以用下标来访问。语法里的object，是指document（根）或者是一个ELEMENT_NODE。这个的原理示例我就不写了，可以作为一个作业，大家可以写写。这里写一些具体应用。如上例，我们还可以这样写。


  
    
    <script> <BR> function changedivText (strText) { <BR> var node = document.getElementsByTagName("DIV"); <BR> node[0].innerHTML = strText; <BR> } <BR> </script>
  
  
    

tutorial of DHTML and javascript programming

    
  

再取一个例子，注意，BODY下的结点深度为2。


  
    
    <script> <BR> function changedivText (strText) { <BR> var node = document.getElementById("nodeTest"); <BR> var myNode = node.getElementsByTagName("DIV"); <BR> myNode[0].innerHTML = strText; <BR> } <BR> </script>
  
  
    

      

tutorial of DHTML and javascript programming

      
    

  


二、动态创建与插入结点

  1)、创建结点对象。document.createElement(tagname)，tagname指的是一个标签，比如一个DIV，就是document.createElement("DIV")，它返回的是这个结点的引用。

  2)、在body的尾部插入结点用document.body.appendChild(object)，为了容易理解，下面这个示例，我用了IE专有的属性object.outerHTML，得到一个该元素的HTML标签内容（包括自身），这样会更容易看到效果。



  
    
    <script> <BR> function insertNode (strText) { <BR> alert("插入元素前的body HTML： " +document.body.outerHTML); <BR> var node = document.createElement("DIV"); <BR> node.innerHTML = strText; <BR> document.body.appendChild(node); <BR> alert("插入元素后的body HTML： " +document.body.outerHTML); <BR> } <BR> </script>
  
  
    

tutorial of DHTML and javascript programming

    
  


  3)、在元素处插入结点。object.insertBefore(oNewNode [, oChildNode])，oNewNode为一个我们创建的结点，oChildNode是可选的，为object下的一个子节点。同样的，为了看到效果，我也用了outerHTML。示例


  
    
    <script> <BR> function insertNode (strText) { <BR> alert("插入元素前的body HTML： " +document.body.outerHTML); <BR> var node = document.createElement("DIV"); <BR> var myNode = document.getElementById("textNode"); <BR> node.innerHTML = strText; <BR> document.body.insertBefore(node,myNode); <BR> alert("插入元素后的body HTML： " +document.body.outerHTML); <BR> } <BR> </script>
  
  
    

tutorial of DHTML and javascript programming

    
  


三、移除结点。
  1) object.parentNode.removeChild(oChildNode)，这个就是语法，下面看示例。


  
    
    <script> <BR> function insertNode (strText) { <BR> alert("插入元素前的body HTML： " +document.body.outerHTML); <BR> var node = document.createElement("DIV"); <BR> var myNode = document.getElementById("textNode"); <BR> node.innerHTML = strText; <BR> document.body.insertBefore(node,myNode); <BR> alert("插入元素后的body HTML： " +document.body.outerHTML); <BR> } <BR> function removeCreateNode() { <BR> alert("移除元素前的body HTML： " +document.body.outerHTML); <BR> var node = document.getElementById("textNode"); <BR> node.parentNode.removeChild(node); <BR> alert("移除元素前的body HTML： " +document.body.outerHTML); <BR> } <BR> </script>
  
  
    

tutorial of DHTML and javascript programming

    
    
  

这一节就先写到这里，下一节我们就可以用这几个简单的API做许多事情了，几个API就可以写出很多效果。:D