DOM

新建一个属性：xx.setAttribute(“a1”,data[0]);xx.setAttribute(“a1”);动态创建varxx=document.createElement(“div”);假设obj为某个HTML控件。obj.offsetTop指obj距离上方或上层控件的位置，整型，单位像素。obj.offsetLeft指obj距离左方或上层控件的位置，整型，单位像素。obj.offsetWidth指obj控件自身的宽度，整型，单位像素。obj.offsetHeight指obj控件自身的高度，整型，单位像素。我们对前面提到的“上方或上层”与“左方或上层”控件作个说明。获取ID：在ie下用event.target.id来获取，其他浏览器用window.event.srcElement.id来获取，ie始终是怪胎DOM入门Javascript--DOM就是C#--.NetFramwork。CSS+javascript+DOM=DHTML事件bodyonmousedown=alert('别点我！')!--当点击鼠标的时候执行onmousedown中的代码。有时间事件响应的代码太多，就放在单独的函数中--!scripttype=text/javascriptfunctionbodyonmousedown(){alert('别点我！');alert('哈哈');}/scriptbodyonmousedown=bodyonmousedown()Bodymousedown后的括号不能丢，因为表示调用bodymousedown函数，而不是onmousedown事件的响应函数是bodymousedown。动态设置事件functionf1(){alert(我是f1);}functionf2(){alert(我是f2);}inputtype=buttononclick=document.ondblclick=f1value=关联事件1///注意f1不要加括号inputtype=buttononclick=document.ondblclick=f2value=关联事件2/Window对象Window对象代表当前浏览器窗口，使用window对象的属性、方法的时候可以省略window，比如window.alert('a')可以省略成alert('aa').(1)alert方法，弹出消息对话框(2)Confirm方法，显示“确定”、“取消”对话框，如果按了【确定】按钮，就返回true，否则就falseif(confirm(是否进入？)){alert(进入了);}else{alert(取消进入);}(3)重新导航到指定的地址：navigate();inputtype=buttonvalue=navigateonclick=navigate('HTMLPageDOM.htm')///在现有窗体中进行(4)SetInterval每隔一段时间执行指定的代码，每一个参数为代码的字符串，第二个参数为间隔时间（单位毫秒），返回值为定时器的标识setInterval(alert('hello'),5000);//注意被执行的代码是字符串格式，也可以写一个匿名函数(5)clearInterval取消setInterval的定时执行，相当于Timer中的Enabled=False。因为setInetval可以设定多个定时，所以clearInetval要指定清楚那个定时器的标识，即setInterval的返回值。intervalId=setInterval(alert('hello'),5000);clearInterval(intervalId);(6)setTimeout也是定时执行，但是不像setInetval那样是重复的定时执行，只执行一次，clearTimeout也是清楚定时。很好区分：Interval：间隔；timeout：超时。vartimeoutId=setTimeout(alert('这是setTimeout'),2000);(7)showModalDialog弹出模态对话框,注意showModalDialog必须在onClick等用户手动触发的事件中才会执行,否则可能会被最新版本的浏览器当成广告弹窗而拦截。•第一个参数为弹出模态窗口的页面地址。onclick=showModelessDialog('HTMLPageDOM.htm')•在弹出的页面中调用window.close()(不能省略window.close()中的window.)关闭窗口,只有在对话框中调用window.close()才会自动关闭窗口,否则浏览器会提示用户进行确认。inputtype=buttononclick=window.close()/(8)showModelessDialog弹出非模态窗口,参数等和showModalDialog一样。走马灯：functionscrollleft(){vartitle=document.title;varfirstch=title.charAt(0);varlefrstr=title.substring(1,title.length);document.title=lefrstr+firstch;}functionscrollright(){vartitle=document.title;varlastch=title.charAt(title.length-1);varlefrstr=title.substring(0,title.length-1);document.title=lastch+lefrstr;}inputtype=buttonvalue=向左onclick=left=setInterval('scrollleft()',1000)/inputtype=buttonvalue=向右onclick=right=setInterval('scrollright()',1000)/inputtype=buttonvalue=停止onclick=clearInterval(left)/Body、document对象的事件（1）onload：网页加载完毕时触发，浏览器一边下载文档、一边解析执行，可能会出现javascript执行时需要操作某个元素，这个元素还没有加载，如果这样就要操作的代码放在body的onload事件中，或者可以把javascript放到元素之后。元素onload事件是元素自己加载完毕时触发，bodyonload才是全部加载完成。bodyonload=btn.value='ok';inputtype=buttonid=btnvalue=模态对话框onclick=showModelessDialog('Dialog.htm')/（2）Onunload：页面关闭（或者）后触发。onunload=alert('大爷你别走！')（3）Onbeforeunload：在页面准备关闭（或者离开）后触发。在事件中为“window.event.returnValue赋值（要显示的警告消息），这样窗口（比如前进、后退、关闭）就会弹出确认消息bodyonbeforeunload=window.event.returnValue='文章会丢失';其他事件除了有特有的属性之外，当然还有通用的HTML元素的事件：onclick（单击）、ondbclick（双击）、onkeydown（按键按下）、onkeypress（单击按键）、onkeyup（按键释放）、onmousedown（鼠标按下）、onmousemove（鼠标移动）、onmouseout（鼠标离开元素范围）、onmouseover（鼠标移动到元素范围）、onmouseup（鼠标按键释放）,onfocus(焦点进入控件的事件),onblur(焦点离开控件的事件)等。Window对象属性11.window.location.href='重新导向新的地址,和navigate方法效果一样。window.location.reload()刷新页面2.window.event是非常重要的属性,用来获得发生事件时的信息,事件不局限于window对象的事件,所有元素的事件都可以通过event属性取到相关信息。类似于winForm中的e(EventArg).•altKey属性,bool类型,表示发生事件时alt键是否被按下,类似的还有ctrlKey、shiftKey属性,例子inputtype=buttonvalue=点击onclick=if(window.event.ctrlKey){alert('按下了ctrl！');}elsealert('普通点击！');•clientX、clientY发生事件时鼠标在客户区的坐标;screenX、screenY事件时鼠标在屏幕上的坐标;offsetX、offsetY发生事件时鼠标相对于事源(比如点击按钮时触发onclick)的坐标。•returnValue属性,如果将returnValue设置为false,就会取消默认事件的理。在超链接的onclick里面禁止访问href的页面。在表单校验的时候禁交表单到服务器,防止错误数据提交给服务器、防止页面刷新。ahref==alert('禁止访问！');window.event.returnValue=falsebaidu/aformaction=a.aspxinputtype=submitvalue=提交onclick=alert('数据有问题！');window.event.returnValue=false;//form•srcElement,获得事件源对象。几个事件共享一个事件响应函数用。•keyCode,发生事件时的按键值。•button,发生事件时鼠标按键,1为左键,2为右键,3为左右键同时按。bodyonmousedown=if(event.button==2){alert('禁止复制');}Window对象的属性2�(*)screen对象,屏幕的信息alert(分辨率:+screen.width+*+screen.height);if(screen.width1024||screen.height768){alert(分辨率太低!);}�clipboardData对象,对粘贴板的操作。clearData(Text)清空粘贴板;getData(Text)读取粘贴板的值,返回值为粘贴板中的内容;setData(Text,val),设置粘贴板中的值。•案例:复制地址给友好。见备注。inputtype=buttonvalue=分享本页给好友onclick=clipboardData.setData('Text','我发现已经好玩儿的网页'+location.href);alert('已经将地址放到粘贴板中！')/•当复制的时候body的oncopy方法被触发,直接returnfalse就是禁止复制。bodyoncopy=alert('禁止复制！');returnfalse;•很多元素也有oncopy//复制、onpaste//粘贴事件:加上如returnfalse；则不允许复制粘贴.inputtype=textonpaste=alert('请直接输入不要使用粘贴');returnfalse;/•案例:禁止粘贴帐号。见备注。Window对象的属性3functionmodifyClipboard(){vartxt=clipboardData.getData('Text');txt=txt+本文章转载传智播客技术社区。文章来源：+location.href;clipboardData.setData('Text',txt);}bodyoncopy=set