JS入门到精通 第11章 文档对象模型（DOM）
导读：一、练习 1. 练习1 （1）源代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>访问指定节点</title> &...
一、练习
1. 练习1
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>访问指定节点</title>
</head>
<body id="b1">
<h3>三号标题</h3>
<b>加粗内容</b>
BODYBODYBODYBODYBODY
<script type="text/javascript">
var by=document.getElementById("b1");
var str;
str="节点名称："+by.nodeName+"\n";
str+="节点类型："+by.nodeType+"\n";
str+="节点值："+by.nodeValue+"\n";
alert(str);
</script>
</body>
</html>
（2）运行页面
https://www.xinyizhishu.top/jsC/sc/11_1/
（3）Tips
.nodeName，.nodeType 。
2. 练习2
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>遍历文档树</title>
</head>
<body>
<h3 id="h1">三号标题</h3>
<b>加粗内容</b>
<form name="frm" action="#" method="get">
节点名称：<input type="text" id="na"><br>
节点类型：<input type="text" id="ty"><br>
节点的值：<input type="text" id="va"><br>
<input type="button" value="父节点" onclick="txt=nodeS(txt,'parent');">
<input type="button" value="第一个子节点" onclick="txt=nodeS(txt,'firstChild');">
<input type="button" value="最后一个子节点" onclick="txt=nodeS(txt,'lastChild');"><br>
<input name="button" type="button" onclick="txt=nodeS(txt,'previousSibling');" value="前一个兄弟节点">
<input type="button" value="后一个兄弟节点" onclick="txt=nodeS(txt,'nextSibling');">
<input type="button" value="返回根节点" onclick="txt=document.documentElement;txtUpdate(txt);">
</form>
<script type="text/javascript">
function nodeS(txt,nodeName){
switch(nodeName){
case "previousSibling":
if(txt.previousSibling){
txt=txt.previousSibling;
}else
alert("无兄弟节点");
break;
case "nextSibling":
if(txt.nextSibling){
txt=txt.nextSibling;
}else
alert("无兄弟节点");
break;
case "parent":
if(txt.parentNode){
txt=txt.parentNode;
}else
alert("无父节点");
break;
case "firstChild":
if(txt.hasChildNodes()){
txt=txt.firstChild;
}else
alert("无子节点");
break;
case "lastChild":
if(txt.hasChildNodes()){
txt=txt.lastChild;
}else
alert("无子节点")
break;
}
txtUpdate(txt);
return txt;
}
function txtUpdate(txt){
window.document.frm.na.value=txt.nodeName;
window.document.frm.ty.value=txt.nodeType;
window.document.frm.va.value=txt.nodeValue;
}
var txt=document.documentElement;
txtUpdate(txt);
</script>
</body>
</html>
（2）运行页面
https://www.xinyizhishu.top/jsC/sc/11_2/
（3）Tips
.previousSibling，.nextSibling，.parent，.firstChild，lastChild，txt经返回之后就一直用那个值 。
3. 练习3
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>补全古诗最后一句</title>
<style type="text/css">
#poemDiv{
width:300px;
height:180px;
background:url(poem.png);
font-weight:bolder;
}
.poemtitle{
height:50px;
line-height:50px;
margin-left:120px;
font-size:24px;
color:#0000FF;}
.poem{
margin:0 auto;
margin-left:100px;
height:30px;
line-height:30px;
color:#0000FF;
font-size:18px;
}
</style>
</head>
<body>
<div id="poemDiv">
<div>春晓</div>
<div>春眠不觉晓</div>
<div>处处闻啼鸟</div>
<div>夜来风雨声</div>
</div>
<p></p>
<form name="myform">
请输入最后一句：<input type="text" name="last">
<input type="button" value="添加" onClick="completePoem()">
</form>
<script type="text/javascript">
function completePoem(){
var div = document.createElement('div');//创建div元素
div.className = 'poem';//为div元素添加CSS类
var last = myform.last.value;//获取用户输入的古诗最后一句
txt=document.createTextNode(last);//创建文本节点
div.appendChild(txt);//将文本节点添加到创建的div元素中
document.getElementById('poemDiv').appendChild(div);//将创建的div元素添加到id为poemDiv的div元素中
}
</script>
</body>
</html>
（2）运行页面
https://www.xinyizhishu.top/jsC/sc/11_3/
（3）Tips
.createTextNode，appendChild，.classname 。
4. 练习4
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>创建多个节点</title>
</head>
<body onload="dc()">
<script type="text/javascript">
function dc(){
var aText=["第一个节点","第二个节点","第三个节点","第四个节点","第五个节点","第六个节点"];
for(var i=0;i<aText.length;i++){
var ce=document.createElement("p");
var cText=document.createTextNode(aText[i]);
ce.appendChild(cText);
document.body.appendChild(ce);
}
}
window.onload=dc;
</script>
</body>
</html>
（2）运行页面
https://www.xinyizhishu.top/jsC/sc/11_4/
（3）Tips
<body onload="dc()">这么写无效 。
5. 练习5
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>创建多个节点2</title>
</head>
<body onload="dc()">
<script type="text/javascript">
function dc(){
var aText=["第一个节点","第二个节点","第三个节点","第四个节点","第五个节点","第六个节点"];
var cdf=document.createDocumentFragment();
for(var i=0;i<aText.length;i++){
var ce=document.createElement("b");
var cb=document.createElement("br");
var cText=document.createTextNode(aText[i]);
ce.appendChild(cText);
cdf.appendChild(ce);
cdf.appendChild(cb);
}
document.body.appendChild(cdf);
}
window.onload=dc;
</script>
</body>
</html>
（2）运行页面
https://www.xinyizhishu.top/jsC/sc/11_5/
（3）Tips
document.createDocumentFragment 。
6. 练习6
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>插入节点</title>
</head>
<body>
<h2 id="h">在上面插入节点</h2>
<form id="frm" name="frm">
输入文本：<input type="text" name="txt">
<input type="button" value="前插入" onclick="insetNode('h',document.frm.txt.value);">
</form>
<script type="text/javascript">
function insetNode(nodeId,str){//插入节点的函数
var node=document.getElementById(nodeId);//获取指定id的元素
var newNode=crNode(str);//创建节点
if(node.parentNode) //判断是否拥有父节点
node.parentNode.insertBefore(newNode,node); //将创建的节点插入到指定元素的前面
}
function crNode(str){//创建节点的函数
var newP=document.createElement("p");//创建p元素
var newTxt=document.createTextNode(str);//创建文本节点
newP.appendChild(newTxt);//将文本节点添加到创建的p元素中
return newP;//返回创建的p元素
}
</script>
</body>
</html>
（2）运行页面
https://www.xinyizhishu.top/jsC/sc/11_6/
（3）Tips
node.parentNode.insertBefore 。
7. 练习7
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>复制下拉菜单</title>
</head>
<body>
<form>
<hr>
<select name="shopType" id="shopType">
<option value="%">请选择类型</option>
<option value="0">数码电子</option>
<option value="1">家用电器</option>
<option value="2">床上用品</option>
</select>
<hr>
<div id="di"></div>
<input type="button" value="复制" onClick="AddRow(false)">
<input type="button" value="深度复制" onClick="AddRow(true)">
</form>
<script type="text/javascript">
function AddRow(bl){
var sel=document.getElementById("shopType");//获取指定id的元素
var newSelect=sel.cloneNode(bl);//复制节点
var br=document.createElement("br");//创建br元素
di.appendChild(newSelect);//将复制的新节点添加到指定节点的未尾
di.appendChild(br);//将创建的br元素添加到指定节点的未尾
}
</script>
</body>
</html>
（2）运行页面
https://www.xinyizhishu.top/jsC/sc/11_7/
（3）Tips
.cloneNode(true) 。
8. 练习8
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>删除节点</title>
</head>
<body>
<h2>删除节点</h2>
<div id="di"><p>少林派掌门空闻大师</p><p>武当派掌门张三丰</p><p>峨眉派掌门灭绝师太</p></div>
<form>
<input type="button" value="删除" onclick="delNode()">
</form>
<script type="text/javascript">
function delNode(){
var deleteN=document.getElementById('di');//获取指定id的元素
if(deleteN.hasChildNodes()){//判断是否有子节点
deleteN.removeChild(deleteN.lastChild);//删除节点
}
}
</script>
</body>
</html>
（2）运行页面
https://www.xinyizhishu.top/jsC/sc/11_8/
（3）Tips
.hasChildNodes()，.removeChild，.lastChild 。
9. 练习9
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>替换标记和文本</title>
<style type="text/css">
input{margin-top:3px;}
</style>
</head>
<body>
<b id="b1">要被替换的文本内容</b>
<p>
输入html标签：<input id="bj" type="text" size="15"><br>
输入文本：<input id="txt" type="text" size="15"><br>
<input type="button" value="替换" onclick="repN(bj.value,txt.value)">
<script type="text/javascript">
function repN(bj,str){
var rep=document.getElementById('b1');//获取指定id的元素
if(rep){//如果指定id的元素存在
var newNode=document.createElement(bj);//创建节点
newNode.id="b1";//设置节点的id属性值
var newText=document.createTextNode(str);//创建文本节点
newNode.appendChild(newText);//将文本节点添加到创建的节点元素中
rep.parentNode.replaceChild(newNode,rep);//替换节点
}
}
</script>
</body>
</html>
（2）运行页面
https://www.xinyizhishu.top/jsC/sc/11_9/
（3）Tips
.id，.parentNode.replaceChild 。
10. 练习10
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>在页面的指定位置显示当前日期</title>
</head>
<body>
<div id="clock">当前日期：</div>
<script type="text/javascript">
function clockon(){
var now=new Date(); //创建日期对象
var year=now.getFullYear(); //获取年份
var month=now.getMonth(); //获取月份
var date=now.getDate(); //获取日期
var day=now.getDay(); //获取星期
var week;//声明表示星期的变量
month=month+1;//获取实际月份
var arr_week=new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六");//定义星期数组
week=arr_week[day]; //获取中文星期
time=year+"年"+month+"月"+date+"日 "+week; //组合当前日期
var textTime=document.createTextNode(time); //创建文本节点
document.getElementById("clock").appendChild(textTime); //显示当前日期
}
window.onload=clockon;//页面载入后调用函数
</script>
</body>
</html>
（2）运行页面
https://www.xinyizhishu.top/jsC/sc/11_10/
（3）Tips
.createTextNode 。
11. 练习11
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片轮换</title>
<style type="text/css">
#tabs{
width:1200px;
height:3200px;
overflow:hidden;
float:left;
position:relative;}
/*#tabs>a:not(:first-child){display:none;}*/
</style>
</head>
<body>
<div id='tabs'>
<a name="i" href="#"><img src="video/13.png" width="100%" height="320" /></a>
<a name="i" href="#"><img src="video/14.png" width="100%" height="320" /></a>
<a name="i" href="#"><img src="video/bg.png" width="100%" height="320" /></a>
<a name="i" href="#"><img src="video/poem.png" width="100%" height="320" /></a>
<a name="i" href="#"><img src="video/success.png" width="100%" height="320" /></a>
</div>
<script type="text/javascript">
var len = document.getElementsByName("i");//获取name属性值为i的元素
var pos = 0;//定义变量值为0
function changeimage(){
len[pos].style.display = "none";//隐藏元素
pos++;//变量值加1
if(pos == len.length) pos=0;//变量值重新定义为0
len[pos].style.display = "block";//显示元素
}
setInterval('changeimage()',3000);//每隔3秒钟执行一次changeimage()函数
</script>
</body>
</html>
（2）运行页面
https://www.xinyizhishu.top/jsC/sc/11_11/
（3）Tips
#tabs>a:not(:first-child)，.style.display，这回看清了吧 。
12. 练习12
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>分时问候</title>
</head>
<body>
<div id="time">显示当前时间</div>
<div id="greet">显示问候语</div>
<script type="text/javascript">
function ShowTime(){
var strgreet = "";
var datetime = new Date(); //获取当前时间
var hour = datetime.getHours(); //获取小时
var minu = datetime.getMinutes(); //获取分钟
var seco = datetime.getSeconds(); //获取秒钟
strtime =hour+":"+minu+":"+seco+" "; //组合当前时间
if(hour >= 0 && hour < 8){ //判断是否为早上
strgreet ="早上好";
}
if(hour >= 8 && hour < 11){ //判断是否为上午
strgreet ="上午好";
}
if(hour >= 11 && hour < 13){ //判断是否为中午
strgreet = "中午好";
}
if(hour >= 13 && hour < 17){ //判断是否为下午
strgreet ="下午好";
}
if(hour >= 17 && hour < 24){ //判断是否为晚上
strgreet ="晚上好";
}
window.setTimeout("ShowTime()",1000); //每隔1秒重新获取一次时间
document.getElementById("time").innerHTML="现在是：<b>"+strtime+"</b>";
document.getElementById("greet").innerText="<b>"+strgreet+"</b>";
}
window.onload=ShowTime; //在页面载入后调用ShowTime()函数
</script>
</body>
</html>
（2）运行页面
https://www.xinyizhishu.top/jsC/sc/11_12/
（3）Tips
window.setTimeout，.innerHTML，.innerText 。
二、编程训练
1. 训练1
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="show">
</div>
<p>
<form name="myform">
请输入文字：<input type="text" name="t">
<select name="color">
<option value="red">红色</option>
<option value="green">绿色</option>
<option value="blue">蓝色</option>
</select>
<input type="button" value="添加" onClick="addText()">
</form>
<script type="text/javascript">
function addText(){
var div = document.createElement('div');
var t = myform.t.value;
txt=document.createTextNode(t);
div.style.color=myform.color.value;
div.appendChild(txt);
document.getElementById('show').appendChild(div);
}
</script>
</body>
</html>
（2）运行页面
https://www.xinyizhishu.top/jsC/sc/11_13/
（3）Tips
.createElement，createTextNode 。
2. 训练2
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{margin:0 auto;line-height:23px;}
</style>
</head>
<body>
<div id="h">
月溅星河 长路漫漫<br />
风烟残尽 独影阑珊<br />
谁叫我身手不凡<br />
谁让我爱恨两难<br />
到后来 肝肠寸断
</div>
<p>
<form id="form" name="form">
请输入歌名：<input type="text" name="songname" />
<input type="button" value="添加歌名" onclick="addSongName('h');" />
</form>
<script type="text/javascript">
function addSongName(nodeId){
var newNode=document.createElement("h3");
newNode.style.marginLeft="50px";
var songname=document.form.songname.value;
var newTxt=document.createTextNode(songname);
newNode.appendChild(newTxt);
var node=document.getElementById(nodeId);
if(node.parentNode){
if(songname=="悟空"){
node.parentNode.insertBefore(newNode,node);
}
}
}
</script>
</body>
</html>
（2）运行页面
https://www.xinyizhishu.top/jsC/sc/11_14/
（3）Tips
.node.parentNote.insertBefore()，指定在谁之前 。
3. 训练3
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
ul{list-style-type:none;}
</style>
</head>
<body>
<div>
<h3>最新电影资讯</h3>
<ul id="movie">
<li id="1">1.《愤怒的小鸟》小鸟飞起来</li>
<li id="2">2.《极度惊悚》胆小者勿入</li>
<li id="3">3.《黑海夺金》裘德.洛成摸金校尉</li>
<li id="4">4.《潜伏者》毒师卧底贩毒集团</li>
</ul>
</div>
<form name="myform">
输入影片资讯编号：<input type="text" name="num" />
<input type="button" value="删除" onClick="delMovieInfo()" />
</form>
<script type="text/javascript">
function delMovieInfo(){
var num=myform.num.value;
var deleteN=document.getElementById('movie');
if(deleteN.hasChildNodes()){
deleteN.removeChild(document.getElementById(num));
}
}
</script>
</body>
</html>
（2）运行页面
https://www.xinyizhishu.top/jsC/sc/11_15/
（3）Tips
.hasChildNodes，.removeChild 。
4. 训练4
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
ul{float: left;}
input{display: block;clear: both;}
</style>
</head>
<body>
<ul id="dry"><li>核桃</li><li>杏仁</li><li>草莓</li></ul>
<ul id="fruit"><li>苹果</li><li>葡萄</li><li>花生</li></ul>
<input type="button" value="移动" onclick="move()"/>
<script type="text/javascript">
function move(){
var node1=document.getElementById("dry").lastChild;
var node2=document.getElementById("fruit").lastChild;
document.getElementById("dry").appendChild(node2);
document.getElementById("fruit").appendChild(node1);
}
</script>
</body>
</html>
（2）运行页面
https://www.xinyizhishu.top/jsC/sc/11_16/
（3）Tips
.getElementById().lastChild，.appendChild 。
5. 训练5
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h3>在《天龙八部》中，虚竹是______派的掌门？</h3>
<input type="radio" name="menpai" value="A">A 星宿
<input type="radio" name="menpai" value="B">B 逍遥
<input type="radio" name="menpai" value="C">C 少林
<input type="radio" name="menpai" value="D">D 天山
<br>
<p>
<input type="button" name="but" value="提交答案" onClick="check()">
<script type="text/javascript">
function check(){
var answer;
var menpai = document.getElementsByName('menpai');
for(var i=0; i<menpai.length; i++){
if(menpai[i].checked){
answer=menpai[i].value;
}
}
if(!answer){
alert("请选择答案");
}else if(answer=="B"){
alert("答案正确");
}else{
alert("答案不正确");
}
}
</script>
</body>
</html>
（2）运行页面
https://www.xinyizhishu.top/jsC/sc/11_17/
（3）Tips
.getElementByName 。
6. 训练6
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<a id="mr" href="http://www.mingrisoft.com">明日学院</a>
<input type="button" onclick="changeLink()" value="修改">
<script type="text/javascript">
function changeLink(){
document.getElementById('mr').innerHTML="明日网校";
document.getElementById('mr').href="http://star.mingrisoft.com";
}
</script>
</body>
</html>
（2）运行页面
https://www.xinyizhishu.top/jsC/sc/11_18/
（3）Tips
.innerHTML，.href 。
7. 训练7
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" id="but" value="添加" onclick="addPic()">
<script type="text/javascript">
function addPic(){
resultDiv = document.createElement("div");//创建div元素
resultDiv.innerHTML = "<img src='images/success.png' width='100%' height='100%'>";//为div设置图片
document.body.appendChild(resultDiv);//向body中添加div元素
}
</script>
</body>
</html>
（2）运行页面
https://www.xinyizhishu.top/jsC/sc/11_19/
（3）Tips
还行。
三、实践与练习
1. 实践1
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div><b id="oldnode">一生只爱一个人</b></div>
<a href="javascript:changeFont()">将粗体改为斜体</a>
<script type="text/javascript">
function changeFont(){
var oldnode = document.getElementById('oldnode');
var newnode = document.createElement('i');
var newText=document.createTextNode(oldnode.firstChild.nodeValue);
newnode.appendChild(newText);
oldnode.parentNode.replaceChild(newnode,oldnode);
}
</script>
</body>
</html>
（2）运行页面
https://www.xinyizhishu.top/jsC/sc/11_20/
（3）Tips
.createElement('i')，javascript:changeFont() 。
2. 实践2
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<select name="year" id="year" onchange="getday()">
<script type="text/javascript">
var mydate=new Date();
for(i=1990;i<=mydate.getFullYear();i++){
document.write("<option value='"+i+"' "+(i==1985?"selected":"")+">"+i+"年</option>");
}
</script>
</select>
<select name="month" id="month" onchange="getday()">
<script type="text/javascript">
for(i=1;i<=12;i++){
document.write("<option value='"+i+"' "+(i==1?"selected":"")+">"+i+"月</option>");
}
</script>
</select>
<select name="day" id="day">
<script type="text/javascript">
for(i=1;i<=31;i++){
document.write("<option value='"+i+"' "+(i==1?"selected":"")+">"+i+"日</option>");
}
</script>
</select>
</form>
<script type="text/javascript">
function append(d,v){
var option=document.createElement("option");//创建元素option
option.value=v;//把参数v作为元素的值
option.innerText=v+"日";//把参数v作为元素的显示内容
d.appendChild(option);//把元素option作为参数d的子节点
}
function getday(){
var y=form1.year.value;//取得年份的值
var m=form1.month.value;//取得月份的值
var d=document.getElementById("day");//定位到id=day的节点
d.innerHTML="";//把id=day节点的内容清空
if(m==4 || m==6 || m==9 || m==11){//如果月份的值是4或6或9或11
for(j=1;j<=30;j++){
append(d,j);//把1到30循环加到天数当中
}
}else if(m==2){//如果月份的值是2
if(y%4==0 || y%400==0 && y%100!=0){//如果年份是闰年
for(j=1;j<=29;j++){
append(d,j);//把1到29循环加到天数当中
}
}else{
for(j=1;j<=28;j++){
append(d,j);//不是闰年就把1到28循环加到天数当中
}
}
}else{//否则如果月份的值是1或3或5或7或8或10或12
for(j=1;j<=31;j++){
append(d,j);//把1到31循环加到天数当中
}
}
}
</script>
</body>
</html>
</html>
（2）运行页面
https://www.xinyizhishu.top/jsC/sc/11_21/
（3）Tips
selected专门选一个不存在的值。还是比较好理解的 。
3. 实践3
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form name="form">
<label>请选择表情：</label>
<select name="expression" onChange="showHead(this)">
<option value="images/01.png">发呆</option>
<option value="images/02.png">睡觉</option>
<option value="images/03.png">难过</option>
<option value="images/04.png">调皮</option>
<option value="images/05.png">装酷</option>
</select>
</form>
<div id="box"><img src="images/01.png" id="pp"></div>
<script type="text/javascript">
function showHead(obj){
var imgSrc=obj.value;
var pp=document.getElementById("pp");
//box.innerHTML="";
//var img=document.createElement("img");
pp.src=imgSrc;
//box.appendChild(img);
}
</script>
</body>
</html>
（2）运行页面
https://www.xinyizhishu.top/jsC/sc/11_22/
（3）Tips
直接替换属性我试过了也行。document.createElement("img") ，box.innerHTML="" 。