Javascript & DHTML 实例编程（教程）DOM基础和基本API

一、什么是DOM？
什么叫DOM，DOM是文档对象模型(Document Object Model，是基于浏览器编程（在本教程中，可以说就是DHTML编程）的一套API接口，W3C出台的推荐标准，每个浏览器都有一些细微的差别，其中以Mozilla的浏览器最与标准接近。单纯的Javascript要结合DOM才能做DHTML编程，才能做出漂亮的效果、应用于WEB。这点几乎与其它的语言无异，正如C/C++需要库支持是一样的道理。否则就是单纯的在语法上做研究了。因此，必须要对DOM有一定的认识，才能把Javascript应用于WEB，或你的RIA应用当中，因为DHTML本质上就是操作DOM树。
以后的编程当中，希望你能够把DHTML.chm这本手册也拿上，如果你需要兼容gecko，把gecko的DOM手册也带上。因为API太多，想不起来的接口还可以查这本手册。

如果你要测试浏览器是否是支持DOM的，简单的一句就可以判断

<script>
var isSupportDOM = !!document.getElementById; //两个取反，这已经在上节中说过了，意思是强制转型
alert("你的浏览器 " +(isSupportDOM?"":"不")+ "支持 DOM！");
</script>

二、DOM树
要注意：DOM树的根统一为文档根—document，DOM既然是树状结构，那么他们自然有如下的几种关系:

根结点(document)

父结点(parentNode)

子结点(childNodes)

兄弟结点  兄弟结点
      (sibling)  (sibling)

例子：

假设网页的HTML如下

<html>
  <head>
    <title>never-online's website</title>
  </head>
  <body>
    <div>tutorial of DHTML and javascript programming</div>
  </body>
</html>
我们参照树的概念，画出该HTML文档结构的DOM树：

html

body       head

div          title

文本              文本

从上面的图示可以看出
html有两个子结点，而html就是这两个子节点的父结点

head有节点title，title下有一个文本节点

doby下有节点div，div下有一个文本节点

三、操作DOM树
开篇已经说过，DHTML本质就是操作DOM树。如何操作它呢？
假设我要改变上面HTML文档中div结点的文本，如何做？[code]<html>
  <head>
    <title>never-online's website</title>
    <script>
    function changedivText (strText) {
      var nodeRoot = document; //这个是根结点
      var nodeHTML = nodeRoot.childNodes[0]; //这个是html结点
      var nodeBody = nodeHTML.childNodes[1]; //body结点
      var nodeDiv = nodeBody.childNodes[0]; //DIV结点
      var nodeText = nodeDiv.childNodes[0];//文本结点'
      nodeText.data = strText; //文本节点有data这个属性，因此我们可以改变这个属性，也就成功的操作了DOM树中的一个结点了
    }
    </script>
  </head>
  <body>
    <div>tutorial of DHTML and javascript programming</div>
    <input onclick="changedivText('change?')" type="button" value="change"/>
  </body>
</html>

从上面的示例可以看出，我们可以用上面的这种方法操作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中元素的示例。

<html>
  <head>
    <title>never-online's website</title>
    <script>
    function myGetElementById (id) {
      var nodeRoot = document; //这个是根结点
      var nodeHTML = nodeRoot.childNodes[0]; //这个是html结点
      var nodeBody = nodeHTML.childNodes[1]; //body结点
      var bodyChild = nodeBody.childNodes; //body的孩子
      for (var i=0; i<bodyChild.length; i++) { //简单的遍历（指body的孩子下的深度为1)
        if (bodyChild[i].id==id) return bodyChild[i];
      };
      return null;
    }
    function TestGetElementById (id) {
      var node = myGetElementById(id);
      if (node!=null) {
        alert("找到结点 "+id+"!");
        alert(node.childNodes[0].data);
      } else {
        alert("没有找到结点 "+id+".");
      }
    }
    </script>
  </head>
  <body>
    <div id="aTestNode"></div>
    <div id="textNode">tutorial of DHTML and javascript programming</div>
    <input onclick="TestGetElementById('textNode')" type="button" value="change"/>
  </body>
</html>

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

<html>
  <head>
    <title>never-online's website</title>
    <script>
    function changedivText (strText) {
      var node = document.getElementById("textNode");
      node.innerHTML = strText;
    }
    </script>
  </head>
  <body>
    <div id="textNode">tutorial of DHTML and javascript programming</div>
    <input onclick="changedivText('change?')" type="button" value="change"/>
  </body>
</html>

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

<html>
  <head>
    <title>never-online's website</title>
    <script>
    function changedivText (strText) {
      var node = document.getElementsByTagName("DIV");
      node[0].innerHTML = strText;
    }
    </script>
  </head>
  <body>
    <div>tutorial of DHTML and javascript programming</div>
    <input onclick="changedivText('change?')" type="button" value="change"/>
  </body>
</html>
再取一个例子，注意，BODY下的结点深度为2。

<html>
  <head>
    <title>never-online's website</title>
    <script>
    function changedivText (strText) {
      var node = document.getElementById("nodeTest");
      var myNode = node.getElementsByTagName("DIV");
      myNode[0].innerHTML = strText;
    }
    </script>
  </head>
  <body>
    <div id="nodeTest">
      <div>tutorial of DHTML and javascript programming</div>
      <input onclick="changedivText('change?')" type="button" value="change"/>
    </div>
  </body>
</html>

二、动态创建与插入结点

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

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

<html>
  <head>
    <title>never-online's website</title>
    <script>
    function insertNode (strText) {
      alert("插入元素前的body HTML：\n" +document.body.outerHTML);
      var node = document.createElement("DIV");
      node.innerHTML = strText;
      document.body.appendChild(node);
      alert("插入元素后的body HTML：\n" +document.body.outerHTML);
    }
    </script>
  </head>
  <body>
    <div>tutorial of DHTML and javascript programming</div>
    <input onclick="insertNode('change?')" type="button" value="change"/>
  </body>
</html>

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

<html>
  <head>
    <title>never-online's website</title>
    <script>
    function insertNode (strText) {
      alert("插入元素前的body HTML：\n" +document.body.outerHTML);
      var node = document.createElement("DIV");
      var myNode = document.getElementById("textNode");
      node.innerHTML = strText;
      document.body.insertBefore(node,myNode);
      alert("插入元素后的body HTML：\n" +document.body.outerHTML);
    }
    </script>
  </head>
  <body>
    <div id="textNode">tutorial of DHTML and javascript programming</div>
    <input onclick="insertNode('change?')" type="button" value="change"/>
  </body>
</html>

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

<html>
  <head>
    <title>never-online's website</title>
    <script>
    function insertNode (strText) {
      alert("插入元素前的body HTML：\n" +document.body.outerHTML);
      var node = document.createElement("DIV");
      var myNode = document.getElementById("textNode");
      node.innerHTML = strText;
      document.body.insertBefore(node,myNode);
      alert("插入元素后的body HTML：\n" +document.body.outerHTML);
    }
    function removeCreateNode() {
      alert("移除元素前的body HTML：\n" +document.body.outerHTML);
      var node = document.getElementById("textNode");
      node.parentNode.removeChild(node);
      alert("移除元素前的body HTML：\n" +document.body.outerHTML);
    }
    </script>
  </head>
  <body>
    <div id="textNode">tutorial of DHTML and javascript programming</div>
    <input onclick="insertNode('change?')" type="button" value="insert"/>
    <input onclick="removeCreateNode()" type="button" value="remove"/>
  </body>
</html>
这一节就先写到这里，下一节我们就可以用这几个简单的API做许多事情了，几个API就可以写出很多效果。:D

赞 (0)

相关推荐

  • 使用js Math.random()函数生成n到m间的随机数字

    摘要: 本文讲解如何使用js生成n到m间的随机数字,主要目的是为后期的js生成验证码做准备. Math.random()函数返回0和1之间的伪随机数,可能为0,但总是小于1,[0,1) 生成n-m,包含n但不包含m的整数: 第一步算出 m-n的值,假设等于w 第二步Math.random()*w 第三步Math.random()*w+n 第四步parseInt(Math.random()*w+n, 10) 生成n-m,不包含n但包含m的整数:​ 第一步算出 m-n的值,假设等于w 第二步Math

  • javascript学习笔记（三）BOM和DOM详解

    javascript学习笔记（三）BOM和DOM详解

    js组成 我们都知道, javascript 有三部分构成,ECMAScript,DOM和BOM,根据宿主(浏览器)的不同,具体的表现形式也不尽相同,ie和其他的浏览器风格迥异. 1. DOM 是 W3C 的标准: [所有浏览器公共遵守的标准] 2. BOM 是 各个浏览器厂商根据 DOM 在各自浏览器上的实现;[表现为不同浏览器定义有差别,实现方式不同] 3. window 是 BOM 对象,而非 js 对象: DOM(文档对象模型)是 HTML 和 XML 的应用程序接口(API). BOM

  • NodeJS使用jQuery选择器操作DOM

    注* 这是一个两年多的"老"项目,可以让你在NodeJS中使用jQuery的选择器,像操作前端DOM一样操作后端的HTML/XML,在去除浏览器兼容相关代码后,比JSDOM的操作快8倍. 之前我们曾经提到JSDOM有严重的性能问题:   Debug调试Node.JS:我们是如何定位内存泄漏和无限循环的 cheerio 快速,灵活,在服务器端使用的jQuery. 简介 测试你的服务器端HTML: 复制代码 代码如下: var cheerio = require('cheerio'), $

  • javascript中html字符串转化为jquery dom对象的方法

    原html字符串如下: var text="<div id='overLay' style='width:50px;height:60px;background:url(imgs/back.png) left top no-repeat; position: absolute;'>" + "<img style='margin-left:4px;margin-top: 3px;' src='ima.png' width='43px' height='43px

  • Javascript & DHTML DOM基础和基本API第1/5页

    一.什么是DOM? 什么叫DOM,DOM是文档对象模型(Document Object Model,是基于浏览器编程(在本教程中,可以说就是DHTML编程)的一套API接口,W3C出台的推荐标准,每个浏览器都有一些细微的差别,其中以Mozilla的浏览器最与标准接近.单纯的Javascript要结合DOM才能做DHTML编程,才能做出漂亮的效果.应用于WEB.这点几乎与其它的语言无异,正如C/C++需要库支持是一样的道理.否则就是单纯的在语法上做研究了.因此,必须要对DOM有一定的认识,才能把J

  • 基于JavaScript操作DOM常用的API小结

    前言 DOM(Document Object Model)即文档对象模型,针对 HTML 和 XML 文档的 API(应用程序接口).DOM 描绘了一个层次化的节点树,运行开发人员添加.移除和修改页面的某一部分.DOM 脱胎于 Netscape 及微软公司创始的 DHTML(动态 HTML),但现在它已经成为表现和操作页面标记的真正跨平台.语言中立的方式. 阅读目录 基本概念 节点创建型api 页面修改型API 节点查询型API 节点关系型api 元素属性型api 元素样式型api 总结 文本整

  • Javascript & DHTML 实例编程（教程）（三）初级实例篇1—上传文件控件实例

    Javascript & DHTML 实例编程（教程）（三）初级实例篇1—上传文件控件实例

    效果DEMO:http://www.never-online.net/tutorial/js/upload/Javascript & DHTML 实例编程(教程)(三),初级实例篇-上传文件控件实例上章基本上把要交代的基本知识都说了一些,今天终于开始写代码了:D首先来做一个实例,批量上传的UI控件.以后一般做的示例也是以UI控件为主的.都是封装成Object或者用Function封装成"Class"类. 也许对于单单看前几章的朋友来说这个例子过于深奥了,但是不用担心,一步步来解

  • Javascript & DHTML 实例编程（教程）DOM基础和基本API

    一.什么是DOM? 什么叫DOM,DOM是文档对象模型(Document Object Model,是基于浏览器编程(在本教程中,可以说就是DHTML编程)的一套API接口,W3C出台的推荐标准,每个浏览器都有一些细微的差别,其中以Mozilla的浏览器最与标准接近.单纯的Javascript要结合DOM才能做DHTML编程,才能做出漂亮的效果.应用于WEB.这点几乎与其它的语言无异,正如C/C++需要库支持是一样的道理.否则就是单纯的在语法上做研究了.因此,必须要对DOM有一定的认识,才能把J

  • Javascript & DHTML 实例编程（教程）基础知识

    [ 2007-04-11 14:31:50 | Author: never-online ] 这一节首先请下载JScript.chm这本手册,无论新手老手,有一本手册是免不了的,特别是对于新手,如果你没有空翻犀牛书,那么这本手册将是你了解这门语言的首选.下面所讲的大多数,手册上可以没有提及,或提及很少的内容. 以下的教程都是针对你对上面所说的JScript.chm这本手册了解的基础上而写的,如果你还没有看过JScript.chm,建议你先下载,边看手册,边看教程. JS的语法与大多数类C的语言差

  • Javascript & DHTML 实例编程（教程）（四）初级实例篇2—动画

    Javascript & DHTML 实例编程（教程）（四）初级实例篇2—动画

    上篇说了动态创建结点和删除结点的例子,这一篇说一些如何用setInterval和setTimeout做简单的动画. 语法皆是window.setTimeout(fn, delay), window.setInterval(fn, delay) fn可以是一个函数名,也可以是一个执行的字符串,但要注意的是,如果fn是一个可以执行的字符串,且有参数,如window.setInterval("myFunction(obj)",1000)将可能抛出一个异常,这个时候,通常是你要传递一个对象参数

  • DOM基础及php读取xml内容操作的方法

    DOM基础及php读取xml内容操作的方法

    本文实例讲述了DOM基础及php读取xml内容操作的方法.分享给大家供大家参考.具体分析如下: DOM(Document Object Model):文档对象模型.核心思想是:把 xml文件看作是一个对象模型,然后通过对象的方式来操作 xml 文件. php对xml文档进行增删改查(curd)操作,具体分析如下: xml文档:class.xml 复制代码 代码如下: <?xml version="1.0" encoding="utf-8"?> <c

  • JavaScript学习笔记之DOM基础操作实例小结

    JavaScript学习笔记之DOM基础操作实例小结

    本文实例讲述了JavaScript DOM基础操作.分享给大家供大家参考,具体如下: 一.子节点 1.元素节点.文本节点 实例01 html <body> <ulid="ul1"> 文本节点1 <li></li> 文本节点2<li></li> 文本节点3<li></li> 文本节点4<li></li> 文本节点5<li></li> 文本节点6&

  • 基于javascript的异步编程实例详解

    基于javascript的异步编程实例详解

    本文实例讲述了基于javascript的异步编程.分享给大家供大家参考,具体如下: 异步函数这个术语有点名不副实,调用一个函数后,程序只在该函数返回后才能继续.JavaScript程序员如果称一个函数为异步的,其意思就是这个函数会导致将来再运行另一个函数,后者取自于事件队列.如果后面这个函数是作为参数传递给前者的,则称其为回调函数. callback 回调函数是异步编程最基本的方式. 采用这种方式,我们把同步操作变成了异步操作,主函数不会堵塞程序运行,相当于先执行程序的主要逻辑,将耗时的操作推迟

  • JavaScript之AOP编程实例

    本文实例讲述了JavaScript之AOP编程.分享给大家供大家参考.具体如下: /* // aop({options}); // By: adamchow2326@yahoo.com.au // Version: 1.0 // Simple aspect oriented programming module // support Aspect before, after and around // usage: aop({ context: myObject, // scope contex

  • 实现JavaScript的组成----BOM和DOM详解

    我们知道,一个完整的JavaScript的实现,需要由三部分组成:ECMAScript(核心),BOM(浏览器对象模型),DOM(文档对象模型). 今天主要学习BOM和DOM. BOM: BOM提供了很多对象,用来访问浏览器的功能,这些功能于网页内容无关(这些是DOM的事),目前,BOM已经被W3C搬入了HTML5规范中. window对象: BOM的core,表示浏览器的一个实例,它既是通过javascript访问浏览器窗口的一个接口,又是ECMAScript规定的Global对象,这意味着在

随机推荐