document对象元素访问

来源：互联网发布：vr球面投影算法编辑：程序博客网时间：2024/06/08 17:19

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="" onclick="Mess()">显示信息</a>
<img id="qq2" src="d:/image/qq2.jpg" />
</body>

而getElementsByName是根据name属性值来获取对象，它返回的是一个数组，因为可能有多个标签使用同一个name，

getElementsByName是允许这种情况的，这一点跟id是不同的。

看示例：

<head>

getElementsByTagName是根据标签名来获取对象的，返回的是一个数组。比如获取所有img标签的对象就是：

document.getElementsByTagName("img")

getElementsByTagName对任何元素对象都有效，比如一个ul对象调用getElementsByTagName("li")，就是获取这个ul对象下的

所有li元素对象，而不是整个HTML的li元素。

id和class区别

之前介绍过了id和class，但没讲过它们有什么区别，现在来说说它们的一些区别。

class属性在对象里的名字是className，看示例：

上面在a标签里的onclick属性里,在函数后面有一个"return false"，这个意思禁止onclick事件的默认处理，a标签的onclick事件默认处理是，

当单击了元素，就链接到href属性指定的网址，所以我们禁止掉这个默认处理，当单击链接的时候，就不会链接到href指定的网址了。

class可以指定多个样式，样式名称用空格分开，如果属性有冲突的话，比如一个样式设置color为red,后面一个样式设置

color为yellow，那么是以后面的为准的，color的颜色为yellow。而id只可以指定一个样式。

看示例：class指定两个样式

display可以决定元素是内联元素还是块元素，这一点在前面说过了，也提到display:none可以隐藏元素，那么我们可以通过控制display来模仿一个菜单功能的显示功能，先来显示个简单的工具栏：

当鼠标进入a标签元素里就执行Display函数，在这个函数给div添加一个具有display:block属性的样式，当鼠标离开的时候执行Hidden函数，

在这个函数里隐藏div元素。

查看结果地址：http://d3582077.web-209.com/display.html

这里有些问题没解决，比如鼠标离开a元素就隐藏div，应该是鼠标不在a元素和div元素内，才隐藏div元素。

解决这个问题的方法是把div放到a标签内就行了如：

<a onmouseover="Display()" onmouseout="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 onmouseover="Display()" onmouseout="Hidden()"">
<a href="" onclick="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>