《DOM学习笔记(一)》由会员分享，可在线阅读，更多相关《DOM学习笔记(一)（11页珍藏版）》请在金锄头文库上搜索。
1、DOM学习笔记（一）一、Dom入门DOM就是HTML页面的模型，将每个标签都做为一个对象， JavaScrip t通过调用DOM中的属性、方法就可以对网页中的文本框、 层等元素进行编程控制。比如通过操作文本框的DOM对象，就可以读 取文本框中的值、设置文本框中的值。JavaScrip tf Dom 就是 C#f .Net Framwork。没有.ne t, C# 只能 for、 while,连 Wr it eLine、MessageBox 都不行。Dom 就是一些让 JavaScrip t 能操作HTML页面控件的类、函数。DOM也像WinForm一样，通过事件、 属性、方法进行编程。CSS+
2、JavaScript+DOM=DHTML二、Dom事件事件：body onmousedown二alert（哈哈）当点击鼠标的时候执行 onmousedown中的代码。有时间事件响应的代码太多，就放到单独的 函数中：script type=text/javascriptfunction bodymousedown（） alert（网页被点坏了，赔吧！ ）；alert（逗你玩的！）；/scriptbody onmousedown=bodymousedown（）bodymousedown后的括号不能丢，因为表示onmousedown事件发生时调 用bodymousedown函数，而不是onmouse
3、dow n事件的响应函数是 bodymousedown。动态设置事件可以在代码中动态设置事件响应函数，就像.Ne t中bt n.Click+二一样 function f1() alert(1);function f2()alert(2);input type=button onclick=document.ondblclick=f1value二关联事件1 /注意fl不要加括号。如果加上括号就变成了执行fl函数，并且将函数的返回值复制给documen t.ondblclick三、window对象window对象代表当前浏览器窗口，使用window对象的属性、方法 的时候可以省略window，比如
4、window.aler t( a)可以省略成 alert(aa) 。(l) aler t方法，弹出消息对话框(2) confirm方法，显示“确定”、“取消”对话框，如果按了【确定】按钮，就返回t rue，否则就falsescript七忑七/jwwamurfunct i on c onf i rjndemo ()if (confLrmC 是否进入?)alert (点击了确定! “)；else皿土(“点击了取消！ “);input type=ffbutton value=wconf ixinDeuiQQnclick=ffcanfirikdeiaa () (3) 重新导航到指定的地址：naviga
5、te(http:/);(4) se tin terval每隔一段时间执行指定的代码，第一个参数为代码 的字符串，第二个参数为间隔时间(单位毫秒)，返回值为定时器的 标识 se tin terval(aler t(hello), 5000);(5) clearIn terval取消setint erva l的定时执行，相当于Timer中的 Enabled二False。因为set In terva l可以设定多个定时，所以 clearinterval要指定清除那个定时器的标识，即setinterval的返回 值。var intervalid = setinterval(alert(hello),
6、5000);clearinterval(intervalid);script tyjie七孟七丿jawaMuri 2war intervalid;fui_Lct 1 un st ar Irrt 已 rval ( J inter valid 二 set Irrt erval ( a 1 已 rt (/ H 已 11 口对 J f 3000);function mtopInterval()clear Int e rval (irit e rval I d); (6) se tTimeou t也是定时执行，但是不像setlnt erval那样是重复的 定时执行，只执行一次，clearTimeout也
7、是清除定时。很好区分 :Interval: 间隔；timeout： 超时。var timeoutId = setTimeout(alert(hello), 2000);案例:实现标题栏走马灯的效果，也就是浏览器的标题文字每隔500ms向右滚动一下。提示：标题为documen t.tit le属性。实现代码 参考备注。练习：刚进入的时候还是向左滚动，点击【向左】按钮就向左连 续滚动，点击【向右】按钮就向右连续滚动。 思路1、全局变量，标志当前的滚动方向，当点击向左的时候 dir二left,向右dir=right。思路2、scrollleft scroolright,向右滚的时候将scrollle
8、ft的 Int erval clear 掉，然后 setInt erva l启动 scrollrigh t日 El 学期欢迎新同学EEfurict ion scroll () var title = documerLt. title :var first = title.charAt(0):var left = title, subst rrng (ls tit le. length); do cument.title = let + first:setlnt erwal scroll ()500);日 四、body、document对象的事件（1）onload:网页加载完毕时触发，浏览器是一
9、边下载文档、一 边解析执行，可能会出现JavaScript执行时需要操作某个元素，这个 元素还没有加载，如果这样就要把操作的代码放到body的onload事件 中，或者可以把JavaScript放到元素之后。元素的onload事件是元素 自己加载完毕时触发，body onload才是全部加载完成（2）onunload：网页关闭（或者离开）后触发。（3）onbeforeunload:在网页准备关闭（或者离开）后触发。在 事件中为window.event.returnValue赋值（要显示的警告消息），这 样窗口离开（比如前进、后退、关闭）就会弹出确认消息 。显示的文字随浏览器版本而有差异。除了有
10、特有的属性之外，当然还有通用的HTML元素的事件： onclick （单击）、ondblclick （双击）、onkeydown （按键按下）、 onkeypress （点击按键）、onkeyup （按键释放）、onmousedown （鼠标按下）、onmousemove （鼠标移动）、onmouseout （鼠标离开元素范围）、 onmouseover （鼠标移动到元素范围）、onmouseup （鼠标按键释放） 等。等。五、window对象的属性window.loca tio n.href二h tt p:/www .it cas ，重新导向 新的地址，和naviga te方法效果一样。23
11、4589101L Ont ml Kmlns- ht 七 口 ： /V vmr.Q/xhtm.Ldmeta Irt i p e quiCont ent - 7yp e content rtezt/htmL : char seif S/titlex_ Cbodyinput id=Buiton2Y typc=nbutt ar.垂 定向 onclick=r locat ion. hrc=? dialog. htmL?window.location.reload（） 刷新页面window.event是非常重要的属性，用来获得发生事件时的信息，事件不局限于window对象的事 件，所有元素的事件都可以通过
12、eve nt属性取到相关信息。类似于 winForm 中的 e（Eve nt Arg）. alt Key属性，bool类型，表示发生事件时alt键是否被按下， 类似的还有ctrlKey、shiftKey属性，例子input type二button value二点击o nclick二if（eve nt.alt Key）aler t（Alt 点击 ）elsealert（普通点击）/； clientX、clientY发生事件时鼠标在客户区的坐标；screenX、 screenY 发生事件时鼠标在屏幕上的坐标； offsetX、 offsetY 发生 事件时鼠标相对于事件源（比如点击按钮时触发onclick ）的坐标。 ret urnValue属性，如果将ret urnValue设置为false，就会取 消默认事件的处理。在超链接的onclick里面禁止访问hre
