DOM 基础（一）
//HTMLPageDOM.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html >
<head>
<title>这是DOM基础学习！</title>
<script type="text/javascript">
function bodymousedown() {
alert("别点我");
}
function f1() {
alert("我是1");
}
function f2() {
alert("我是2");
}
function confirmdemo() {
if (confirm("是否继续？")) {
alert("确定");
}
else {
alert("取消");
}
}
var intervalID;
function startInterval() {
intervalID = setInterval("alert('烦死你 ^_^ !')", 5000);
}
function stopInterval() {
clearInterval(intervalID);
}
var timeoutId;
function startTimeout() {
timeoutId = setTimeout("alert('这是Timeout')", 2000);
}
function stopTimeout() {
clearTimeout(timeoutId);
}
function scroll() {
var title = document.title;
var firstchar = title.charAt(0);
var leftstr = title.substring(1, title.length);
document.title = leftstr + firstchar;
}
var scrollTitleID;
function startScrollTitle() {
scrollTitleID = setInterval(scroll, 500);
}
function stopScrollTitle() {
clearInterval(scrollTitleID);
}
function startShowModalDialog() {
var obj = new Object();
obj.name = "LYH";
ReturnValue = window.showModalDialog(
"HTMLPage1.htm", //弹出页面地址
obj, //参数
"dialogWidth=200px;dialogHeight=100px;dialogLeft=200px;dialogTop=200px"
);
alert("从弹出窗口返回的值为：" + ReturnValue);
}
function startOnload() {
onloadText.value = "这里是body加载完的onload文本框(Love)";
}
</script>
<style type="text/css">
#TextArea1
{
height: 55px;
width: 205px;
}
</style>
</head>
<!--
onmousedown="bodymousedown()"
button，发生事件时鼠标按键，1为左键，2为右键，3为左右键同时按。
-->
<!--
<script type="text/javascript">
function mouseleft() {alert('禁止左键点击！');return false;};
function mouseright() { if (event.button == 2) {alert('禁止右键点击！');return false;} };
function CtrlKeyDown() { if (event.ctrlKey) {alert('禁止CTRL键点击！');return false;} };
document.onkeydown = CtrlKeyDown;
document.onselectstart = mouseleft;
document.onmousedown = mouseright;
</script>
-->
<script type="text/javascript">
var clickmessage = "本站图片禁用右键!"
function disableclick(e) {
if (document.all) {
if (event.button == 2 || event.button == 3) {
if (event.srcElement.tagName == "IMG") {
alert(clickmessage);
return false;
}
}
}
if (document.layers) {
if (e.which == 2) {
alert(clickmessage);
return false;
}
}
}
function associateimages() {
for (i = 0; i < document.images.length; i++)
document.images[i].onmousedown = disableclick;
}
if (document.all)
document.onmousedown = disableclick
else if (document.layers)
associateimages()
</script>
<!--
onunload="alert('页面关闭或离开时触发')"
onbeforeunload="window.event.returnValue='确定离开吗?'"
//禁用右键:放到body中
oncontextmenu="window.event.returnValue=false"
-->
<body onload="startOnload()" oncopy="setTimeout('modifyClipboard()',100)">
<img src="images/girl.gif" value="这里是图片" />
<br />
<!--注意f1 不要加括号。如果加上括号就变成了执行f1函数，并且将函数的返回值复制给document.ondblclick-->
<input type="button" onclick="f1()" value="关联事件1-单击" />
<br />
<input type="button" onclick="document.ondblclick=f1" value="关联事件1-双击" />
<br />
<input type="button" onclick="document.ondblclick=f2" value="关联事件2-双击" />
<!--
window对象1 :
window对象代表当前浏览器窗口，使用window对象的属性、方法的时候可以省略window，比如window.alert('a')可以省略成
alert('aa')。
(1)alert方法，弹出消息对话框
(2)confirm 方法，显示确定、取消对话框，如果按了【确定】按钮，就返回 true，否则就 false
-->
<br />
<input type="button" onclick="confirmdemo()" value="confirmButton-单击" />
<br />
<!--
(3)重新导航到指定的地址：navigate("http://www.xtu.edu.cn");
-->
<input type="button" onclick="navigate('HTMLPage1.htm')" value="navigate（重新导航）" />
<!--
4)setInterval每隔一段时间执行指定的代码，第一个参数为代码
的字符串，第二个参数为间隔时间（单位毫秒），返回值为定时
器的标识
setInterval("alert('hello')", 1000);
(5)clearInterval取消setInterval的定时执行，相当于Timer中的
Enabled=False。因为setInterval可以设定多个定时，所以
clearInterval要指定清除那个定时器的标识，即setInterval的返回值。
var intervalId = setInterval("alert('hello')", 1000);
clearInterval(intervalId);
-->
<br />
<input type="button" onclick="startInterval()" value="startInterval（开始）" />
<br />
<input type="button" onclick="stopInterval()" value="stopInterval（停止）" />
<br />
走马灯效果：<input type="button" onclick="startScrollTitle()" value="标题滚动（开始）" />
<br />
走马灯效果：<input type="button" onclick="stopScrollTitle()" value="标题滚动（停止）" />
<!--
(6)setTimeout也是定时执行，但是不像setInterval那样是重复的
定时执行，只执行一次，clearTimeout也是清除定时。很好区分：Interval：间隔；timeout：超时。
var timeoutId = setTimeout("alert('hello')", 2000);
clearTimeout：清除定时。
-->
<br />
<input type="button" onclick="startTimeout()" value="这是Timeout（开始）" />
<br />
<input type="button" onclick="stopTimeout()" value="这是Timeout（停止）" />
<br />
<!--
(7)showModalDialog弹出模态对话框，注意showModalDialog必
须在onClick等用户手动触发的事件中才会执行，否则可能会被
最新版本的浏览器当成广告弹窗而拦截。
第一个参数为弹出模态窗口的页面地址。
在弹出的页面中调用window.close()（不能省略window.close()中的
window.）关闭窗口，只有在对话框中调用window.close()才会自动
关闭窗口，否则浏览器会提示用户进行确认。
(8)showModelessDialog弹出非模态窗口，参数等和
showModalDialog一样。
如何在弹出窗口和主窗口之间进行参数传递、如何控制弹出窗口
的大小等后面再讲。
使用方法：
vReturnValue = window.showModalDialog(sURL [, vArguments] [,sFeatures])
vReturnValue = window.showModelessDialog(sURL [, vArguments] [,sFeatures])
参数说明：
sURL -- 必选参数，类型：字符串。用来指定对话框要显示的文档的URL。
vArguments -- 可选参数，类型：变体。用来向对话框传递参数。传递的参数类型不限，包括数组等。对话框通过
window.dialogArguments来取得传递进来的参数。
sFeatures -- 可选参数，类型：字符串。用来描述对话框的外观等信息，可以使用以下的一个或几个，用分号“;”隔开。
----------------------------------------------------------------------------------------------------------------
1. dialogHeight: 对话框高度，不小于100px
2. dialogWidth: 对话框宽度。
3. dialogLeft: 离屏幕左的距离。
4. dialogTop: 离屏幕上的距离。
5. center: { yes | no | 1 | 0 } ： 是否居中，默认yes，但仍可以指定高度和宽度。
6. help: {yes | no | 1 | 0 }： 是否显示帮助按钮，默认yes。
7. resizable: {yes | no | 1 | 0 } [IE5+]： 是否可被改变大小。默认no。
8. status: {yes | no | 1 | 0 } [IE5+]： 是否显示状态栏。默认为yes[ Modeless]或no[Modal]。
9. scroll: { yes | no | 1 | 0 | on | off }：是否显示滚动条。默认为yes。
下面几个属性是用在HTA中的，在一般的网页中一般不使用。
10. dialogHide:{ yes | no | 1 | 0 | on | off }：在打印或者打印预览时对话框是否隐藏。默认为no。
11. edge:{ sunken | raised }：指明对话框的边框样式。默认为raised。
12. unadorned:{ yes | no | 1 | 0 | on | off }：默认为no。
参数传递：
1. 要想对话框传递参数，是通过vArguments来进行传递的。类型不限制，对于字符串类型，最大为4096个字符。也可以传递对象，例如：
-------------------------------
parent.htm
<script>
var obj = new Object();
obj.name="51js";
window.showModalDialog("modal.htm",obj,"dialogWidth=200px;dialogHeight=100px");
</script>
modal.htm
<script>
var obj = window.dialogArguments
alert("您传递的参数为：" + obj.name)
</script>
-------------------------------
2.可以通过window.returnValue向打开对话框的窗口返回信息，当然也可以是对象。例如：
------------------------------
parent.htm
<script>
str =window.showModalDialog("modal.htm",,"dialogWidth=200px;dialogHeight=100px");
alert(str);
</script>
modal.htm
<script>
window.returnValue="http://www.xtu.edu.cn";
</script>
-->
<input type="button" onclick="startShowModalDialog()" value="这里是弹出窗口" />
<br />
<!--
body、document对象的事件
（1）onload：网页加载完毕时触发，浏览器是一边下载文档、一边解析执行，可能会出现JavaScript执行时需要操作某个元素
，这个元素还没有加载，如果这样就要把操作的代码放到body的onload事件中，或者可以把JavaScript放到元素之后。元素的
onload事件是元素自己加载完毕时触发，body onload才是全部 加载完成
（2）onunload：网页关闭（或者离开）后触发。
（3 ）onbeforeunload：在网页准备关闭（或者离开）后触发。
在事件中为"window.event.returnValue赋值（要显示的警告消息），这样窗口离开（比如前进、后退、关闭）就会弹出确认消息
<body onbeforeunload="window.event.returnValue=' 真的要放弃发帖退出吗？'">。显示的文字随浏览器版本而有差异。
--->
<input type="text" value="这里是body没有加载完的onload测试文本框" id="onloadText" />
<!--
其他事件 :
除了有特有的属性之外，当然还有通用的HTML元素的事件：
onclick（单击）、ondblclick（双击）、onkeydown（按键按下）、onkeypress（点击按键）、onkeyup（按键释放）、
onmousedown（鼠标按下）、onmousemove（鼠标移动）、onmouseout（鼠标离开元素范围）、onmouseover（鼠标移动
到元素范围）、onmouseup（鼠标按键释放）等。
--->
<br />
<!---
window对象的属性1 :
window.location.href='http://www.itcast.cn'，重新导向新的地址，和navigate方法效果一样。
window.location.reload() 刷新页面。
window.event是非常重要的属性，用来获得发生事件时的信息，事件不局限于window对象的事件，所有元素的事件都可以通过event属性取到相关信息。类似
于winForm中的e(EventArg).
altKey属性，bool类型，表示发生事件时alt键是否被按下，类似的还有ctrlKey、shiftKey属性，例子 <input type="button" value="点击"
onclick="if(event.altKey){alert('Alt点击')}else{alert('普通点击')}" /> ；
clientX、clientY 发生事件时鼠标在客户区的坐标；
screenX、screenY 发生 事件时鼠标在屏幕上的坐标；
offsetX、offsetY 发生事件时鼠标相对于事件源（比如点击按钮时触发onclick）的坐标。
returnValue属性，如果将returnValue设置为false，就会取消默认事件的处理。
在超链接的onclick里面禁止访问href的页面。在表单校验的时候禁止提交表单到服务器，
防止错误数据提交给服务器、防止页面刷新。
srcElement，获得事件源对象。几个事件共享一个事件响应函数用。
keyCode，发生事件时的按键值。
button，发生事件时鼠标按键，1为左键，2为右键，3为左右键同时按。
<body onmousedown="if(event.button==2){alert('禁止复制');}">
-->
<input type="button" value="href" onclick="alert(location.href)" />
<input type="button" value="重定向" onclick="location.href='HTMLPage1.htm'" />
<input type="button" value="刷新到页面" onclick="window.location.reload('HTMLPage1.htm')" />
<input type="button" value="ctrl+点击测试" onclick="if(window.event.ctrlKey){alert('按下了ctrl键')}else alert('普通点击');" />
<br />
<a href="http://www.xtu.edu.cn" onclick="alert('禁止访问');window.event.returnValue=false">
湘潭大学</a>
<form action="HTMLPage1.htm">
<input type="submit" value="提交" onclick="alert('数据有问题');window.event.returnValue=false" />
</form>
<!---
window对象的属性2 :
(*）screen对象，屏幕的信息
粘贴板的操作:
clipboardData对象
clearData("Text")清空粘贴板；
getData("Text")读取粘贴板的值，返回值为粘贴板中的内容；
setData("Text",val)，设置粘贴板中的值。
案例：复制地址给友好。见备注。
当复制的时候body的oncopy方法被触发，直接return false就是禁止复制。
<body oncopy="alert('禁止复制！');return false;"
很多元素也有oncopy、onpaste事件：
案例：禁止粘贴帐号。见备注。
-->
<script type="text/javascript">
//alert("分辨率：" + screen.width + "*" + screen.height);
if (screen.width < 1024 || screen.height < 768) {
//alert("分辨率太低！");
}
</script>
<br />
<input type="button" value="分享本页信息给好友" onclick="clipboardData.setData('Text','我发现很好的东西：'+location.href);alert('已经放到粘贴板中！');" />
<br />
手机号码：<input type="text" />
<br />
确认号码：<input type="text" onpaste="alert('为确保安全，禁止粘贴！');return false;" />
<!---
window对象的属性3 :
在网站中复制文章的时候，为了防止那些拷贝党不添加文章来源，自动在复制的内容后添加版权声明。
用户复制动作发生
0.1秒以后再去改粘贴板中的内容。100ms只是一个经常取值，
写1000、10、50、200……都行。不能直接在oncopy里修改粘
贴板。
不能直接在oncopy中执行对粘贴板的操作，因此设定定时器，0.1
秒以后执行，这样就不再oncopy的执行调用栈上了。
-->
<script type="text/javascript">
function modifyClipboard() {
var txt = clipboardData.getData('Text');
txt = txt
+ '本文来自传XXXX，转载请注明来源。'
+ location.href;
clipboardData.setData('Text', txt);
//把这行代码放到body中：
//oncopy = "setTimeout('modifyClipboard()',100)";
}
</script>
<br />
<!--
window对象的属性4：
history操作历史记录
window.history.back()后退；
window.history.forward()前进。
也可以用window.history.go(-1)、window.history.go(1)前进
document属性。是最复杂的属性之一。后面讲解详细使用。
-->
<a href="HTMLPage1.htm">window.history.back()测试（这是第一页）</a>
<br />
<!--
document属性1:
document是window对象的一个属性，因为使用window对象成员的时候可以省略window.，所以一般直接写document
document的方法：
1 write：向文档中写入内容。writeln和write差不多，只不过最后添加一个回车
在onclick等事件中写的代码会冲掉页面中的内容，只有在页面加载 过程中write才会与原有内容融合在一起
write经常在广告代码、整合资源代码中被使用。
内容联盟、广告代码、cnzz，不需要被主页面的站长去维护内容，只要被嵌入的js内容提供商修改内容，显示的内容就变了。
-->
<input type="button" value="" onclick="document.write('<fontcolor=red>你好:LYH</font>')" />
<script type="text/javascript">
document.writeln("<fontcolor=red>你好:LYH</font>");
document.write("<fontcolor=red>你好:LYH</font>");
</script>
<br />
<!--
document方法 ：
getElementById方法（非常常用），根据元素的Id获得对象，网页中id不能重复。
也可以直接通过元素的 来引用元素，但是有有效范围、form1.textbox1之类的问题，
因此不建议直接通过id操作元素，而是通过getElementById
（*）getElementsByName，根据元素的name获得对象，由于页面中元素
的name可以重复，比如多个RadioButton的name一样，因此
getElementsByName返回值是对象数组。
（*）getElementsByTagName，获得指定标签名称的元素数组，比如
getElementsByTagName("p")可以获得所有的<p>标签。
案例：点击一个按钮，被点击的按钮显示“呜呜”，其他按钮显示“哈哈”。
案例：十秒钟后协议文本框下的注册按钮才能点击，时钟倒数。
(btn.disabled = true )
=
练习：加法计算器。两个文本框中输入数字，点击【 】按钮将相加的结果
放到第三个文本框中。
练习：美女时钟。
-->
<script type="text/javascript">
function btnClickId() {
var txt = document.getElementById("textBox1");
alert(txt.value);
}
function btnClickValue() {
alert(form1.textBox1.value);
}
function btnClickName() {
var radios = document.getElementsByName("gender");
var txt = "";
for (var radio in radios)
txt = radio.value + "|";
alert(txt);
}
</script>
<form action="ok.aspx" id="form1">
<input type="button" value="getElementsById测试" onclick="btnClickId()" />
<input type="button" value="控件.value测试" onclick="btnClickValue()" />
<input type="text" id="textBox1" name="textBox1" value="我是中国人！" />
</form>
<script type="text/javascript">
function btnClickName() {
var radios = document.getElementsByName("gender");
var txt = "";
//for (var radio in radios) txt = radio.value + "|";
for (var i = 0; i < radios.length; i++)
txt+= radios[i].value + "|";
alert(txt);
}
</script>
<input type="radio" name="gender" value="男" />男
<input type="radio" name="gender" value="女" />女
<input type="radio" name="gender" value="保密" />保密
<input type="button" value="getElementsByName测试" onclick="btnClickName()" />
<br />
<script type="text/javascript">
function btnClickTagName() {
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
input.value = "I Love You !";
//window.event.srcEllment; 取得引发事件的控件
};
}
</script>
<input type="text" />
<input type="button" value="getElementsByTagName测试" onclick="btnClickTagName()"/>
<br />
<!--
十秒钟后协议文本框下的注册按钮才能点击，时钟倒数。(btn.disabled = true )
-->
<script type="text/javascript">
function btnTimeCount() {
timeC = 10;
var btnTimeCount = document.getElementById("btnTimeCount");
btnTimeCount.value = "请仔细阅读协议。还剩 " + timeC + " 秒";
btnTimeCount.disabled = true;
intervalTimeCount=setInterval("countMethod()",1000);
}
function countMethod() {
var btnTimeCount = document.getElementById("btnTimeCount");
if (timeC > 0)
btnTimeCount.value = "请仔细阅读协议。还剩 " + (--timeC) + " 秒";
else {
btnTimeCount.value = "你同意协议，嘿嘿！";
btnTimeCount.disabled = false;
clearInterval(intervalTimeCount);
}
}
</script>
<textarea id="TextArea1" cols="20" name="S1" rows="3">
1、你是我的。
2、你的钱是我的。
3、你的老婆是我的。
4、我的不是你的。
</textarea><br />
<input type="button" id="btnTimeCount" onclick="btnTimeCount()" value="请仔细阅读协议。(10 秒)"/><br />
<!--
DOM的动态创建 ：
document.write只能在页面加载过程中才能动态创建。
可以调用document的createElement方法来创建具有指定标签的
DOM对象，然后通过调用某个元素的appendChild方法将新创建
元素添加到相应的元素下
-->
<script type="text/javascript">
function showit() {
var divMain = document.getElementById("divMain");
var inputFile = document.createElement("input");
inputFile.type = "file";
inputFile.value = "";
divMain.appendChild(inputFile);
var inputBtn = document.createElement("input");
inputBtn.type = "button";
inputBtn.value = "我是动态的！";
divMain.appendChild(inputBtn);
//addbr();//??怎样添加换行？？
}
function addbr() {
var divMain = document.getElementById("divMain");
//divMain.innerHTML = "<br />";
divMain.innerHTML = "<input name='File1' type='file' /><br />";
// divMain.innerText = "<br />";
}
</script>
<input type="button" value="我是动态创建按钮" onclick="showit()" />
<div id="divMain"></div> <br />
<input id="File1" type="file" name="File1" /><br />
<!--
innerText、innerHTML :
� 几乎所有DOM元素都有innerText、innerHTML属性（注意大小写），分别是元
素标签内内容的文本表示形式和HTML源代码，这两个属性是可读可写的。
� 用innerHTML也可以替代createElement，属于简单、粗放型、后果自负的创建
• <span/>的innerHTML和<span></span>的innerHTML不一样。
-->
<a href="http://www.itcast.cn" id="link1">湘<font color="Red">潭</font>大学</a>
<input type="button" value="inner*" onclick="alert(document.getElementById('link1').innerText);alert(document.getElementById('link1').innerHTML);" />
<input type="button" value="动态修改innerText" onclick="document.getElementById('link1').innerText='湘大'" />
<input type="button" value="动态修改innerHTML" onclick="document.getElementById('link1').innerHTML='湘<font color=Green>潭</font>大学'" /><br />
<script type="text/javascript">
function createLink() {
var divLink = document.getElementById("divLink");
var link = document.createElement("a");
link.href = "www.xtu.edu.cn";
link.innerText="湘潭大学\n"
divLink.appendChild(link);
}
</script>
<div id="divLink"></div>
<input type="button" value="动态生成超链接" onclick="createLink()" />
<script type="text/javascript">
function createTable() {
var data = {"湘潭大学":"www.xtu.edu.cn","百度搜索":"www.baidu.com"};
var divTable = document.getElementById("divTable");
for (var key in data) {
var value = data[key];
var tr = document.createElement("tr");
var td1 = document.createElement("td");
td1.innerHTML = key + " ";
tr.appendChild(td1);
var td2 = document.createElement("td");
td2.innerHTML = "<a href='" + value + "'>" + value+"</a>";
tr.appendChild(td2);
divTable.appendChild(tr);
}
}
function createTable2() {
var data = { "湘潭大学": "www.xtu.edu.cn", "百度搜索": "www.baidu.com" };
var divTable = document.getElementById("divTable2");
for (var key in data) {
var value = data[key];
var tr = divTable.insertRow(-1);//-1 表示最后
var td1 = tr.insertCell(-1);
td1.innerHTML = key; //firefox不支持innerText
var td2 = tr.insertCell(-1);
td2.innerHTML = "<a href='" + value + "'>" + value + "</a>";
}
}
function createTable3() {
var data = { "湘潭大学": "www.xtu.edu.cn", "百度搜索": "www.baidu.com" };
var tableLinks = document.getElementById("tableLinks");
for (var key in data) {
var value = data[key];
var tr = document.createElement("tr");
var td1 = document.createElement("td");
td1.innerHTML = key + " ";
tr.appendChild(td1);
var td2 = document.createElement("td");
td2.innerHTML = "<a href='" + value + "'>" + value + "</a>";
tr.appendChild(td2);
tableLinks.tBodies[0].appendChild(tr);
}
}
</script>
<table id="divTable"></table>
<input type="button" value="动态生成表格(不兼容IE6)" onclick="createTable()" />
<table id="tableLinks"> <tbody></tbody></table>
<input type="button" value="动态生成表格(兼容浏览器IE6后)" onclick="createTable3()" />
<table id="divTable2"></table>
<input type="button" value="动态生成表格(兼容浏览器Firefox)" onclick="createTable2()" /><br />
<script type="text/javascript">
function commentButton() {
var tablePL = document.getElementById("tablePL");
var nichengName = document.getElementById("nichengName").value;
var commentContent = document.getElementById("commentContent").value;
var tr = tablePL.insertRow(-1);
var td1 = tr.insertCell(-1);
td1.innerHTML = nichengName + ":";
var td2 = tr.insertCell(-1);
td2.innerHTML = commentContent;
}
</script>
练习评论！练习评论！练习评论！练习评论！练习评论！练习评论！练习评论！练习评论！练习评论！
练习评论！练习评论！练习评论！练习评论！练习评论！
<p>评论区：</p>
<table id="tablePL" >
<tr><td>小玉：</td><td>沙发耶！</td></tr>
</table><br />
昵称：<input type="text" id="nichengName"/><br />
<textarea id="commentContent" rows="5" cols="30"></textarea><br />
<input type="button" value="评论" onclick="commentButton()" />
<!--
事件冒泡：如果元素A嵌套在元素B中，那么A被点击不仅A的onclick 事件会被触发，B 的 onclick 也会被触发。触发的顺序是由内而外” 。
-->
<!--
事件中的this。除了可以使用event.srcElement在事件响应函数中，this表示发生事件的控件。
只有在事件响应函数才能使用this获得发生事件的控件，在事件响应函数调用的函数中不能使用，
如果要使用则要将 this 传递给函数或者使用event.srcElement。
(*)this和event.srcElement的语义是不一样的，this就是表示当前监听事件的这个对象，
event.srcElement是引发事件的对象：事件冒泡。
-->
<br />
<script type="text/javascript">
function thisTest() {
alert("方法中不能获取this值："+this.value);//这里的this是错误的
}
function thisTest2(btn) {
alert("方法中通过传递参数获取this值：" + btn.value); //这里的this是错误的
}
</script>
<input type="button" value="this测试（this.value）" onclick="alert(this.value);"/><br />
<input type="button" value="this测试（event.srcElement.value）" onclick="alert(event.srcElement.value);"/><br />
<input type="button" value="this测试（方法中不能获取this值）" onclick="thisTest()"/><br />
<input type="button" value="this测试（方法中通过传递参数获取this值）" onclick="thisTest2(this)"/><br />
<br />
<script type="text/javascript"" src="http://s22.cnzz.com/stat.php?id=3582644&web_id=3582644&show=pic" >
</script>
</body>
</html>
//HTMLPage1.htm
<!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>
<title></title>
<script type="text/javascript">
var obj = window.dialogArguments;
if (obj != null)
alert("您传递的参数为：" + obj.name);
function goOut(){
window.returnValue = "返回值为：！！！！！！";
window.close();
}
</script>
</head>
<body>
<input type="button" onclick="goOut()" value="退出弹出窗口"/>
<br />
<a href="javascript:window.history.back()">（window.history.back()测试）</a>
<input type="button" value="后退" onclick="javascript:window.history.back()" />
</body>
</html>
以下是图片：