关闭

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

1645人阅读 评论(0) 收藏 举报

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

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:100402次
    • 积分:1381
    • 等级:
    • 排名:千里之外
    • 原创:32篇
    • 转载:2篇
    • 译文:0篇
    • 评论:17条
    文章分类
    最新评论