欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

DOM 基础(一)  

程序员文章站 2022-05-06 23:13:42
...

//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 + "&nbsp;&nbsp;";
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 + "&nbsp;&nbsp;";
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>

以下是图片:

DOM 基础(一)
            
    
    
         

DOM 基础(一)