初见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的事情以后再说吧。一步一步来。

一个简单的例子:

<!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>标签。在批量操作的时候就很有用了。

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



原文地址:https://www.cnblogs.com/rond/p/ajaxone.html