从HTML到DHTML速成(跨浏览器)

原创 2007年09月13日 21:49:00

拿到DHTML手册、javaScript手册、CSS手册

网上到处有,最好是中文的

使用FireFoxFireBug插件

安装和启用

FireFox访问 https://addons.mozilla.org/en-US/firefox/addon/1843b  点击安装然后重启FireFox即安装上了。

点击【工具】菜单,点击【Firebug】子菜单,点击把【Disable Firebug】前面的对勾去掉后,FireFox底部右下方出现绿底色的对勾,点击即可打开或关闭FireBug

FireBug的用处

网页开发相关的任何事情,查看CSS,调试JS,查看HTML DOM结构,监控xmlHttp异步请求,查看所有HTTP请求。

HTML 在浏览器端被解释成DomTree

下面是个最简单的网页

<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN' 'http://www.w3.org/TR/html4/strict.dtd'>
<html>
    
<head>
    
</head>
    
<body>
        
<div>
            
<span>HTML文档是一颗
                
<target="_blank" href="http://yahoo.cn" linkto="yahoo"></a>
            
</span>
        
</div>
    
</body>
</html>

通过FireBug来看 可以清除的看到这个网页的Dom Tree

DHTML就是使用javaScript操作DOM对象提供的方法来动态的改变HTML

XMLHTML都是DOM标准的实现,而DHTML我们要做的就是访问这棵树,进而改变这棵树。下面介绍的所有方法,都适用于任意浏览器,都可以顾名思义,方法的详细介绍可以直接查手册。我之所以枯燥的罗列了一些方法,是因为我们进行所有Dom操作只需要这些方法就足够了,不需要再用别的。

DOM Tree中三种重要的节点

Element Node : nodeType=1  

元素节点 <a></a> <div></div>等等都是元素节点

Attibute Node : nodeType=2  

属性节点 <a href=”http://1.com”></a> href=”http://1.com”即是这个a的属性节点

Text Node : nodeType=3

文本节点 <a>text</a>中的“text”即是一个文本节点

注意:通过obj.nodeType得到的值就可以判断访问到的是哪种节点。

得到指定的元素节点oNode

document.getElementById(sid)

document.getElementsByName(sname)

document.getElementsByTagName(stagname)

注意:

       document是所有节点的父节点。

元素节点的ID要保持唯一切不变。

       节点name属性可以重复,但是在IEgetElementsByName对于DIV节点无效,所以不推荐使用。

从一个节点oNode出发访问相关元素或者文本节点:

oNode.firstChild();

oNode.lashChild();

oNode.previousSibling();

oNode.nextSibling();

oNode.childNodes();

oNode.parentNode();

注意:<div>x<a>y</a>z</div>这个HTML片段.,在FireFox下如果x处为空,也回被认为存在一个空的文本节点,所以在进行DomTree遍历时要根据nodeType判断,来确保找到想找的节点

访问节点oNode的属性节点

oNode.getAttribute(sName,);

oNode.setAttribute(sName,sValue);

JavaScript控制展现的三种方式

1、  使用document.write(sHTML) document.writeln(sHTML)

这个相当于PHPecho()

参数sHTML将被输出在该语句执行时的位置成为HTML的一部分。

注意:这个方法只可以在文档载入过程中使用。

2、  使用oNode.innerHTML = sHTML

改变oNode节点内部的innerHTML

注意:

IE下无法改变,<table><tbody><thead><tfoot><tr>这些节点的innerHTML,只能改变<td>innerHTML

        innerHTMLDOM标准的方法,但是FireFox IE等所有浏览器都支持,但innerText,outerHTML,outerText就只有IE才支持,所以不要使用。

3、重头戏,使用Dom方法

创建、复制元素或文本节点:

var newNode = document.createElement(sTag)

var newNode = document.createTextNode([sText])

var newNode = oNode.cloneNode(true) true:复制包含子节点 false:不包含子节点

插入、替换元素或文本节点:

oNode.appendChild(newNode);

oNode.insertBefore(newNode,childNode);

oNode.replaceChild(newNode, childNode)

删除元素或文本节点

oNode.removeChild(childNode)

注意:

    使用第23种方法时,操作涉及的已有oNode必须已经完整载入后才可以,比如

