document对象的getElementById,getElementsByName和getElementsByTagName方法
getElementById根据id属性值来获取元素的对象，比如一个标签的id="qq2"，那么getElementById("qq2")就是获取这标签的对象
了，如果同时有多个标签id使用了qq2这个名称，那么getElementById只承认第一个元素的合法性，也就是获得第一个元素的对象，
这一点是跟name不一样的，像前面我们是用id和name来指定内部样式的，这两个也可以用来给标签取名，如果名称不是某个样式名称的话。
看示例：
<head>
script type="text/javascript">
function Mess()
{
var imgObj=document.getElementById("qq2");
alert(imgObj.src);
}
</script>
</head>
<body>
<a href="" οnclick="Mess()">显示信息</a>
<img id="qq2" src="d:/image/qq2.jpg" />
</body>
而getElementsByName是根据name属性值来获取对象，它返回的是一个数组，因为可能有多个标签使用同一个name，
getElementsByName是允许这种情况的，这一点跟id是不同的。
看示例：
<head>
<script type="text/javascript">
function Mess()
{
var str="";
var imgObj=document.getElementsByName("qq2");
for(var i=0;i<imgObj.length;i++)
{
str+=imgObj[i].src;
str+="\n";
}
alert(str);
}
</script>
</head>
<body>
<a href="" οnclick="Mess()">显示信息</a>
<img name="qq2" src="d:/image/qq2.jpg" />
<img name="qq2" src="d:/image/qq3.jpg"/>
</body>
getElementsByTagName是根据标签名来获取对象的，返回的是一个数组。比如获取所有img标签的对象就是：
document.getElementsByTagName("img")
getElementsByTagName对任何元素对象都有效，比如一个ul对象调用getElementsByTagName("li")，就是获取这个ul对象下的
所有li元素对象，而不是整个HTML的li元素。
id和class区别
之前介绍过了id和class，但没讲过它们有什么区别，现在来说说它们的一些区别。
class属性在对象里的名字是className，看示例：
<style type="text/css">
.ngreen{border:1px solid green; width:200px; height:200px;}
</style>
<script type="text/javascript">
var objFun=function Mess()
{
var divObj=document.getElementById("first")
alert(divObj.className)//是class，输出class属性值，样式名称
}
</script>
</head>
<body>
<a href="" οnclick="Mess();return false">显示</a>
<div id="first" class="ngreen">
</div>
</body>
上面在a标签里的onclick属性里,在函数后面有一个"return false"，这个意思禁止onclick事件的默认处理，a标签的onclick事件默认处理是，
当单击了元素，就链接到href属性指定的网址，所以我们禁止掉这个默认处理，当单击链接的时候，就不会链接到href指定的网址了。
class可以指定多个样式，样式名称用空格分开，如果属性有冲突的话，比如一个样式设置color为red,后面一个样式设置
color为yellow，那么是以后面的为准的，color的颜色为yellow。 而id只可以指定一个样式。
看示例：class指定两个样式
<style type="text/css">
.style1{ border:1px solid red; color:blue;}
.style2{ color:red; font-size:30px;}
</style>
</head>
<body>
<div class="style1 style2">
ABC
</div>
</body>
display可以决定元素是内联元素还是块元素，这一点在前面说过了，也提到display:none可以隐藏元素，那么我们可以通过控制display来模仿一个菜单功能的显示功能，先来显示个简单的工具栏：
<style type="text/css">
.tool{border:1px solid red; height:25px; width:200px; line-height:25px; padding-left:5px;display:none; }
.DisTool{display:block;}
</style>
<script type="text/javascript">
function Display()
{
var divObj=document.getElementById("idtool");
divObj.className+=" DisTool";//再加一个样式，注意DisTool前有个空格
}
function Hidden()
{
var divObj=document.getElementById("idtool");
divObj.className="tool";
}
</script>
</head>
<body>
<a οnmοuseοver="Display()" οnmοuseοut="Hidden()">显示工具栏</a>
<div class="tool" id="idtool">
新建 打开 保存 另存为
</div>
</body>
当鼠标进入a标签元素里就执行Display函数，在这个函数给div添加一个具有display:block属性的样式，当鼠标离开的时候执行Hidden函数，
在这个函数里隐藏div元素。
查看结果地址：http://d3582077.web-209.com/display.html
这里有些问题没解决，比如鼠标离开a元素就隐藏div，应该是鼠标不在a元素和div元素内，才隐藏div元素。
解决这个问题的方法是把div放到a标签内就行了如：
<a οnmοuseοver="Display()" οnmοuseοut="Hidden()">显示工具栏
<div class="tool" id="idtool">
新建 打开 保存 另存为
</div>
</a>
这样div也属于a元素的一份子了。
如果要给div里加a标签的话，那么把最外头的a标签换成li，不然点击不到div里的a标签，如下：
<ul style="list-style:none;margin: 0px; padding: 0px;">
<li οnmοuseοver="Display()" οnmοuseοut="Hidden()"">
<a href="" οnclick="return false;">显示工具栏</a>
<div class="tool" id="idtool">
<a href="http://www.baidu.com" target="_blank">百度</a>
<a href="http://www.g.cn" target="_blank">谷歌</a>
</div>
</li>
</ul>
903
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
