初见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>标签。在批量操作的时候就很有用了。
标题有点大，但却是在看。。。
本文转自 Ron Ngai 博客园博客，原文链接： http://www.cnblogs.com/rond/archive/2012/04/01/ajaxone.html ，如需转载请自行联系原作者
初见Ajax——javascript访问DOM的三种访问方式的更多相关文章
- javascript获取DOM对象三种方法
1. getElementByID() getElementByID()方法可返回对拥有指定ID的第一个对象的引用 2. getElementByTagName() getElementByTagNa ...
- JavaScript实现接口的三种经典方式
/* 接口:提供一种说明一个对象应该有哪些方法的手段 js中有三种方式实现接口: 1 注释描述接口 2 属性检测接口 3 鸭式辨型接口 */ /* 1 注释描述接口: 不推荐 优点: 利用注解,给出参 ...
- 【转】SVG与HTML、JavaScript的三种调用方式
原文:https://www.cnblogs.com/guohu/p/5085045.html SVG与HTML.JavaScript的三种调用方式 一.在HTMl中访问SVG的DOM 1 2 3 4 ...
- 2019年6月14日 Web框架之Django_07 进阶操作（MTV与MVC、多对多表三种创建方式、前后端传输数据编码格式contentType、ajax、自定义分页器）
摘要 MTV与MVC 多对多表三种创建方式 ajax ,前后端传输数据编码格式contentType 批量插入数据和自定义分页器 一.MVC与MTV MVC(Model View Controller ...
- AJAX实现跨域的三种方法
由于在工作中需要使用AJAX请求其他域名下的请求,但是会出现拒绝访问的情况,这是因为基于安全的考虑,AJAX只能访问本地的资源,而不能跨域访问. 比如说你的网站域名是aaa.com,想要通过AJAX请 ...
- JavaScript 闭包的详细分享（三种创建方式）（附小实例）
JavaScript闭包的详细理解 一.原理:闭包函数--指有权访问私有函数里面的变量和对象还有方法等:通俗的讲就是突破私有函数的作用域,让函数外面能够使用函数里面的变量及方法. 1.第一种创建方式 ...
- JavaScript声明全局变量的三种方式
JavaScript声明全局变量的三种方式 JS中声明全局变量主要分为显式声明或者隐式声明下面分别介绍. 声明方式一: 使用var(关键字)+变量名(标识符)的方式在function外部声明,即为 ...
- [转]Javascript定义类的三种方法
作者: 阮一峰 原文地址:http://www.ruanyifeng.com/blog/2012/07/three_ways_to_define_a_javascript_class.html 将近2 ...
- [转]SharePoint 2010/2013 使用Javascript来判断权限的三种方法
本文讲述SharePoint 2010/2013 使用Javascript来判断权限的三种方法的实现方式及其优缺点. 1. 根据用户所在的SharePoint组(比如用户在Leader 组才可以使用审 ...
随机推荐
- go 切片重组
我们已经知道切片创建的时候通常比相关数组小,例如: slice1 := make([]type, start_length, capacity) 其中 start_length 作为切片初始长度而 c ...
- Linux 文件管理篇（二 目录信息）
其它在线帮助文档 usr/share/doc root用户的相关信息 etc/passwd 用户密码 etc/shadow 所有用户群组 etc/group 返 ...
- Java Random 随机数
package myrandom; import java.util.Random; /* * Random:用于产生随机数 * * 使用步骤: * A:导包 * import java.util.R ...
- Spire.Cloud 私有化部署教程（一） - CentOS 7 系统
Spire.Cloud支持的Linux服务器系统包括CentOS和Ubuntu(推荐使用CentOS 7和Ubuntu 18版本),本教程主要介绍如何在CentOS 7系统上实现Spire.Cloud ...
- mount --bind绑定命令
将目录或文件DirFile-1绑定到目录或文件DirFile-2上,所有对DirFile-2的访问就是对DirFile-1的访问 mount --bind [DirFile-1] [DirFile-2 ...
- CNVD
漏洞编号 漏洞名称 漏洞积分 奖励时间 CNVD-2020-15798 中国平乐县委员会组织部网站管理系统登录存在弱口令漏洞 1.0 2020-03-09 09:58:46.0 CNVD-2020-1 ...
- AJ学IOS（44）之网易彩票自定义图片在右边的Button_弹出view_ios6,7简单适配
AJ分享,必须精品 效果: 注意图里面了吗,其实那个效果做起来真的很简单,在iOS中苹果给我们封装的很好,关键是那个按钮 系统的按钮的图片是在左边的,这里我们需要把他调整到右边,然后呢需要我们自己做一 ...
- python基础入门：matplotlib绘制多Ｙ轴画图（附源码）
前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者:屁屁酱 PS:如有需要Python学习资料的小伙伴可以加点击下方链接 ...
- 爬取腾讯网的热点新闻文章 并进行词频统计(Python爬虫+词频统计)
前言 文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者:一棵程序树 PS:如有需要Python学习资料的小伙伴可以加点击下方链 ...
- 「日常开发」记一次因使用Date引起的线上BUG处理
生活中,我们需要掌控自己的时间,减少加班,提高效率:日常开发中,我们需要操作时间API,保证效率.安全.稳定.现在都2020年了,了解如何在JDK8及以后的版本中更好地操控时间就很有必要,尤其是一次线 ...