一，本例主要包括的使用getElementById 返回对拥有指定id的第一个对象引用，createElement 创建一个属性节点，getElementsByTagName 返回带有指定标签名的集合对象和onmouseover 用户在一个HTML元素上移动鼠标，onmouseout 用户从一个HTML元素上移开鼠标还有window中的一些方法
<!DOCTYPE html><html> ???????<head lang="en"> ???????????<meta charset="UTF-8"> ???????????<title></title> ???????????<style type="text/css"> ???????????????*{ ???????????????????margin:0px; ???????????????????padding:0px ???????????????} ???????????????.box{ ???????????????????background-color: burlywood; ???????????????} ???????????????.content td{ ???????????????????width: 50px; ???????????????????height: 50px; ???????????????????background-color: gray; ???????????????} ???????????????table td{ ???????????????????text-align: center; ???????????????????overflow:hidden; ???????????????} ???????????????.setWidth{ ???????????????????/*通过3秒渐变赋值*/ ???????????????????transition: all 3s; ???????????????} ???????????????/*旋转360度*/ ???????????????@keyframes myfirst{ ???????????????????to{ ??????????????????????transform: rotate(0deg); ???????????????????} ???????????????????from{ ???????????????????????transform: rotate(360deg); ???????????????????} ???????????????} ???????????????/*从实体逐渐变透明*/ ???????????????@keyframes myfirst2{ ???????????????????to{ ???????????????????????filter:alpha(Opacity=10); ???????????????????????opacity: 0.1; ???????????????????} ???????????????????from{ ???????????????????????filter:alpha(Opacity=80); ???????????????????????opacity: 1; ???????????????????} ???????????????} ???????????????.over-out2{ ???????????????????animation: myfirst2 2s; ???????????????} ???????????????.over-out{ ???????????????????animation: myfirst 1s; ???????????????} ???????????????.remove-sty{ ???????????????????filter:alpha(Opacity=80); ???????????????????opacity: 1; ???????????????} ???????????</style> ????????????<!-- js是解析性语言，因此网页中的元素必须加载过后才可以访问--> ???????????<script language="JavaScript"> ????????????????function $(oId){ ????????????????????//通过oId寻找该节点 ????????????????????var obj=document.getElementById(oId); ????????????????????return obj; ????????????????} ????????????????function addClass(obj, cn){ ???????????????????var ??cNames=obj.className; ????????????????????????if(cNames.length==0){ ?????????????????????????????obj.className = cn; ????????????????????????}else{ ?????????????????????????????obj.className +=(" "+cn); ????????????????????????} ????????????????} ????????????????//字符串有一个split方法，用于拆分字符串 ????????????????function removeClass(obj,cn){ ?????????????????????var cs=obj.className; ?????????????????????????//使用split方法拆分cs字符串，赋值到cs数组 ?????????????????????????cs =cs.split(" "); ???????????????????????for(var i=0;i<cs.length;i++){ ???????????????????????????if(cs[i]==cn){ ???????????????????????????????//删除从i开始的一个字符， ???????????????????????????????cs.splice(i,1); ???????????????????????????} ???????????????????????} ????????????????????//重新把数组cs转换成字符串，然后赋值给obj.ClassName完成删除 ???????????????????????obj.className=cs.join(" "); ????????????????} ????????????????function removeNode(obj){ ????????????????????//window提示消息 ????????????????????var f = window.confirm(‘是否删除图片‘); ????????????????????if(f){ ????????????????????????addClass(obj,"over-out2"); ????????????????????????//setTimeout延迟2秒调用内部函数 ????????????????????????setTimeout(function(){ ????????????????????????????//通过寻找该节点的父节点来删除该节点 ????????????????????????????obj.parentNode.removeChild(obj); ????????????????????????},2000); ????????????????????}else{ ????????????????????????alert("取消删除"); ????????????????????} ????????????????} ????????????????function initImgs(){ ???????????????????????var imgs = new Array(); ??????????????????????//寻找当前页面的第二个自节点 ??????????????????????// var oBody=document.documentElement.lastChild || ?document.body; ???????????????????????imgs.push("n1.jpg");imgs.push("n2.jpg");imgs.push("n3.jpg");imgs.push("n4.jpg"); ???????????????????????imgs.push("n5.jpg"); ???????????????????????for(var i=0;i<imgs.length;i++){ ???????????????????????????//200px ???????????????????????????//createElement添加img节点 ???????????????????????????var imgObj=document.createElement("img"); ???????????????????????????var imgSrc = imgs[i]; ???????????????????????????imgObj.src = imgSrc; ???????????????????????????//调用addClass方法为节点添加class属性 ???????????????????????????addClass(imgObj,"setWidth"); ???????????????????????????addClass(imgObj,"remove-sty"); ???????????????????????????//为节点添加属性 ???????????????????????????imgObj.style.width = "0px"; ???????????????????????????imgObj.style.marginLeft = "0px"; ???????????????????????????//通过$方法确认imgObj节点位置 ???????????????????????????$("imgsId").appendChild(imgObj); ???????????????????????????imgObj.onclick=function(){ ???????????????????????????????//单击事件：通过window.event方法来确认被点击的节点 ???????????????????????????????var ss=window.event; ???????????????????????????????var obj=ss.currentTarget; ???????????????????????????????removeNode(obj); ???????????????????????????} ???????????????????????} ???????????????} ????????????????window.onload = function(){ ????????????????????initImgs(); ????????????????} ????????????????function createImgs(){ ????????????????????//寻找imgsId下是img的子节点 ???????????????????var imgs=$("imgsId").getElementsByTagName("img"); ???????????????????for(var i=0;i<imgs.length;i++){ ???????????????????????var imgObj=imgs[i]; ???????????????????????imgObj.style.width = "200px"; ???????????????????????imgObj.style.marginLeft = "20px"; ???????????????????????//鼠标指向元素事件：通过方法为节点添加over-out属性达到旋转目的 ???????????????????????imgObj.onmouseover = function(){ ???????????????????????????addClass(this,"over-out"); ???????????????????????} ???????????????????????//鼠标离开事件：通过方法删除over-out属性 ???????????????????????imgObj.onmouseout = function(){ ???????????????????????????removeClass(this,"over-out"); ???????????????????????} ???????????????????} ???????????????} ???????????</script> ???????</head> ???????<body> ??????????????<button onclick="createImgs()">点击创建图片</button> ?????????????<!-- imgObj.parentNode.removeChild(imgObj);--> ??????????????<div id="imgsId"> ??????????????</div> ???????</body></html><!-- window.onload = function(){ ???$("abc").onmouseover = function(){ ???????this.style.color = "red"; ???????this.style.fontSize = "30px"; ???}; ???$("abc").onmouseout = function(){ ???????this.style.color = "black"; ???????this.style.fontSize = "15px"; ???}function test(){ ???var ev=window.event; ??//任何事件发生的时候都会有一个window.event对象，它表示的是当前事件对象。 ???var obj= ev.currentTarget; ???alert(obj.innerText);}-->js：DOM和响应事件（一）
原文地址：http://www.cnblogs.com/dybe/p/8045021.html