DOM 基础（一）

java-mans

浏览: 11454468 次

最近访客更多访客>>

morelily

devcang

serisboy

chjinniu

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (15568)

社区版块

存档分类

2012-08 ( 1467)
2012-07 ( 1872)
2012-06 ( 1125)
更多存档...

//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 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>


<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>

<body onload="startOnload()" oncopy="setTimeout('modifyClipboard()',100)">
<img src="images/girl.gif" value="这里是图片" />
<br />

<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-双击" />

<br />
<input type="button" onclick="confirmdemo()" value="confirmButton-单击" />
<br />

<input type="button" onclick="navigate('HTMLPage1.htm')" value="navigate（重新导航）" />

<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 />

<input type="text" value="这里是body没有加载完的onload测试文本框" id="onloadText" />

<br />

<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>

<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 />

<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 />

<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 />

<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 />

<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()" />

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()" />


<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>