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>