JS入门到精通 第10章 文档（Document）对象
导读：一、练习1. 练习1 （1）源代码<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>背景颜色和字体颜色自动变色</t...
一、练习
1. 练习1
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>背景颜色和字体颜色自动变色</title>
</head>
<body>
背景和字体自动变色
<script type="text/javascript">
var Arraycolor=new Array("#00FF66","#FFFF99","#99CCFF","#FFCCFF","#FFCC99","#00FFFF","#FFFF00","#FFCC00","#FF00FF");
var n=0;
function turncolors(){
document.body.style.backgroundColor=Arraycolor[n];
document.body.style.color=Arraycolor[n+1];
n++;
if (n==(Arraycolor.length-1)) n=0;
setTimeout("turncolors()",1000);
}
turncolors();
</script>
</body>
</html>（2）运行页面
https://www.xinyizhishu.top/jsC/sc/10_1/
（3）Tips
document.body.style，setTimeout 。
2. 练习2
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<img src="个人主页.jpg" >
<script type="text/javascript">
var n=0;
function title(){
n++;
if (n==3) {n=1}
if (n==1) {document.title='☆★动态标题栏★☆';}
if (n==2) {document.title='★☆个人主页☆★';}
setTimeout(title,1000);
}
window.onload=function({title();});
</script>
</body>
</html>（2）运行页面
https://www.xinyizhishu.top/jsC/sc/10_2/
（3）Tips
怎么改都没反应 。
3. 练习3
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>获取页面的URL</title>
</head>
<body>
<script type="text/javascript">
document.write("<b>当前页面的URL：</b>"+document.URL); //获取当前页面的URL地址
</script>
</body>
</html>（2）运行页面
https://www.xinyizhishu.top/jsC/sc/10_3/
（3）Tips
document.URL 。
4. 练习4
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>获取当前文档的状态</title>
</head>
<body>
<script type="text/javascript">
document.write("<b>当前文档的状态：</b>"+document.readyState);
</script>
</body>
</html>（2）运行页面
https://www.xinyizhishu.top/jsC/sc/10_4/
（3）Tips
document.readyState 。
5. 练习5
（1）源代码
<!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>
<pre>
<script type="text/javascript">
document.writeln("在pre标记内使用writeln()方法输出的第一段内容！");
document.write("在pre标记内使用write() 方法输出的第一段内容！");
document.writeln("在pre标记内使用writeln()方法输出的第二段内容");
</script>
</pre>
</body>
</html>（2）运行页面
https://www.xinyizhishu.top/jsC/sc/10_5/
（3）Tips
line，pre中有效 。
6. 练习6
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>打开新文档并输出内容</title>
<script type="text/javascript">
function oc(){
var dw;
dw=window.open();
dw.document.open();
dw.document.write("<html><head><title>一个新的文档</title></head>");
dw.document.write("<body>");
dw.document.write("<img src='1.jpg'><br>")
dw.document.write("这里是写入的新内容<br>");
dw.document.write("</body></html>");
dw.document.close();
}
</script>
</head>
<body>
<input type="button" value="打开一个新文档" onclick="oc();"/>
</body>
</html>（2）运行页面
https://www.xinyizhishu.top/jsC/sc/10_6/
（3）Tips
window.open，document.open，document.close 。
7. 练习7
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>动态添加一个文本框</title>
<script type="text/javascript">
function addText(){
var txt=document.createElement("input");
txt.type="text";
txt.name="txt";
txt.value="动态添加的文本框";
document.fm1.appendChild(txt);
}
</script>
</head>
<body>
<form name="fm1">
<input type="button" name="btn1" value="动态添加文本框" onclick="addText()">
</form>
</body>
</html>（2）运行页面
https://www.xinyizhishu.top/jsC/sc/10_7/
（3）Tips
document.createElement，txt.type，txt.name，txt.value，document.fm1.appendChild 。
8. 练习8
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>获取文本框并修改其内容</title>
</head>
<body>
<input type="text" id="txt" value="初始文本内容">
<input type="button" value="更改文本内容" name="btn" onclick="c1()">
<script type="text/javascript">
function c1(){
var t=document.getElementById("txt");
t.value="修改文本内容";
}
</script>
</body>
</html>（2）运行页面
https://www.xinyizhishu.top/jsC/sc/10_8/
（3）Tips
t.value 。
二、编程训练
1. 训练1
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>互换颜色</title>
</head>
<body style="background-color: #FFCCFF; color: #000000;">
明日科技出品必属佳品
<input type="button" value="交互颜色" onClick="change()">
<script type="text/javascript">
function change(){
var fgColor = document.body.style.color;
var bgColor = document.body.style.backgroundColor;
document.body.style.backgroundColor=fgColor;
document.body.style.color=bgColor;
}
</script>
</body>
</html>（2）运行页面
https://www.xinyizhishu.top/jsC/sc/10_9/
（3）Tips
这个样子。
2. 训练2
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
var url = document.URL;
document.write("<br>当前文档的url："+url);
document.write("<br>当前文档的url.indexOf："+url.indexOf("\\"));
document.write("<br>当前文档的url.lastIndexOf反斜杠："+url.lastIndexOf("\\"));
document.write("<br>当前文档的url.lastIndexOf正斜杠："+url.lastIndexOf("/"));
var position = 0;
if(url.indexOf("\\")!=-1){
position = url.lastIndexOf("\\");
}else{
position = url.lastIndexOf("/");
}
var filename = url.substr(position+1);
document.write("<br>当前文档的文件名称："+filename);
</script>
</body>
</html>（2）运行页面
https://www.xinyizhishu.top/jsC/sc/10_10/
（3）Tips
url.indexOf，lastIndexOf，substr。
3. 训练3
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form name="form1">
<input type="button" name="btn1" value="添加文字" onclick="addWord()">
</form>
<p id="show"></p>
<script type="text/javascript">
var str = "JavaScript从入门到精通";
var i=0;
function addWord(){
var txt=document.createElement("span");
txt.style.color="#FF0000";
txt.innerHTML=str.charAt(i);
document.getElementById("show").appendChild(txt);
i++;
}
</script>
</body>
</html>（2）运行页面
https://www.xinyizhishu.top/jsC/sc/10_11/
（3）Tips
charAt，character at，累加的效果。
三、实践与练习
1. 实践1
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.top{
width: 400px;
height: 80px;
line-height: 80px;
font-size: 36px;
text-align: center;
}
.content{
width: 400px;
line-height: 40px;
font-size: 24px;
text-align: center;
}
</style>
</head>
<body>
<form name="form">
<select name="theme" onChange="change(this)">
<option value=" ">请选择主题</option>
<option value="black yellow">黑色主题</option>
<option value="gray lightgreen">灰色主题</option>
<option value="green white">绿色主题</option>
</select>
</form>
<div>
李白《行路难•其一》
</div>
<div>
金樽清酒斗十千，玉盘珍羞直万钱。
停杯投箸不能食，拔剑四顾心茫然。
欲渡黄河冰塞川，将登太行雪满山。
闲来垂钓碧溪上，忽复乘舟梦日边。
行路难！行路难！多歧路，今安在？
长风破浪会有时，直挂云帆济沧海。
</div>
<script type="text/javascript">
function change(obj){
alert(obj.value);
var colorArr=obj.value.split(" ");
document.body.style.backgroundColor=colorArr[0];
document.body.style.color=colorArr[1];
}
</script>
</body>
</html>（2）运行页面
https://www.xinyizhishu.top/jsC/sc/10_12/
（3）Tips
onChange，change(this) 。
2. 实践2
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box{
display: none;
width: 260px;
height: 260px;
text-align: center;
border: 1px solid blue;
position: relative;
}
.box img{
margin-top: 30px;
}
.box span{
width: 52px;
height: 16px;
position: absolute;
top:3px;
right: 2px;
background-image:url(delete.gif);
cursor: pointer;
}
</style>
</head>
<body>
<a href="javascript:void(0)" onClick="openWin()">
打开图片对话框</a>
<div id="box">
<span onClick="closeWin()"></span>
<img src="face.png">
</div>
<script type="text/javascript">
function openWin(){
var box = document.getElementById('box');//获取id为box的元素
box.style.display='block'; //设置元素显示
}
function closeWin(){
var box = document.getElementById('box');//获取id为box的元素
box.style.display='none';//设置元素隐藏
}
</script>
</body>
</html>（2）运行页面
https://www.xinyizhishu.top/jsC/sc/10_13/
（3）Tips
比较明确 。
3. 实践3
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
var i=0;
function addPic(){
var imgArr=new Array("5.jpg","6.jpg","7.jpg","8.jpg","9.jpg","10.jpg");
var img=document.createElement("img");
img.src="images/"+imgArr[i];
img.style.margin="5px";
if(i<imgArr.length){
document.getElementById("show").appendChild(img);
}
i++;
}
</script>
</head>
<body>
<form name="form1">
<input type="button" name="btn1" value="添加用户头像" onclick="addPic()">
</form>
<p id="show"></p>
</body>
</html>（2）运行页面
https://www.xinyizhishu.top/jsC/sc/10_14/
（3）Tips
这样实现的。