<div id=’t’><script>document.getElementById(‘t’)</script></div>div元素没有闭合时就访问这个div是要严格禁止的。

    使用第3种方法创建<table>时不能把<tr>直接作为<table>的子节点,必须加一层<tbody> <thead>或者<tfoot>,否则显示不出来

    针对属性节点,增加和修改都使用oNode.setAttribute()方法即可,删除没什么意义

 

执行入口

我们已经知道了如何操作树,这些动作执行主要有两个入口:页面载入过程和事件驱动

在页面载入时在JavaScript中直接写的可执行代码会在页面载入的过程中执行

页面载入后可以通过对页面事件的响应来驱动JavaScript方法的执行

关于跨浏览器事件,有兴趣可以看:http://blog.csdn.net/lenel/archive/2007/07/25/1707520.aspx

 

小结

通过上面的这些介绍我们可以做的是:

l         得到指定节点

l         从指定节点出发访问其他节点

l         针对指定节点增加删除修改其子节点

从一颗树的角度来看,我们能做到的操作基本涵盖了所有。

 

善用手册,善用FireBug

上面介绍的是DHTML的骨架,很简单,就是操作一个树。针对特定的节点,所有的内置属性、方法、事件、样式等等都能在手册查到,按手册的指引使用即可。

经过一定的开发你会发现,DHTML所做一切的只有改变节点属性、调用上面说的那些方法、响应事件。

DHTML【5】--HTML

今天将介绍HTML的一些零碎知识,当然这些也很重要了,下面就一一介绍,虽然零碎,但是你以后肯定都会用得上,本来学习就是一点点的积累吗。       1.Select标签     Select标签...
  • jhq0113
  • jhq0113
  • 2013年08月03日 22:37
  • 1092

DHTML【2】--HTML

通过题目,大家已经明确知道,从这一节开始介绍DHTML中的最基础的部分HTML,对于HTML等概念上一节已经做了概述,这一节不再赘余。在学习HTML之前,先告诉大家一个好消息,HTML不难,比C++、...
  • jhq0113
  • jhq0113
  • 2013年07月30日 22:40
  • 1051

html, xhtml, dhtml, shtml, jhtml简介

XHTML(Extensible HyperText Markup Language)可扩展超文本标记语言,HTML是一种基本的WEB网页设计语言,XHTML是一个基于XML的置标语言,看起来与HTM...

DHTML【4】--HTML

按照顺序,本节该介绍Dl标签了,在介绍Dl标签之前,我们必须要做的就是了解Dl标签是做什么用的,有什么用处,知道需求之后我们才能够更好的利用这个标签,什么样的程序算是好程序呢?只有用户觉得好的程序才是...
  • jhq0113
  • jhq0113
  • 2013年08月01日 15:03
  • 973

xml xhtml html dhtml的区别

====================================================== 注:本文源代码点此下载 =============================...

怎么区别htm_html_dhtml_xhtml_shtm_shtml_ASP_JSP_PHP ?

.htm.html.dhtml.xhtml.shtm.shtml有什么联系和区别?ASP、JSP、PHP又有什么区别?我一直稀里糊涂的。   作为网络编辑,我对技术性的东西了解不多(很多工具我只...
  • gtydcd
  • gtydcd
  • 2011年09月26日 11:59
  • 787

web基础之认识动态HTML(DHTML)

动态HTML(DHTML) 动态HTML(DHTML)不是一项单独一向技术,而是一组协同工作的的技术,用来在网页下载完成后对其进行改变。这些技术允许网页响应用户的行为。使用的技术包括:DOM(文档对...

关于htm和html,shtm与shtml,dhtml,xhtml之间的定义与区别

====================================================== 注:本文源代码点此下载 =============================...

xhtml,xml,html,和dhtml的关系和区别

XHTML产生的原因,一方面是为了和未来的XML大规模的应用接轨,一方面还要兼容目前的数以万计的用HTML编写的网页以及他们的设计者,开发者相兼容,于是便出现了这个东西。以HTML编写的网页中,标记使...

DHTMl案例(简称动态网页)--html、css、javascript、div技术的结合

CreateTable 创建表格 table{ border:#0099FF 1px solid; width:600px; border-collapse:collapse;...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:从HTML到DHTML速成(跨浏览器)
举报原因:
原因补充:

(最多只允许输入30个字)