DOM
关注
分享
扫一扫
陆老师Peter
高校计算机专业教师、项目经理、软件研发负责人。
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
DOM(12)——控制层的显示
修改style.display，例子：切换层的显示。 function togglediv() { var div1 = document.getElementById('div1'); if (div1.style.display == '') { div1.style.display = 'no...原创 2019-08-18 23:31:17 · 168 阅读 · 0 评论 -
DOM(3)——动态设置事件
可以在代码中动态设置事件响应函数，就像.Net中btn.Click+=一样。 function f1() { alert("1"); } function f2(){ alert("2"); }<input type="button" onclick="document.on...原创 2019-08-15 12:38:52 · 174 阅读 · 0 评论 -
DOM(4)——window对象
window对象代表当前浏览器窗口，使用window对象的属性、方法的时候可以省略window，比如window.alert('a')可以省略成alert('aa')。(1)alert方法，弹出消息对话框。(2)confirm方法，显示“确定”、“取消”对话框，如果按了【确定】按钮，就返回true，否则就false 。 if (confirm("是否继续？"...原创 2019-08-15 23:29:16 · 332 阅读 · 0 评论 -
DOM(5)——body、document对象的事件，其他事件
1、body、document对象的事件（1）onload：网页加载完毕时触发，浏览器是一边下载文档、一边解析执行，可能会出现JavaScript执行时需要操作某个元素，这个元素还没有加载，如果这样就要把操作的代码放到body的onload事件中，或者可以把JavaScript放到元素之后。元素的onload事件是元素自己加载完毕时触发，body onload才是全部加载完成。（2）onu...原创 2019-08-16 14:03:25 · 523 阅读 · 0 评论 -
DOM(6)——window对象的属性
1、window.location.href='http://www.itcast.cn'，重新导向新的地址，和navigate方法效果一样。window.location.reload() 刷新页面。2、window.event是非常重要的属性，用来获得发生事件时的信息，事件不局限于window对象的事件，所有元素的事件都可以通过event属性取到相关信息。类似于winForm中的e(Eve...原创 2019-08-16 16:53:13 · 310 阅读 · 0 评论 -
DOM(7)——document的属性、方法
一、document的属性document是window对象的一个属性，因为使用window对象成员的时候可以省略window.，所以一般直接写document 。二、document的方法：1、write：向文档中写入内容。writeln，和write差不多，只不过最后添加一个回车。<input type="button" value="点击" onclick="d...原创 2019-08-16 22:41:28 · 1050 阅读 · 0 评论 -
DOM(8)——DOM的动态创建，innerText、innerHTML、value，浏览器兼容性问题
1、document.write只能在页面加载过程中才能动态创建。2、可以调用document的createElement方法来创建具有指定标签的DOM对象，然后通过调用某个元素的appendChild方法将新创建元素添加到相应的元素下。 function showit() { var divMain = document.getElement...原创 2019-08-18 10:34:19 · 382 阅读 · 0 评论 -
DOM(9)——事件冒泡
事件冒泡：如果元素A嵌套在元素B中，那么A被点击不仅A的onclick事件会被触发，B的onclick也会被触发。触发的顺序是“由内而外” 。验证：在页面上添加一个table、table里有tr、tr里有td，td里放一个p，在p、td、tr、table中添加onclick事件响应。 <table onclick="alert('table onclick');"> ...原创 2019-08-18 10:39:13 · 184 阅读 · 0 评论 -
DOM(10)——this
事件中的this。除了可以使用event.srcElement在事件响应函数中，this表示发生事件的控件。只有在事件响应函数中才能使用this获得发生事件的控件，在事件响应函数调用的函数中不能使用，如果要使用则要将this传递给函数或者使用event.srcElement。this和event.srcElement的语义是不一样的，this就是表示当前监听事件的这个对象，event.srcE...原创 2019-08-18 10:49:17 · 280 阅读 · 0 评论 -
DOM(2)——事件
事件：<body onmousedown="alert('哈哈')">当点击鼠标的时候执行onmousedown中的代码。有的时候事件响应的代码太多，就放到单独的函数中： <script type="text/javascript"> function bodymousedown() { alert("网页被点坏了，赔吧！...原创 2019-08-15 11:13:21 · 193 阅读 · 0 评论 -
DOM(1)——DOM入门
1. 学习内容：使用JavaScript操作Dom进行DHTML开发。2. 学习目标：能够使用JavaScript操作Dom实现常见的DHTML效果。3. DHTML ：动态的HTML。DHTML本身不是一种语言，它是HTML、CSS和JavaScript三种语言的集合。作用：使用JavaScript去控制HTML如何显示，控制HTML和CSS。4. CHTML ：1、DOM就是H...原创 2019-08-15 11:01:13 · 347 阅读 · 0 评论 -
DOM(13)——IE中body的事件范围
IE中如果在body上添加onclick、onmousemove等事件响应，那么如果页面没有满，则 “body 中最后一个元素以下（横向不限制）” 的部分是无法响应事件的，必须使用代码在document上监听那些事件，比如document.onmousemove = MovePic 。FF（火狐浏览器）中也差不多。...原创 2019-08-18 23:37:09 · 144 阅读 · 0 评论 -
DOM(14)——元素的位置、大小单位
通过dom读取元素的top、left、width、height等取到的值不是数字，而是“10px”这样的字符串；为这些属性设值的时候IE可以是80、90这样的数字，FF必须是“80px”、“90%”等这样的字符串形式，为了兼容各种浏览器，统一用字符串形式。易错：不要写成div1.style.width=80px，而是div1.style.width='80px' 。如果要修改元素的大小（...原创 2019-08-19 00:01:51 · 303 阅读 · 0 评论 -
DOM(15)——层的操作
1、元素的position 样式值：static（无定位，显示在默认位置）、 absolute（绝对定位，相对于浏览器来说）、 fixed（相对于窗口的固定定位，位置不会随着浏览器的滚动而变化，IE6不支持）、 relative（相对元素默认位置的定位，跟上一个元素之间的相对位置，当上一个元素的位置发生改变时也会跟着改变）。如果要通过代码修改元素的坐标则一般使用absolute，然后修...原创 2019-08-19 13:24:54 · 372 阅读 · 0 评论 -
DOM(16)——form对象
document.getElementById('btn1').click()1、form对象是表单的Dom对象。2、方法：submit()提交表单，但是不会触发onsubmit事件。3、实现autopost，也就是焦点离开控件以后页面立即提交，而不是只有提交submit按钮以后才提交，当光标离开的时候触发onblur事件，在onblur中调用form的submit方法。autopo...原创 2019-08-19 13:56:05 · 247 阅读 · 0 评论 -
DOM(17)——不同浏览器的差异
1、面试题：说说开发项目的时候不同浏览器的不同点，你是怎么解决的？Button,appendChild,insertCell,px2、不同浏览器中对DOM支持的方法不一样：获取网页中那个元素触发了事件：在IE里使用srcElement ；在FireFox里使用target 使用Dom获取和更改网页标签元素内文本：在IE里使用innerText ；在FireFox里使用textCont...原创 2019-08-19 14:12:26 · 313 阅读 · 0 评论 -
DOM(18)——弹出对话框的处理
1、复习，使用window.showModalDialog('dialog.htm')弹出模态对话框。2、给对话框传递参数，使用showModalDialog的第二个参数传递参数，在对话框中用window.dialogArguments获得传递的参数值；对话框中给window.parent.returnValue设定返回值，这样在父窗口中就可以通过showModalDialog返回值读取设置的...原创 2019-08-19 14:58:35 · 423 阅读 · 0 评论 -
DOM(19)——练习
1、案例代码阅读，模拟对话框。先创建一个满浏览器的层，设定透明度，有遮挡的效果，然后再创建一个层（ZIndex>遮挡层的ZIndex）显示对话框内容。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional....原创 2019-08-19 20:14:55 · 156 阅读 · 0 评论 -
DOM(20)——DOM汇总整理
dom ：document object model 文档对象模型1、事件（1）body 事件：onload 、onunload 、onbeforeunload 。（2）常见事件：onclick（单击）、ondblclick（双击）、onkeydown（按键按下）、onkeypress（点击按键）、onkeyup（按键释放）、onmousedown（鼠标按下）、onmousemove（鼠...原创 2019-08-19 20:33:21 · 288 阅读 · 0 评论 -
DOM(11)——修改样式
1、用JavaScript修改样式有两种方法：一种是className，另一种是style 。2、易错：修改元素的样式不是设置class属性，而是className属性。案例：网页开关灯的效果。3、修改元素的样式不能this.style="background-color:Red"。4、易错：单独修改样式的属性使用“style.属性名”。注意在css中属性名在JavaScript中操作...原创 2019-08-18 14:32:45 · 452 阅读 · 0 评论