初见Ajax——javascript访问DOM的三种访问方式
2012-04-01 15:17
357 查看
最近好啰嗦
最近在一间小公司实习,写一些小东西。小公司嘛,人们都说在小公司要什么都写的。果真是。前端,后台,无论是HTML,CSS,JavaScript还是XML,Java,都要自己全包了。还好前台的要求不高。写一些芝麻豆腐的东西还是不在话下的。但是整个项目下来估计还不止这些要写。而且我的经验当中,都没怎么关心过前端的东西,一直认为这是和我无关的东西,这次估计要悲剧了。所以找了一本书来看——《Ajax实战》。临时抱佛脚,临阵磨枪,也不能说是完全没有用处的。相比没怎么写过Java的人,我还是觉得写一些简单的Javascript对后台的帮助比我去写Java要快。而且交互上来说,Ajax也是必须的。我本人也讨厌老是要刷新整个页面,这太影响体验了。
Ajax,至于叫什么,大家随意吧。是人也好,是足球队也罢。。。
Ajax不是单一的技术,大家都知道,好吧,我啰嗦了。
Ajax设计的技术:Javascript,CSS,DOM,XMLHttpRequest对象。
Javascript和CSS,这两种技术,之前也写过,所以有所了解。一直觉得DOM很难理解,主要还是自己懒一直没有自己去看。XMLHttpRequest嘛,无非就是跟服务器打交道的东西。Request,请求嘛。
用Javascript改善用户体验。用CSS定义应用的外观。用DOM组织视图。使用XML技术异步加载数据。简单来说,Ajax就做了这些事情吧。
暂时只想说个Javascript操作CSS和DOM的例子,XML的事情以后再说吧。一步一步来。
一个简单的例子:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>Hello Ajax</title> <style type="text/css"> .news{ color:#FF0000; font-family:"微软雅黑"; font-size:14px; font-weight:normal; } .more{ color:#0000FF; font-family:"宋体"; font-size:150px; font-weight:bold; height:200px; width:200px; line-height:200px; text-align:center; border:solid green 2px; float:left; margin:10px; } </style> <script type="text/javascript"> // JavaScript Document var data="屌丝们4月1日节日快乐啊"; window.onload=function(){ var hello=document.getElementById('hello'); hello.className='news'; } function more(){ var empty=document.getElementById('empty'); for(var i=0;i<data.length;i++){ addNode(empty,data[i]); } var children=empty.childNodes; for(var i=0;i<children.length;i++){ children[i].className='more'; } } function addNode(el,text){ var childEl=document.createElement("div"); el.appendChild(childEl); var txtNode=document.createTextNode(text); childEl.appendChild(txtNode); } </script> </head> <body> <p id="hello">新闻消息:博客园收购了CSDN</p> <a href="javascript:;" onclick="more()">更多内容</a> <div id="empty"></div> </body> </html>
javascript蛮好玩的嘛。
实例:愚人节版
这是一个用javascript操作Document和CSS的例子。
DOM能够为javascript引擎公开网页。通过DOM,可以采用编程的方式操作文档的结构。Web页面的DOM表示是一个树状结构,由元素或点组成。节点可以包含很多子节点。javascript通过全局变量document公开当前Web叶梦得根节点,这个变量是所有DOM操作的起点。DOM使用容器的属性来做索引,而不是使用数字做索引。DOM中元素的关系可以看作是HTML清单的镜像。这种关系可以是双向的,修改DOM将改变HTML标记,随之会反映在页面的现实上。
譬如(方法1)
var node=document.form1.hello;
就可以在javascript中访问到
<p id="hello">新闻消息:博客园收购了CSDN</p>
这个节点。
此外javascript访问节点还有另外一种方法。
var node=document.getElementById('hello');
这种方式同样能够访问到节点
<p id="hello">新闻消息:博客园收购了CSDN</p>
其实还有方法的,就是用这种的比较少。
var node=document.getElementByTagName('a');
这种方法会在DOM中搜寻所有的<a>标签。在批量操作的时候就很有用了。
标题有点大,但却是在看。。。
相关文章推荐
- JavaScript有三种获取DOM元素的方式
- ASP.NET MVC2中三种ajax实现方式-原始JavaScript
- JavaScript-获取DOM元素的三种方式
- javascript获取AJAX对象(DOM方式)
- JavaScript弹出对话框的三种方式-alert()-confirm()-prompt()区别和联系
- Android 解析XML文件的三种方式 DOM,SAX,PULL
- Asp.net MVC2中使用Ajax的三种方式
- android解析XML总结(SAX、Pull、Dom三种方式)附带DOM4J、JDOM
- C++的三种访问权限与三种继承方式
- 简化 Ajax 和 Java 开发,第 3 部分: 基于 DOM、JavaScript 和 JSP 标记文件构建 UI 特性
- 解析远程访问的三种***方式和攻与防
- SpringMVC访问静态资源的三种方式
- JavaScript声明全局变量三种方式的异同
- 实现JavaScript中继承的三种方式
- ExtJS4.1:AJAX提交数据的三种方式,80%人都没用过第三种
- 示范如何以异步AJAX方式访问SharePoint数据
- JavaScript中清空数组的三种方式
- SpringMVC访问静态资源的三种方式
- C++的三种访问权限与三种继承方式
- 基于JavaScript 声明全局变量的三种方式详解