Javascript & DHTML 实例编程(教程)DOM基础和基本API


Posted in Javascript onJune 02, 2007

一、什么是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 

Javascript 相关文章推荐
javascript 简练的几个函数
Aug 29 Javascript
JS中不为人知的五种声明Number的方式简要概述
Feb 22 Javascript
javascript搜索框点击文字消失失焦时文本出现
Sep 18 Javascript
JavaScript弹出新窗口后向父窗口输出内容的方法
Apr 06 Javascript
PHP+jQuery实现随意拖动层并即时保存拖动位置
Apr 30 Javascript
angularjs 源码解析之scope
Aug 22 Javascript
jquery无法为动态生成的元素添加点击事件的解决方法(推荐)
Dec 26 Javascript
JS实现闭包中的沙箱模式示例
Sep 07 Javascript
node简单实现一个更改头像功能的示例
Dec 29 Javascript
基于vue写一个全局Message组件的实现
Aug 15 Javascript
在Echarts图中给坐标轴加一个标识线markLine
Jul 20 Javascript
javascript 数组(list)添加/删除的实现
Dec 17 Javascript
Javascript &amp; DHTML 实例编程(教程)基础知识
Jun 02 #Javascript
把JS与CSS写在同一个文件里的书写方法
Jun 02 #Javascript
JavaScript 不只是脚本
May 30 #Javascript
JCalendar 日历控件 v1.0 beta[兼容IE&amp;Firefox] 有文档和例子
May 30 #Javascript
[原创]站长必须要知道的javascript广告代码
May 30 #Javascript
JSON 学习之完全手册 图文
May 29 #Javascript
Highslide.js是一款基于js实现的网页中图片展示插件
Mar 30 #Javascript
You might like
PHP生成唯一订单号
2015/07/05 PHP
PHP版本常用的排序算法汇总
2015/12/20 PHP
Smarty环境配置与使用入门教程
2016/05/11 PHP
自动更新作用
2006/10/08 Javascript
js获取日期:昨天今天和明天、后天
2014/06/11 Javascript
详解ElementUI之表单验证、数据绑定、路由跳转
2017/06/21 Javascript
vue项目如何刷新当前页面的方法
2018/05/18 Javascript
Js中将Long转换成日期格式的实现方法
2018/06/05 Javascript
Puppet的一些技巧
2018/09/17 Javascript
对angularjs框架下controller间的传值方法详解
2018/10/08 Javascript
jQuery实现为table表格动态添加或删除tr功能示例
2019/02/19 jQuery
Vue filter 过滤当前时间 实现实时更新效果
2019/12/20 Javascript
JavaScript实现简单动态表格
2020/12/02 Javascript
js实现碰撞检测
2021/01/29 Javascript
[01:23:45]DOTA2-DPC中国联赛 正赛 CDEC vs Dragon BO3 第一场 1月22日
2021/03/11 DOTA
python多线程threading.Lock锁用法实例
2014/11/01 Python
Python+Opencv识别两张相似图片
2020/03/23 Python
Python下利用BeautifulSoup解析HTML的实现
2020/01/17 Python
python:目标检测模型预测准确度计算方式(基于IoU)
2020/01/18 Python
详解python 降级到3.6终极解决方案
2020/02/06 Python
如何理解python对象
2020/06/21 Python
Python+Selenium实现自动化的环境搭建的步骤(图文)
2020/09/01 Python
HTML5 在canvas中绘制文本附效果图
2014/06/23 HTML / CSS
美国最大和最受信任的二手轮胎商店:Bestusedtires.com
2020/06/02 全球购物
Chupi官网:在爱尔兰手工制作的订婚、结婚戒指和精美珠宝
2020/09/28 全球购物
Servlet的生命周期
2013/08/25 面试题
大学生学习生活的自我评价
2013/11/01 职场文书
《我要的是葫芦》教学反思
2014/02/23 职场文书
开学典礼主持词
2014/03/19 职场文书
团日活动总结书
2014/05/08 职场文书
房产销售独家委托书范本
2014/10/01 职场文书
2014年车间主任工作总结
2014/12/10 职场文书
丧事主持词
2015/07/02 职场文书
启迪人心的励志语录:脾气永远不要大于本事
2020/01/02 职场文书
Vue详细的入门笔记
2021/05/10 Vue.js
redis调用二维码时的不断刷新排查分析
2022/04/01 Redis