1.简述Core DoM与HTML DOM 访问和修改节点属性值的方法
1、document.getElementById("对象的id");获取单个对象,独立访问某一个对象的时候
2、document.getElementsByName("对象的name");根据网页元素的name获取对象,获取的是节点列表(对象数组)
3、document.getElementsByTagName("标签的名称");根据网页标签名称获取对象(节点列表(对象数组))返回的也是一个对象的数组
2.简述style、className设置元素样式的异同
style 只能写在当前dom上,不能多个dom共用,classname 写一次,可以在多个dom上共用,style的权重值比较大
3.制作点击不同的数字链接显示不同的图片,使用setAttribute()的方式改变图片的名称
实现代码如下:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>图片轮换</title>
<link rel="stylesheet" href="css/scroll.css">
<script type="text/javascript">
function Img(img){
var imgs = document.getElementById("photo");
imgs.setAttribute("src","images/"+img)
}
</script>
</head>
<body>
<div class="scroll">
<div id="num">
<a href="javascript:Img('1.gif')">1</a>
<a href="javascript:Img('2.gif')">2</a>
<a href="javascript:Img('3.jpg')">3</a>
<a href="javascript:Img('4.jpg')">4</a>
<a href="javascript:Img('5.gif')">5</a>
</div>
<img src="images/1.gif" alt="图片" id="photo"/>
</div>
</body>
</html>
4.制作单击"再上传一个图片"按钮就增加一行,可以增加许多相同的图片上传的行
实现代码如下:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>上传文件</title>
<style>
#main {
margin: 0 auto;
width: 500px;
}
dl {
clear: both;
width: 100%;
}
dt {
float: left;
width: 100px;
text-align: right;
}
</style>
<script type="text/javascript">
function Upload() {
var NewUpload = document.getElementById("upload").cloneNode(true);
var OldUpload = document.getElementById("up");
OldUpload.parentNode.insertBefore(NewUpload, OldUpload);
}
</script>
</head>
<body>
<div id="main">
<dl id="upload">
<dt>文件路径:</dt>
<dd><input name="fileImages" type="file" /></dd>
</dl>
<div id="addBtn"><input id="up" type="button" value="再上传一个文件" onclick="Upload()" /></div>
</div>
</body>
</html>
5.制作Tab切换效果,当鼠标指针放在"小说" “非小说” 或 "少儿"上时,标题背景变成另一个图片,鼠标指针变成手状,并且下面的图书标题变成对应类别下面的标题
实现代码如下:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>TAB切换</title>
<link href="css/tab.css" rel="stylesheet">
</head>
<body>
<div class="div_bg">
<ul>
<li id="bg1">
<a class="white" onmousemove="move(1)">小说</a>
</li>
<li id="bg2">
<a class="white" onmousemove="move(2)">非小说</a>
</li>
<li id="bg3">
<a class="white" onmouseover="move(3);">少儿</a>
</li>
</ul>
<div id="book1" style="display: none;">
<a href="#" target=_blank>1.时间旅行者的妻子</a><br>
<a href="#" target=_blank>2.女心理师(下)</a><br>
<a href="#" target=_blank>3.鬼吹灯之精绝古城</a><br>
<a href="#" target=_blank>4.女心理师(上)</a><br>
<a href="#" target=_blank>5.小时候</a><br>
<a href="#" target=_blank>6.追风筝的人</a><br>
<a href="#" target=_blank>7.盗墓笔记2</a><br>
<a href="#" target=_blank>8.输赢</a>
</div>
<div id="book2">
<a href="#" target=_blank>1.人生若只如初见</a><br>
<a href="#" target=_blank>2.高效能人士的七个..</a><br>
<a href="#" target=_blank>3.求医不如求己</a><br>
<a href="#" target=_blank>4.人体使用手册</a><br>
<a href="#" target=_blank>5.孩子,把你的手给我</a><br>
<a href="#" target=_blank>6.别笑!我是英文单词书</a><br>
<a href="#" target=_blank>7.人体经络使用手册</a><br>
<a href="#" target=_blank>8.股市稳赚</a>
</div>
<div id="book3">
<a href="#" target=_blank>1.斯凯瑞金色童书・..</a><br>
<a href="#" target=_blank>2.哈利・波特与“混..</a><br>
<a href="#" target=_blank>3.不一样的卡梅拉(..</a><br>
<a href="#" target=_blank>4.它们是怎么来的</a><br>
<a href="#" target=_blank>5.五・三班的坏小子..</a><br>
<a href="#" target=_blank>6.男生日记</a><br>
<a href="#" target=_blank>7.哈利・波特与魔法石</a><br>
<a href="#" target=_blank>8.噼里啪啦丛书(全7册)</a>
</div>
</div>
</body>
<script type="text/javascript">
function move(a) {
var Now;
if(Number(a)) {
Now = a;
} else {
Now = 1;
}
for(var i = 1; i <= 3; i++) {
if(i == Now) {
document.getElementById("book" + Now).style.display = "block"; //当前层
document.getElementById("bg" + Now).className = "bg";
} else {
document.getElementById("book" + i).style.display = "none"; //隐藏其他层
document.getElementById("bg" + i).className = "nobg";
}
}
}
window.onLoad = move();
</script>
</html>