一、本课目标
- 掌握document对象的使用
二、常用属性
image.png
示例：有三个界面，提示领奖页面，奖品页面，登录页面。可以从提示领奖页面进入奖品页面，在奖品页面进行判断，判断载入此文档的页面是不是提示领奖页面，如果是的话就显示奖品信息，如果不是的话就跳转到登录界面。
具体代码如下：
提示领奖页面：该界面提供了一个超链接到奖品页面：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>领奖页面</title>
<style type="text/css">
body,h1{margin: 0;padding: 0;}
.prize{text-align: center;}
</style>
</head>
<body>
<div class="prize">
<img src="images/d1.jpg" alt="中奖" />
<h1><a href="praise.html">马上去领奖啦！</a></h1>
</div>
</body>
</html>
奖品页面：该页面对跳转到该页面的网址进行判断，具体代码如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>奖品显示页面</title>
<style type="text/css">
body{margin: 0;}
</style>
</head>
<body>
<script type="text/javascript">
var preUrl=document.referrer; //载入本页面文档的地址
if(preUrl==""){
document.write("<h2>您不是从领奖页面进入，5秒后将自动跳转到登录页面</h2>");
setTimeout("location.href='login.html'",5000);//使用setTimeout延迟5秒后自动跳转
}
else{
document.write("<h2>大奖赶快拿啦！笔记本！数码相机！</h2>");
}
</script>
</body>
</html>
登录界面：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>登录页面</title>
<style type="text/css">
body{margin: 0;}
</style>
</head>
<body>
<img src="images/login.jpg" alt="登录图片"/>
</body>
</html>
三、常用方法
image.png
getElementbyClassName()
示例代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>使用document对象操作页面</title>
<style type="text/css">
body,input,div,p,{margin: 0;padding: 0;}
body{font-size: 14px; font-family: "微软雅黑"; line-height: 25px;}
.content{width: 550px; margin: 0 auto;}
.content img{ float: left; width: 150px;}
.r{float: left; width: 400px;}
input[name="changeBook"]{
width: 100px;
height: 28px;
line-height: 28px;
text-align: center;
font-size: 14px; font-family: "微软雅黑";
margin: 10px 0 10px 0;
}
input[name="season"]{
width: 50px; text-align: center;
}
</style>
</head>
<body>
<div class="content">
<img src="images/book.jpg" alt="岛上书店"/>
<div class="r">
<div id="book">书名：岛上书店</div>
<input name="changeBook" value="换换名称" type="button" onclick="alterBook();" /><br>
四季名称：
<input name="season" type="text" value="春" />
<input name="season" type="text" value="夏" />
<input name="season" type="text" value="秋" />
<input name="season" type="text" value="冬" /><br><br>
<input name="b2" type="button" value="input内容" onclick= "all_input()" />
<input name="b3" type="button" value="四季名称" onclick="s_input()" />
<input name="b4" type="button" value="清空页面内容" onclick="clearAll()" />
<p id="replace"></p>
</div>
</div>
<script type="text/javascript">
function alterBook(){
document.getElementById("book").innerHTML="现象级全球畅销书";
}
function all_input(){
var aInput=document.getElementsByTagName("input");
var sStr="";
for(var i=0;i<aInput.length;i++){
sStr+=aInput[i].value+" ";
}
document.getElementById("replace").innerHTML=sStr;
}
function s_input(){
var aInput=document.getElementsByName("season");
var sStr="";
for(var i=0;i<aInput.length;i++){
sStr+=aInput[i].value+" ";
}
document.getElementById("replace").innerHTML=sStr;
}
function clearAll(){
document.write("");
}
</script>
</body>
</html>
四、总结
image.png
