从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所做一切的只有改变节点属性、调用上面说的那些方法、响应事件。

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

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

DHTML、XHMLT、HTML的区别

Dhtml是在静态html的基础上综合和其它动态的技术而成的网页技术;DHTML=HTML+CSS+JavaScript+DOM HTML则是纯粹的静态网页技术 XHTML则是在HTML中...
  • u010874036
  • u010874036
  • 2016年08月19日 15:54
  • 687

Dhtml,html,xhtml的区别

Dhtml是在静态html的基础上综合和其它动态的技术而成的网页技术;DHTML=HTML+CSS+JAVASCRIPT+DOMHTML则是纯粹的静态网页技术XHTML则是在HTML中加入了xml的规...
  • cesium
  • cesium
  • 2007年03月28日 15:13
  • 5527

HTML速成

看了HTML孙鑫视频后,对HTML有了基本明确的掌握,梳理知识点对其进行一下总结。              首先我们要了解我们为什么要学习HTML,我们搞Web开发,不可避免要接触HTML。JSP也...
  • u013037201
  • u013037201
  • 2015年06月02日 10:28
  • 977

DHTML 大全

方法add向 areas, controlRange 或 options 集合中添加一个元素。add创建一个新的 namespace 对象并将其添加到集合中。addBehavior给元素附加一个行为。...
  • helanye
  • helanye
  • 2009年07月11日 22:45
  • 2658

什么是动态HTML——DHTML?动态HTML的主要功能

DHTML是Dynamic HTML的简称,中文译为“动态超文本标记语言”,主要用途是提**TML页面的交互性和可操作性。它是建立在传统HTML基础上的客户端动态技术,是一种技术的总称,它通过HTML...
  • renpinghao
  • renpinghao
  • 2011年12月04日 20:26
  • 1789

HTML、CSS、JavaScript网页制作从入门到精通

这大概是我第一次写博客吧,自从大一开始写代码,至今也有5年的光景了,很遗憾并没有养成写博客的习惯,一方面因为我平时很少有阶段性的总结,另一面也确实不知道该分享些什么。归根结底还是功夫不到家,没有一些让...
  • luchengbing0120
  • luchengbing0120
  • 2017年09月19日 19:42
  • 479

编写跨浏览器的DHTML应用程序

本文介绍了IE和Navigator两种浏览器对DHTML标准实现的差异,特别是如何编写Navigator中运行的DHTML程序。   DHTML(Dynamic HTML)是W3C组织提出的一种新的规...
  • jacob1
  • jacob1
  • 2005年02月17日 06:08
  • 875

DHTML动态样式的作用

DHTML 的动态样式的作用是() DHTML实现了网页从Web服务器下载后无需再经过服务的处理,而在浏览器中直接动态地更新网页的内容、排版样式和动画的功能。例如,当鼠标指针移到文章段落中时,段落能...
  • qq_27437967
  • qq_27437967
  • 2017年05月22日 23:30
  • 324

【从入门到放弃】WEB前端之HTML+CSS基础01

最近几年WEB 前端很是火热,各种框架更是层出不穷,这个博文是一个系列,从0开始,一步一步进阶,从初级静态页面布局,到JS/Jquery动态交互、最后迈向各种框架node bootstrap vue ...
  • yanwydxf
  • yanwydxf
  • 2017年07月03日 17:17
  • 370
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:从HTML到DHTML速成(跨浏览器)
举报原因:
原因补充:

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