JavaScript常用文檔對象
一、Document對象
1、文檔對象概述
通過document對象可以訪問HTML文檔中包含的任何HTML標記並可以動態的改變HTML標記中的內容。
2、文檔對象的常用屬性、方法與事件
3、Document對象的應用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<a href="#">javascript技術論壇</a>
<script type="text/javascript">
document.linkColor="#FF0000";//未點擊
document.alinkColor="#000000";//被點擊
document.vlinkColor="#00CCFF";//點擊後
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景與文字變色</title>
</head>
<body>
<h1>新白帥到變色</h1>
<script type="text/javascript">
var Arraycolor=new Array("#00FF66","#FFFF99","#99CCFF","#FFCCFF","#FFCC99","#00FFFF");
var n=0;
function changecolors(){
n++;
if(n==Arraycolor.length-1)
n=0;
document.bgColor=Arraycolor[n];
document.fgColor=Arraycolor[n-1];
setTimeout("changecolors()",1000);
}
changecolors();
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>獲取頁面的URl</title>
</head>
<body>
<script type="text/javascript">
document.write("<b>當前頁面的URL:</b>"+document.URL)
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
document.write("使用write方法輸出的第一段內容!");
document.write("使用write方法輸出的第二段內容<hr>");
document.writeln("使用writeln方法輸出的第一段內容!");
document.writeln("使用writeln方法輸出的第二段內容<hr>");
</script>
<!--在HTML中,標記<pre>的作用是預排版標記。
pre 元素可定義預格式化的文本。
被包圍在 pre 元素中的文本通常會保留空格和換行符。
而文本也會呈現爲等寬字體-->
<pre>
<script type="text/javascript">
document.writeln("在pre標記內使用writeln方法輸出的第一段內容!");
document.writeln("在pre標記內使用writeln方法輸出的第二段內容");
</script>
</pre>
</body>
</html>
【說明:】JavaScript中Write不可以換行,Writeln可以換行。在網頁中是看不到writeln的換行效果的,它是被瀏覽器表現爲一個空格顯示出來了。在標籤中加入預格式pre標籤查看效果.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>動態添加一個文本框</title>
</head>
<body>
<form name="form">
<input type="button" value="動態添加文本框" onclick="addInput()"/>
</form>
<script type="text/javascript">
function addInput(){
var t=document.createElement("input");
t.type="text";//爲添加的文本框type屬性賦值
t.name="text";//爲添加的文本框name屬性賦值
t.value="動態添加的文本框";//爲添加的文本框value屬性賦值
document.form.appendChild(t);//把文本框作爲子節點追加到表單中
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>獲取文本框並修改其內容</title>
</head>
<body>
<input type="text" id="tet" value="初始文本內容" />
<input type="button" value="更改文本內容" name="btn" onclick="chg()" />
<script type="text/javascript">
function chg() {
var t = document.getElementById("tet");
t.value = "修改文本內容";
}
</script>
</body>
</html>
4、JavaScript中的cookie設置
實例:實現將表單註冊信息寫入Cookie中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Cookie的寫入</title>
<link href="CSS/sheet.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
function submit2(){
if(document.form1.username.value.length==0){
alert("用戶名不可爲空");
return false;
}
if(document.form1.password1.value.length==0){
alert("密碼不可爲空");
return false;
}
if(document.form1.password1.value!=document.form1.password2.value){
alert("兩次密碼輸入不相同");
return false;
}
if(!checkemail(document.form1.mail.value)){
alert("您輸入Email地址不正確!");form1.mail.select();return false;
}
alert("提交成功");
writeCookie();
return true;
}
function testRadio(){
var charactergroup=document.forms[0].elements["sex"];
for(var i=0;i<charactergroup.length;i++){
if(charactergroup[i].checked==true){
document.cookie=encodeURI("sex="+charactergroup[i].value);
}
}
}
function writeCookie(){
document.cookie=encodeURI("username="+document.form1.username.value);
document.cookie=encodeURI("password="+document.form1.password1.value);
testRadio();
}
function checkemail(str){
//在JavaScript中,正則表達式只能使用"/"開頭和結束,不能使用雙引號
var Expression=/\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/;
var objExp=new RegExp(Expression);
if(objExp.test(str)==true){
return true;
}else{
return false;
}
}
</script>
</head>
<body>
<table width="400" height="689" border="0" align="center">
<form action="" method="post" name="form1">
<tr>
<td background="../img/timg.jpg">
<table width="800" height="451" border="0">
<tr>
<td width="113" rowspan="3"> </td>
<td width="491" height="140"> </td>
<td width="182" rowspan="3"> </td>
</tr>
<tr>
<td height="175" valign="top"><table width="100%" border="0">
<tr>
<td width="30%" class="zi"><div align="right">用戶名:</div></td>
<td width="70%" align="center">
<div align="left">
<input name="username" type="text" size="40" maxlength="10">
</div></td></tr>
<tr>
<td class="zi"><div align="right">密碼:</div></td>
<td>
<div align="left">
<input name="password1" type="password" size="20" maxlength="10" οncοpy="return false" oncut="return false" οnpaste="return false">
</div></td></tr>
<tr>
<td class="zi"><div align="right">重複密碼:</div></td>
<td>
<div align="left">
<input name="password2" type="password" size="20" maxlength="10" οncοpy="return false" oncut="return false" οnpaste="return false">
</div></td></tr>
<tr>
<td class="zi"><div align="right">姓名:</div></td>
<td>
<div align="left">
<input name="realname" type="text" size="40" maxlength="10">
</div></td></tr>
<tr>
<td class="zi"><div align="right">性別:</div></td>
<td>
<div align="left">
<input type="radio" name="sex" value="男" checked>
<span class="zi">男</span>
<input type="radio" name="sex" value="女">
<span class="zi"> 女</span>
</div></td></tr>
<tr>
<td class="zi"><div align="right">QQ號碼:</div></td>
<td>
<div align="left">
<input name="qqnum" type="text" size="40" maxlength="10">
</div></td></tr>
<tr>
<td class="zi"><div align="right">主頁:</div></td>
<td>
<div align="left">
<input name="zy" type="text" size="40" maxlength="30">
</div></td></tr>
<tr>
<td class="zi"><div align="right">興趣:</div></td>
<td>
<div align="left">
<input name="xq" type="text" size="40" maxlength="10">
</div></td></tr>
<tr>
<td class="zi"><div align="right">Email:</div></td>
<td>
<div align="left">
<input name="mail" type="text" size="40" maxlength="30">
</div></td></tr>
</table></td>
</tr>
<tr>
<td valign="top"><table width="100%" border="0">
<tr>
<td width="33%"> </td>
<td width="14%"><input type="image" src="../img/1.png" width="51" height="20" onClick="return submit2();"></td>
<td width="14%"><input type="image" src="../img/2.png" width="51" height="20" onClick="javascript:reset();"></td>
<td width="22%"><input type="image" src="../img/3.png" width="51" height="20" onClick="javascript:window.close();"></td>
<td width="17%"> </td>
</tr>
</table></td>
</tr>
</table></td>
</tr></form>
</table>
</body>
</html>
讀取上例中的Cookie
//讀取上例中寫入Cookie中的註冊信息
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--meta name="save" content="history"-->
<title>Cookie的讀取</title>
<link href="CSS/sheet.css" rel="stylesheet" type="text/css">
<script language="javascript">
function submit2(){
if(document.form1.username.value.length==0){
alert("用戶名不可爲空");
return false;
}
if(document.form1.password1.value.length==0){
alert("密碼不可爲空");
return false;
}
if(document.form1.password1.value!=document.form1.password2.value){
alert("兩次密碼輸入不相同");
return false;
}
if(!checkemail(document.form1.mail.value)){
alert("您輸入Email地址不正確!");form1.mail.select();return false;
}
alert("提交成功");
writeCookie();
return true;
}
function testRadio(){
var charactergroup=document.forms[0].elements["sex"];
for(var i=0;i<charactergroup.length;i++){
if(charactergroup[i].checked==true){
document.cookie=encodeURI("sex="+charactergroup[i].value);
}
}
}
function writeCookie(){
document.cookie=encodeURI("username="+document.form1.username.value);
document.cookie=encodeURI("password="+document.form1.password1.value);
testRadio();
}
function readCookie(){
var cookieString=decodeURI(document.cookie);
if(cookieString.length!=0){
var cookieArray=cookieString.split(";");
for(var i=0;i<cookieArray.length;i++){
var cookieNum=cookieArray[i].split("=");
var cookieName=cookieNum[0];
var cookieValue=cookieNum[1];
alert("Cookie名稱爲:"+cookieName+" Cookie值爲:"+cookieValue);
}
}else
alert("暫時沒有Cookie,請填寫信息,單擊提交按鈕");
}
function checkemail(str){
//在JavaScript中,正則表達式只能使用"/"開頭和結束,不能使用雙引號
var Expression=/\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/;
var objExp=new RegExp(Expression);
if(objExp.test(str)==true){
return true;
}else{
return false;
}
}
</script>
</head>
<body>
<table width="800" height="689" border="0" align="center">
<form action="" method="post" name="form1">
<tr>
<td background="博客用戶註冊.jpg">
<table width="800" height="451" border="0">
<tr>
<td width="113" rowspan="3"> </td>
<td width="491" height="140"> </td>
<td width="182" rowspan="3"> </td>
</tr>
<tr>
<td height="175" valign="top"><table width="100%" border="0">
<tr>
<td width="30%" class="zi"><div align="right">用戶名:</div></td>
<td width="70%" align="center">
<div align="left">
<input name="username" type="text" size="40">
</div></td></tr>
<tr>
<td class="zi"><div align="right">密碼:</div></td>
<td>
<div align="left">
<input name="password1" type="password" size="20" οncοpy="return false" oncut="return false" οnpaste="return false">
</div></td></tr>
<tr>
<td class="zi"><div align="right">重複密碼:</div></td>
<td>
<div align="left">
<input name="password2" type="password" size="20" οncοpy="return false" oncut="return false" οnpaste="return false">
</div></td></tr>
<tr>
<td class="zi"><div align="right">姓名:</div></td>
<td>
<div align="left">
<input name="realname" type="text" size="40">
</div></td></tr>
<tr>
<td class="zi"><div align="right">性別:</div></td>
<td>
<div align="left">
<input type="radio" name="sex" value="男" checked>
<span class="zi">男</span>
<input type="radio" name="sex" value="女">
<span class="zi"> 女</span>
</div></td></tr>
<tr>
<td class="zi"><div align="right">QQ號碼:</div></td>
<td>
<div align="left">
<input name="qqnum" type="text" size="40">
</div></td></tr>
<tr>
<td class="zi"><div align="right">主頁:</div></td>
<td>
<div align="left">
<input name="zy" type="text" size="40">
</div></td></tr>
<tr>
<td class="zi"><div align="right">興趣:</div></td>
<td>
<div align="left">
<input name="xq" type="text" size="40">
</div></td></tr>
<tr>
<td class="zi"><div align="right">Email:</div></td>
<td>
<div align="left">
<input name="mail" type="text" size="40">
</div></td></tr>
</table></td>
</tr>
<tr>
<td valign="top"><table width="100%" border="0">
<tr>
<td width="22%"> </td>
<td width="13%"><input type="image" src="1.gif" width="51" height="20" onClick="return submit2();"></td>
<td width="13%"><input type="image" src="2.gif" width="51" height="20" onClick="javascript:reset();"></td>
<td width="13%"><input type="image" src="3.gif" width="51" height="20" onClick="javascript:window.close();"></td>
<td width="39%"><input type="image" src="4.gif" width="65" height="20" onClick="readCookie();"></td>
</tr>
</table></td>
</tr>
</table></td>
</tr></form>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>刪除Cookie</title>
<script type="text/javascript">
setCookie("test","test");//創建Cookie
alert("刪除Cookie之前"+document.cookie);
deleteCookie("test");
alert("刪除Cookie之後"+document.cookie);
function setCookie(name, value, expires, path, domain, secure){
document.cookie = name + "=" + encodeURI(value) +
((expires) ? "; expires=" + expires : "") +
((path) ? "; path=" + path : "") +
((domain) ? "; domain=" + domain : "") +
((secure) ? "; secure" : "");
}
function deleteCookie(name){
var date=new Date();
date.setTime(date.getTime()-1000); //刪除一個cookie,就是將其過期時間設定爲一個過去的時間
document.cookie=name+"=刪除"+"; expires="+date.toGMTString();
}
</script>
</head>
<body>
</body>
</html>
二、表單對象
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>驗證表單內容是否爲空</title>
<style type="text/css">
<!--
body,td,th {
font-size: 12px;
}
-->
</style></head>
<script language="javascript">
function checkinput(){ //自定義函數
if(form1.name.value==""){ //判斷用戶名是否爲空
alert("請輸入用戶名!");
form1.name.select();
return false;
}
if(form1.pwd.value==""){ //判斷密碼是否爲空
alert("請輸入密碼!");
form1.pwd.select();
return false ;
}
return true;
}
</script>
<body>
<form id="form1" name="form1" method="post" action="">
<table id="__01" width="452" height="255" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="7"><img src="images/dl_01.gif" width="452" height="81" alt="" /></td>
</tr>
<tr>
<td rowspan="3"><img src="images/dl_02.gif" width="59" height="173" alt="" /></td>
<td height="107" colspan="4" align="center" bgcolor="#FEF5CC"><table width="285" height="98">
<tr>
<td width="96">用戶名:</td>
<td width="177"><label>
<div align="left">
<input name="name" type="text" size="22" />
</div>
</label></td>
</tr>
<tr>
<td height="33">密碼:</td>
<td><label>
<div align="left">
<input name="pwd" type="password" size="24" />
</div>
</label></td>
</tr>
<tr>
<td height="22" colspan="2">
</td>
</tr>
</table></td>
<td colspan="2" rowspan="2"><img src="images/dl_04.gif" width="58" height="141" alt="" /></td>
</tr>
<tr>
<td><img src="images/dl_05.gif" width="92" height="34" alt="" /></td>
<td width="78" height="34"><input type="image" name="imageField" οnclick="return checkinput();" src="images/dl_06.gif" /></td>
<td width="83" height="34"><input type="image" name="imageField2" οnclick="form.reset(); return false;" src="images/dl_07.gif" /></td>
<td><img src="images/dl_08.gif" width="82" height="34" alt="" /></td>
</tr>
<tr>
<td colspan="5"><img src="images/dl_09.gif" width="358" height="32" alt="" /></td>
<td><img src="images/dl_10.gif" width="35" height="32" alt="" /></td>
</tr>
<tr>
<td><img src="images/分隔符.gif" width="59" height="1" alt="" /></td>
<td><img src="images/分隔符.gif" width="92" height="1" alt="" /></td>
<td><img src="images/分隔符.gif" width="78" height="1" alt="" /></td>
<td><img src="images/分隔符.gif" width="83" height="1" alt="" /></td>
<td><img src="images/分隔符.gif" width="82" height="1" alt="" /></td>
<td><img src="images/分隔符.gif" width="23" height="1" alt="" /></td>
<td><img src="images/分隔符.gif" width="35" height="1" alt="" /></td>
</tr>
</table>
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>獲取文本框/編輯框/隱藏域的值</title>
<style type="text/css">
<!--
body {
background-color: #FFF8EB;
margin-top: 50px;
}
-->
</style>
<script type="text/javascript">
function Mycheck(){
var checkstr="獲取內容如下:\n";
if (document.form1.文章作者.value != ""){
checkstr+="作者名稱:"+document.form1.文章作者.value+"\n";
}
if (document.form1.文章主題.value != ""){
checkstr+="文章主題:"+document.form1.文章主題.value+"\n";
}
if (document.form1.文章內容.value != ""){
checkstr+="文章內容:"+document.form1.文章內容.value+"\n";
}
if (document.form1.隱藏域.value != ""){
checkstr+=document.form1.隱藏域.value;
}
if (checkstr != ""){
alert(checkstr);
return false;
}
else return
return true;
}
</script>
</head>
<body style="font-size:12px">
<table width="50%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="left" valign="top"><table width="95%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="22" align="left"><img src="images/dian.gif" width="7" height="7"> 文章添加</td>
</tr>
<tr>
<td height="1"><img src="images/xian.gif" width="366" height="1"></td>
</tr>
</table>
<br>
<table width="500" border="0" align="center" cellpadding="0" cellspacing="0">
<form name="form1" onSubmit="Mycheck()">
<tr>
<td height="28" align="right">作者名稱:</td>
<td height="28"><input name="文章作者" type="text" class="textbox" id="文章作者"></td>
</tr>
<tr>
<td height="28" align="right">文章主題:</td>
<td height="28"><input name="文章主題" type="text" id="文章主題" class="textbox"></td>
</tr>
<tr>
<td height="22" align="right">文章內容:</td>
<td height="22"><textarea name="文章內容" cols="45" rows="6" id="文章內容"></textarea></td>
</tr>
<tr>
<td height="28" colspan="2" align="center"><input name="隱藏域" type="hidden" id="隱藏域" value="文章添加成功!">
<input name="add" type="submit" class="button" id="add" value="添 加">
<input type="reset" name="Submit2" value="重 置" class="button"></td>
</tr>
</form>
</table></td>
</tr>
</table>
</body>
</html>
三、圖像對象
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>按時間隨機變化的網頁背景</title>
<style type="text/css">
<!--
.style2 {
color: #00FF00;
font-weight: bold;
font-size: 16px;
}
.style5 {color: #00FF00}
-->
</style>
</head>
<body onLoad="changebg();">
<center class="style2">修改密碼</center>
<table width="265" height="110" border="1" align="center" bordercolor="#0000FF">
<tr>
<td width="90"><span class="style5">用戶名:</span></td>
<td width="169"><input name="textfield" type="text"></td>
</tr>
<tr>
<td><span class="style5">密 碼:</span></td>
<td><input name="textfield2" type="text"></td>
</tr>
<tr>
<td><span class="style5">確認密碼:</span></td>
<td><input name="textfield3" type="text"></td>
</tr>
<tr>
<td colspan="2"><div align="center">
<input name="Submit2" type="button" value="保存">
<input name="Button" type="button" value="取消">
</div></td>
</tr>
</table>
<p>
<script language="javascript">
function changebg()
{
var i = Math.floor(Math.random()*5);//取整並*5
var src = "";
switch(i)
{
case 0 :
src = "0.jpg";
break;
case 1:
src = "1.jpg";
break;
case 2:
src = "2.jpg";
break;
case 3:
src = "3.jpg";
break;
case 4:
src = "4.jpg";
break;
}
document.body.background=src;
setTimeout("changebg()",1000);
}
</script>
</p>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="CSS/style.css" rel="stylesheet">
<title>隨機生成登錄圖片驗證碼</title>
</head>
<body>
<table width="350" height="224" border="0" align="center" cellpadding="0" cellspacing="0" background="Images/login.jpg" class="tableBorder">
<tr>
<td height="84" align="center"> </td>
</tr>
<tr>
<td height="45" valign="top"><table width="62%" height="114" border="0" cellpadding="0" cellspacing="0">
<form name="form1" method="post" action="#">
<tr>
<td height="30" colspan="4" align="center"> <span class="blue">用戶名</span>:
<input name="manager" type="text" id="manager" size="20"></td>
</tr>
<tr>
<td height="27" colspan="4" align="center"><span class="blue">密 碼:</span> <input name="PWD" type="password" id="PWD" size="22"></td>
</tr>
<tr>
<td width="35%" height="27" align="right"><span class="blue">驗證碼</span>: </td>
<td width="14%" align="right"><input name="checkcode" type="text" id="checkcode" size="5"></td>
<td width="50%" align="left"><div id='div1'></div></td>
<td width="7%" align="left"> </td>
</tr>
<tr>
<td colspan="4" align="center"><input name="Submit" type="submit" class="btn_grey" value="確認">
<input name="Submit2" type="reset" class="btn_grey" value="重置">
</td>
</tr>
</table></td>
</tr>
</table>
<script language="javascript">
var str="";
var img="";
var strsource=['明','天','日','科','技','會','更','好','創','新'];
for(var i=0;i<4;i++){
var n=Math.floor(Math.random()*strsource.length);
str=str+strsource[n];
img=img+"<img src='Images/checkcode/"+n+".gif' width='19' height='20'> ";
div1.innerHTML=img;
}
</script>
</body>
</html>