初见Ajax——javascript访问DOM的三种访问方式

最近好啰嗦

最近在一间小公司实习，写一些小东西。小公司嘛，人们都说在小公司要什么都写的。果真是。

前端，后台，无论是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的事情以后再说吧。一步一步来。

一个简单的例子：

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">新闻消息：博客园收购了优快云</p>

这个节点。

此外javascript访问节点还有另外一种方法。

var node=document.getElementById('hello');

这种方式同样能够访问到节点

<p id="hello">新闻消息：博客园收购了优快云</p>

其实还有方法的，就是用这种的比较少。

var node=document.getElementByTagName('a');

这种方法会在DOM中搜寻所有的<a>标签。在批量操作的时候就很有用了。

标题有点大，但却是在看。。。