目录
1.列表高亮显示(onmouseover和onmouseout 事件)
3.根据name属性值获取元素(仅针对表单元素,表单元素才有name属性)
1.列表高亮显示(onmouseover和onmouseout 事件)
2.显示和隐藏二维码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.nodeSmall {
width: 50px;
height: 50px;
background: url(images/bgs.png) no-repeat -159px -51px;
position: fixed;
right:10px;
top:45%;
}
.erweima {
position: absolute;/*相对于class="nodeSmall"的div*/
top: 0;
left: -155px;
}
.nodeSmall a {
display: block;
width: 50px;
height: 50px;
}
.hide {
display: none;
}
.show {
display: block;
}
</style>
</head>
<body>
<div class="nodeSmall" id="node_small">
<a href="#"></a><!--锚点-->
<div class="erweima hide" id="er">
<img src="images/code.jpg" alt=""/>
</div>
</div>
<script>
function my$(id) {
return document.getElementById(id);
}
//先获取最外面的div,再获取该标签内的第一个a标签
var aObj=my$("node_small").getElementsByTagName("a")[0];
//为a注册鼠标进入
aObj.onmouseover=function () {
my$("er").className="erweima show";
};
//为a注册鼠标离开
aObj.onmouseout=function () {
my$("er").className="erweima hide";
};
</script>
</body>
</html>
效果:(鼠标放上去时)
参考图片:bgs.png和code.jpg
3.根据name属性值获取元素(仅针对表单元素,表单元素才有name属性)
4.根据类样式的名字(class属性值)获取元素
5.获取元素的其他方式(根据选择器)
6.*总结获取元素的方式(*为使用频率较高的)
1. 根据id属性的值获取元素,返回一个元素对象:
*document.getElementById("id属性的值");
2.根据标签名字获取元素,返回一个伪数组,里面保存了多个的DOM对象:
*document.getElementsByTagName("标签名字");
3.根据name属性的值获取元素,返回一个伪数组,里面保存了多个的DOM对象:
document.getElementsByName("name属性的值");
4.根据类样式的名字(class属性值)来获取元素,返回一个伪数组,里面保存了多个的DOM对象:
*document.getElementsByClassName("类样式的名字");
5.根据选择器获取元素,返回一个元素对象:
document.querySelector("选择器的名字");
6.根据选择器获取元素,返回一个伪数组,里面保存了多个的DOM对象:
document.querySelectorAll("选择器的名字");