中国石凳联盟 登录注册

DOM模型下的动态网页

rockage··0 回复·345 浏览

发表回复

DOM-文档对象模型

DOM:Document Object Model 文档对象模型,是应用程序存取 XML 数据的接口。

其实DOM并没有想象中那么高深,Javascript对它有很好的支持。理论方面可以看看:

topicid=4708" target="_blank"
http://www.stoneren.com/bbs/topic.asp?bbsid=5topicid=4708


这篇翻译文章,写得相当好,如果完全没有接触过DOM(比如我),建议通读一遍。

另外还有一篇来自SUN公司网站的文章:


http://gceclub.sun.com.cn/staticcontent/html/webservices/web_services_tutorial/7/7.1.htm


也是相当的不错。

理论的东西不说,只举一个非常简单的例子,如何实现无刷新动态网页:

-----------------------------------------------------------------------------------------------------------------

function insertStr()
{

var tbody = document.createElement("tbody") //生成TBODY节点
var tr = document.createElement("tr") //TR元素节点

var td_http = document.createElement("td") // 生成TD元素节点
td_http.style.cssText = "font-family:宋体font-size:9ptcolor:#333399" //动态设置CSS属性

var text_http = document.createElement("a") //生成A元素节点
text_http.setAttribute("href",
http://www.stoneren.com
) //设置节点的超链接属性
var text_kkk = document.createTextNode("浏览 www.stoneren.com") //生成文字节点
text_http.appendChild(text_kkk) //将文字节点text_kkk加入到text_http中

td_name.appendChild(text_http) //将text_http塞进td_name
tr.appendChild(td_name) //再把td_name仍进tr
tbody.appendChild(tr) //将节点tr加入tbody中
var parNode = document.getElementById("product") //定位到 product table上
parNode.appendChild(tbody) //将节点tbody加入节点product尾部
}


BODY

Table border="1" Width=801 id="product"


(......事实上,代码将在这个位置表达......)



/TABLE

-----------------------------------------------------------------------------------------------------------------

代码看起来很长,实际上也没什么,回忆一下,在静态网页编程的时候,我们也需要这么做,

首先设定一个表,再设定TBODY,TR,TD,超链接方面,定义好链接地址,之后是这个链接的可视文本.............等等等等!

在这个例子里,利用DOM,我们只不过把这些操作程序化,自动化罢了。

但有一点很关键,正是凭借着程序能够完成这些操作,我们才能得以实现无刷新更新数据,在本例里,我们只需调用这段子程序,就可以不断地为Table增加行,而完全无需执行刷新或者提交动作。

我个人感觉所谓的Ajax,其实也就是DOM,XML,Javascript等等这些东西混成的一锅大杂烩。em6:em7:em8:em9:em10:em11:
点赞0 收藏
发表回复
发表回复