详细实例：
（1）创建JSP文件。引入CSS和js文件，加入三个Div
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP '004_base05_dom1.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="styleSheet" type="text/css" href="js/extjs/resources/css/ext-all.css" />
<script type="text/javascript" charset="utf-8" src="js/extjs/ext-all-debug.js"></script>
<script type="text/javascript" charset="utf-8" src="js/extjs/ext-lang-zh_CN.js"></script>
<script type="text/javascript" charset="utf-8" src="base/ext_dom.js"></script>
</head>
<body>
<div id=d1 align="center">我是d1</div>
<div id=d2 align="center">我是d2</div>
<div id=d3 align="center">我是d3</div>
</body>
</html>
（2）编写Ext文件
Ext.onReady(function(){
//Ext.dom.Element
//Ext.get 使用了缓存机制来提升获取DOM节点的效率 Ext.Element
//get方法的描写叙述:
/**
* 1 首先去Ext.cache缓存里去查找 。假设缓存里有。直接返回就可以
* 2 假设缓存里没有 ，那再去页面上去查找 ， 假设页面里没有，返回null
* 3 假设页面里有，把当前内容增加到缓存里： { id : {data/events/dom} }
* 4 Ext.addCacheEntry加到缓存里的方法
*/
var d1 = Ext.get('d1'); //Ext.Element
alert(d1.dom.innerHTML);
//Ext.fly
/**
* fly:使用了javascript经典的‘享元模式’来提升效率，从而节约内存。更加低碳化
* 返回的对象：Fly对象 。当然你能够理解成为返回的就是Ext封装好的Ext.Element对象
* 注意点：fly因为内部使用了享元模式 所以 仅仅适合一次操作 ，从而节省内存
*/
var d2 = Ext.fly('d2');
var d3 = Ext.fly('d3');
d2.dom.innerHTML = 'AAA';
d3.dom.innerHTML = 'BBB';
/*//注意：正确的方法应该是以下的
var d2 = Ext.fly('d2');
d2.dom.innerHTML = 'AAA';
var d3 = Ext.fly('d3');
d3.dom.innerHTML = 'BBB';*/
//Ext.getDom
/**
* 直接从页面上获取元素的DOM元素
*/
var dom = Ext.getDom('d3'); //HTMLElement
dom.innerHTML="CCCC";
});（3）程序执行结果
版权声明：本文博客原创文章。博客，未经同意，不得转载。