首页 web前端 js教程 Javascript & DHTML 实例编程(教程)DOM基础和基本API_基础知识

Javascript & DHTML 实例编程(教程)DOM基础和基本API_基础知识

May 16, 2016 pm 07:12 PM
dhtml javascript

一、什么是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> <BR>var isSupportDOM = !!document.getElementById; //两个取反,这已经在上节中说过了,意思是强制转型 <BR>alert("你的浏览器 " +(isSupportDOM?"":"不")+ "支持 DOM!"); <BR></script>

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

根结点(document)

  父结点(parentNode)

    子结点(childNodes)

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

例子:

假设网页的HTML如下


  


    never-online's website
  
  
    
tutorial of DHTML and javascript programming

  

我们参照树的概念,画出该HTML文档结构的DOM树:

           html

      body       head

    div          title

  文本              文本

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

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

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

三、操作DOM树
开篇已经说过,DHTML本质就是操作DOM树。如何操作它呢?
假设我要改变上面HTML文档中div结点的文本,如何做?[code]
  
    never-online's website
    <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>
  
  
    
tutorial of DHTML and javascript programming

    
  


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


  
    never-online's website
    <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为例,我们就可以把上面所写的代码简化一下了,示例如下:


  
    never-online's website
    <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。这个的原理示例我就不写了,可以作为一个作业,大家可以写写。这里写一些具体应用。如上例,我们还可以这样写。


  
    never-online's website
    <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。


  
    never-online's website
    <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标签内容(包括自身),这样会更容易看到效果。



  
    never-online's website
    <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。示例


  
    never-online's website
    <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),这个就是语法,下面看示例。


  
    never-online's website
    <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 
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

如何使用WebSocket和JavaScript实现在线语音识别系统 如何使用WebSocket和JavaScript实现在线语音识别系统 Dec 17, 2023 pm 02:54 PM

如何使用WebSocket和JavaScript实现在线语音识别系统引言:随着科技的不断发展,语音识别技术已经成为了人工智能领域的重要组成部分。而基于WebSocket和JavaScript实现的在线语音识别系统,具备了低延迟、实时性和跨平台的特点,成为了一种被广泛应用的解决方案。本文将介绍如何使用WebSocket和JavaScript来实现在线语音识别系

WebSocket与JavaScript:实现实时监控系统的关键技术 WebSocket与JavaScript:实现实时监控系统的关键技术 Dec 17, 2023 pm 05:30 PM

WebSocket与JavaScript:实现实时监控系统的关键技术引言:随着互联网技术的快速发展,实时监控系统在各个领域中得到了广泛的应用。而实现实时监控的关键技术之一就是WebSocket与JavaScript的结合使用。本文将介绍WebSocket与JavaScript在实时监控系统中的应用,并给出代码示例,详细解释其实现原理。一、WebSocket技

如何利用JavaScript和WebSocket实现实时在线点餐系统 如何利用JavaScript和WebSocket实现实时在线点餐系统 Dec 17, 2023 pm 12:09 PM

如何利用JavaScript和WebSocket实现实时在线点餐系统介绍:随着互联网的普及和技术的进步,越来越多的餐厅开始提供在线点餐服务。为了实现实时在线点餐系统,我们可以利用JavaScript和WebSocket技术。WebSocket是一种基于TCP协议的全双工通信协议,可以实现客户端与服务器的实时双向通信。在实时在线点餐系统中,当用户选择菜品并下单

如何使用WebSocket和JavaScript实现在线预约系统 如何使用WebSocket和JavaScript实现在线预约系统 Dec 17, 2023 am 09:39 AM

如何使用WebSocket和JavaScript实现在线预约系统在当今数字化的时代,越来越多的业务和服务都需要提供在线预约功能。而实现一个高效、实时的在线预约系统是至关重要的。本文将介绍如何使用WebSocket和JavaScript来实现一个在线预约系统,并提供具体的代码示例。一、什么是WebSocketWebSocket是一种在单个TCP连接上进行全双工

JavaScript和WebSocket:打造高效的实时天气预报系统 JavaScript和WebSocket:打造高效的实时天气预报系统 Dec 17, 2023 pm 05:13 PM

JavaScript和WebSocket:打造高效的实时天气预报系统引言:如今,天气预报的准确性对于日常生活以及决策制定具有重要意义。随着技术的发展,我们可以通过实时获取天气数据来提供更准确可靠的天气预报。在本文中,我们将学习如何使用JavaScript和WebSocket技术,来构建一个高效的实时天气预报系统。本文将通过具体的代码示例来展示实现的过程。We

简易JavaScript教程:获取HTTP状态码的方法 简易JavaScript教程:获取HTTP状态码的方法 Jan 05, 2024 pm 06:08 PM

JavaScript教程:如何获取HTTP状态码,需要具体代码示例前言:在Web开发中,经常会涉及到与服务器进行数据交互的场景。在与服务器进行通信时,我们经常需要获取返回的HTTP状态码来判断操作是否成功,根据不同的状态码来进行相应的处理。本篇文章将教你如何使用JavaScript获取HTTP状态码,并提供一些实用的代码示例。使用XMLHttpRequest

javascript中如何使用insertBefore javascript中如何使用insertBefore Nov 24, 2023 am 11:56 AM

用法:在JavaScript中,insertBefore()方法用于在DOM树中插入一个新的节点。这个方法需要两个参数:要插入的新节点和参考节点(即新节点将要被插入的位置的节点)。

JavaScript和WebSocket:打造高效的实时图像处理系统 JavaScript和WebSocket:打造高效的实时图像处理系统 Dec 17, 2023 am 08:41 AM

JavaScript是一种广泛应用于Web开发的编程语言,而WebSocket则是一种用于实时通信的网络协议。结合二者的强大功能,我们可以打造一个高效的实时图像处理系统。本文将介绍如何利用JavaScript和WebSocket来实现这个系统,并提供具体的代码示例。首先,我们需要明确实时图像处理系统的需求和目标。假设我们有一个摄像头设备,可以采集实时的图像数

See all articles