`
wu00yu11
  • 浏览: 59664 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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结点的文本,如何做?
程序代码
<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>
[/htm]
3)、在元素处插入结点。object.insertBefore(oNewNode [, oChildNode]),oNewNode为一个我们创建的结点,oChildNode是可选的,为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");
      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>
分享到:
评论

相关推荐

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

    JavaScript 和 DHTML DOM 基础及API是Web开发中的核心概念,特别是对于动态网页设计而言。DOM(Document Object Model)是一种国际标准,由W3C(万维网联盟)制定,它为HTML和XML文档提供了一个结构化的表示,并定义...

    JavaScript & DHTML 开发Web应用指南

    JavaScript 和 DHTML 是 Web 应用程序开发中的两种关键技术,它们极大地丰富了用户的交互体验,使得网页不再只是静态的信息展示,而是转变为动态、交互式的应用平台。本指南将深入探讨这两种技术的核心概念、应用...

    JavaScript&DHTML&CSS中文版参考大全

    DHTML的核心是利用JavaScript操作DOM(Document Object Model),DOM是HTML和XML文档的结构表示,通过JavaScript可以对DOM树进行增删改查,进而改变页面内容、样式甚至行为。 CSS是用于描述HTML或XML(包括如SVG、...

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

    什么叫DOM,DOM是文档对象模型(Document Object Model,是基于浏览器编程(在本教程中,可以说就是DHTML编程)的一套API接口,W3C出台的推荐标准,每个浏览器都有一些细微的差别,其中以Mozilla的浏览器最与标准...

    DOM基础和基本API.txt

    ### DOM基础和基本API知识点详解 #### 一、什么是DOM? DOM(Document Object Model)是一种文档对象模型,它是W3C组织推荐的标准之一,用于表示和处理结构化的文档(如HTML或XML)。DOM提供了一种方式,使得程序...

    css2.0&DHTML&javascript帮助文档

    5. **Ajax**:虽然Ajax(异步JavaScript和XML)技术是在DHTML之后提出的,但它基于DHTML的基础,实现了页面局部更新,提升了用户体验。 【JavaScript】 JavaScript是一种广泛使用的解释型编程语言,主要用于Web...

    常用web开发手册css2/css3/jquery-api/javascript api/dom/html/j2ee-api/dhtml

    这个压缩包包含了Web开发中的重要手册,包括CSS2/CSS3、jQuery API、JavaScript API、DOM、HTML以及J2EE API和DHTML的相关资源,是开发者必备的参考资料。 **CSS2与CSS3** CSS(层叠样式表)用于定义网页的布局和...

    javascript+dhtml文档(4个)

    JavaScript 和 DHTML 是 web 开发中的重要技术,用于创建交互性和动态网页。在这个压缩包中包含的四个文档,很可能是关于这两个主题的详细教程或参考资料。 1. **DHTML(Dynamic HTML)**: DHTML 是一个综合术语...

    Spring+DHTML+js+java API大汇总

    在IT行业中,Spring、DHTML、JavaScript和Java是四个至关重要的技术领域,它们共同构建了现代Web应用程序的基础。本文将详细解析这些技术及其在API开发中的应用。 首先,Spring框架是Java企业级应用开发的核心工具...

    dhtml-html-css-javascript-dom帮助文档(.chm)五合一

    1. **DHTML**:介绍如何通过JavaScript和CSS来创建动态的、交互式的网页,包括事件处理、动画效果、表单控制等。 2. **HTML**:讲解HTML5的基本元素、属性和语法规则,包括新的HTML5标签、表单元素、多媒体支持等。...

    jxl、javascript、dhtml的api参考手册包

    本压缩包包含的资源是针对三种不同的技术——JXL、JavaScript和DHTML的API参考手册,这些手册对于开发者来说是极其宝贵的工具。 首先,让我们详细探讨JXL。JXL是一个Java库,用于读取、写入和修改Excel电子表格文件...

    dhtml和htmldom开发手册

    1. **DHTML基础**:介绍DHTML的基本概念,包括如何使用JavaScript与CSS实现页面动态性。 2. **HTML DOM详解**:详述DOM的结构,包括节点类型、遍历和操作DOM树的方法。 3. **事件处理**:讲解如何绑定和处理各种用户...

    javascript+css+dhtml api(chm版本)

    在JavaScript中,API包括DOM(文档对象模型)、BOM(浏览器对象模型)以及各种库和框架如jQuery、React、Vue等提供的功能。DOM允许开发者操作HTML和XML文档的结构,BOM则提供了与浏览器交互的能力,如窗口管理、导航...

    javaScript-DOM编程艺术

    JavaScript-DOM编程艺术是关于如何...总之,JavaScript-DOM编程艺术涵盖了JavaScript语言基础和DOM操作技巧,是网页动态化和交互设计的重要组成部分。通过学习这部分内容,开发者可以创建更加生动、用户友好的Web界面。

    DHTMl编程使用帮助文档(API)整理

    7. **JavaScript库和框架**:文档可能提及一些常用库如jQuery,或者现代前端框架如React、Vue、Angular,它们简化了DOM操作和页面交互。 8. **AJAX与异步通信**:介绍如何使用JavaScript进行异步数据请求,以更新...

    DHTML手册 DHTML_API.chm

    - JavaScript是DHTML的核心,它提供了事件处理、DOM操作和页面交互等功能。 - DHTML_API.chm中可能包含JavaScript语法、函数、对象和事件处理程序的详细信息,以及如何与HTML和CSS协同工作的示例。 4. **DOM...

    JavaScript+DHTML语法与范例详解词典.zip

    总的来说,这个“JavaScript+DHTML语法与范例详解词典”是一个全面的指南,旨在帮助读者从基础到实践,掌握JavaScript和DHTML的使用,从而提升web开发技能。通过学习,你可以创建更丰富、更具互动性的网页应用,提升...

    java JDK_API 、Junit4、JavaScript、DOM、DHTML、easyUI、CSS等项目开发帮助文档

    综上所述,这个压缩包涵盖了Java开发的基础(JDK_API)、单元测试(JUnit4)、网页客户端脚本(JavaScript)、网页动态化技术(DOM和DHTML)以及前端开发工具(EasyUI和CSS)。对于从事Java后端开发、网页开发或希望...

Global site tag (gtag.js) - Google Analytics