dom：document object model 文档对象模型

　1、事件
　body 事件：onload onunload onbeforeunload

　body、document对象的事件
　（1）onload：网页加载完毕时触发，浏览器是一边下载文档、一边解析执行，可能会出现JavaScript执行时需要操作某个元素，这个元素还没有加载，如果这样就要把操作的代码放到body的onload事件中，或者可以把JavaScript放到元素之后。元素的onload事件是元素自己加载完毕时触发，body onload才是全部加载完成
　（2）onunload：网页关闭（或者离开）后触发。
　（3）onbeforeunload：在网页准备关闭（或者离开）后触发。在事件中为"window.event.returnValue赋值（要显示的警告消息），这样窗口离开（比如前进、后退、关闭）就会弹出确认消息
　<body onbeforeunload="window.event.returnValue='真的要放弃发帖退出吗？'">。显示的文字随浏览器版本而有差异。

　常见事件：onclick（单击）、ondblclick（双击）、onkeydown（按键按下）、onkeypress（点击按键）、onkeyup（按键释放）、onmousedown（鼠标按下）、onmousemove（鼠标移动）、onmouseout（鼠标离开元素范围）、onmouseover（鼠标移动到元素范围）、onmouseup（鼠标按键释放）
　2、动态设置事件 类似于net中注册事件
　document.ondbclick = f1; //让document.ondbclick的事件处理函数为f1

　window对象代表当前浏览器窗口，使用window对象的属性、方法的时候可以省略window，比如window.alert('a')可以省略成alert('aa')。

　(1)alert方法，弹出消息对话框
　(2)confirm方法，显示“确定”、“取消”对话框，如果按了【确定】按钮，就返回true，否则就false
　if (confirm("是否继续？")) {
　　alert("确定");
　}
　else {
　　alert("取消");
　}

　(3)重新导航到指定的地址：navigate("http://www.rupeng.com");
　(4)setInterval每隔一段时间执行指定的代码，第一个参数为代码的字符串，第二个参数为间隔时间（单位毫秒），返回值为定时器的标识
　(5)clearInterval取消setInterval的定时执行，相当于Timer中的Enabled=False。因为setInterval可以设定多个定时，所以clearInterval要指定清除那个定时器的标识，即setInterval的返回值。
　var intervalId = setInterval("alert('hello')", 5000);
　clearInterval(intervalId);

　(6)setTimeout也是定时执行，但是不像setInterval那样是重复的定时执行，只执行一次，clearTimeout也是清除定时。很好区分：Interval：间隔；timeout：超时。
　var timeoutId = setTimeout("alert('hello')", 2000);
　案例：实现标题栏走马灯的效果，也就是浏览器的标题文字每隔500ms向左滚动一下。提示：标题为document.title属性。思路1、全局变量，标志当前的滚动方向，当点击向左的时候dir="left",向右dir="right"。
　思路2、scrollleft scroolright,向右滚的时候将scrollleft的Interval clear掉，然后setInterval启动scrollright

var dir = "left";
        function scroll() {
            var title=document.title;
            if (dir == "left") {
                document.title = title.substr(, title.length - ) + title.charAt();
            } else {
                document.title = title.charAt(title.length - ) + title.substr(, title.length - );
            }
        }
        function setDir(d) {
            dir = d;
        }
        setInterval();

　(7)showModalDialog弹出模态对话框，注意showModalDialog必须在onClick等用户手动触发的事件中才会执行，否则可能会被最新版本的浏览器当成广告弹窗而拦截。
　第一个参数为弹出模态窗口的页面地址。
　在弹出的页面中调用window.close()（不能省略window.close()中的window.）关闭窗口，只有在对话框中调用window.close()才会自动关闭窗口，否则浏览器会提示用户进行确认。
　(8)showModelessDialog弹出非模态窗口，参数等和showModalDialog一样。

　window对象的属性:
　window.location.href='http://www.itcast.cn'，重新导向新的地址，和navigate方法效果一样。window.location.reload() 刷新页面
　window.event是非常重要的属性，用来获得发生事件时的信息，事件不局限于window对象的事件，所有元素的事件都可以通过event属性取到相关信息。类似于winForm中的e(EventArg).
　altKey属性，bool类型，表示发生事件时alt键是否被按下，类似的还有ctrlKey、shiftKey属性，例子 <input type="button" value="点击" onclick="if(event.altKey){alert('Alt点击')}else{alert('普通点击')}" /> ；
　clientX、clientY 发生事件时鼠标在客户区的坐标；screenX、screenY 发生事件时鼠标在屏幕上的坐标；offsetX、offsetY 发生事件时鼠标相对于事件源（比如点击按钮时触发onclick）的坐标。
  returnValue属性，如果将returnValue设置为false，就会取消默认事件的处理。在超链接的onclick里面禁止访问href的页面。在表单校验的时候禁止提交表单到服务器，防止错误数据提交给服务器、防止页面刷新。
  srcElement，获得事件源对象。几个事件共享一个事件响应函数用。
  keyCode，发生事件时的按键值。
  button，发生事件时鼠标按键，1为左键，2为右键，3为左右键同时按。<body onmousedown="if(event.button==2){alert('禁止复制');}">

（*）screen对象，屏幕的信息:alert("分辨率：" + screen.width + "*" + screen.height);
clipboardData对象，对粘贴板的操作。clearData("Text")清空粘贴板；getData("Text")读取粘贴板的值，返回值为粘贴板中的内容；setData("Text",val)，设置粘贴板中的值。
　当复制的时候body的oncopy方法被触发，直接return false就是禁止复制。<body oncopy="alert('禁止复制！');return false;"
很多元素也有oncopy、onpaste事件：不能直接在oncopy中执行对粘贴板的操作，因此设定定时器，0.1秒以后执行。

　history操作历史记录
　window.history.back()后退；window.history.forward()前进。也可以用window.history.go(-1)、window.history.go(1)前进

Dom编程（一）的更多相关文章

  1. 读书笔记：JavaScript DOM 编程艺术（第二版）

    读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...

  2. 《高性能javascript》 领悟随笔之-------DOM编程篇(二)

    <高性能javascript> 领悟随笔之-------DOM编程篇二 序:在javaSctipt中,ECMASCRIPT规定了它的语法,BOM实现了页面与浏览器的交互,而DOM则承载着整 ...

  3. 《高性能javascript》 领悟随笔之-------DOM编程篇

    <高性能javascript> 领悟随笔之-------DOM编程篇一 序:在javaSctipt中,ECMASCRIPT规定了它的语法,BOM实现了页面与浏览器的交互,而DOM则承载着整 ...

  4. Dom编程

    Dom编程 Dom是一种用于HTML和XML文档的编程接口,是HTML页面的模型,将每个标签都做为一个对象,JavaScript通过调用DOM中的属性.方法就可以对网页中的文本框.层等元素进行编程控制 ...

  5. JavaScript DOM 编程艺术·setInterval与setTimeout的动画实现解析

    先贴上moveElement()函数的大纲,为了方便观看,删了部分代码,完整版粘到文章后面. function moveElement(elementID,final_x,final_y,interv ...

  6. 高性能JavaScript笔记一（加载和执行、数据访问、DOM编程）

    写在前面 好的书,可能你第一遍并不能领会里面的精魂,当再次细细品评的时候,发现领悟的又是一层新的含义 (这段时间,工作上也不会像从前一样做起来毫不费力,开始有了新的挑战,现在的老大让我既佩服又嫉妒,但 ...

  7. DOM编程（每天有学习一点篇）

    每次想到“DOM”编程就会自然联想到“性能瓶颈”.我觉得有两部分原因: 1.DOM自己本身操作代价昂贵,因为浏览器通常要求DOM 实现和JavaScript 实现保持相互独立: 2.嘿嘿,本人自身的原 ...

  8. web前端基础——初识HTML DOM编程

    1 HTML DOM编程概述 文件对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理HTML的标准编程接口.由于HTML文档被浏览器解析后就是一棵DOM树,要改 ...

  9. 160826、浏览器渲染页面过程描述，DOM编程技巧以及重排和重绘

    一.浏览器渲染页过程描述   1.浏览器解析html源码,然后创建一个DOM树. 在DOM树中,每一个HTML标签都有一个对应的节点(元素节点),并且每一个文本也都有一个对应的节点(文本节点). DO ...

  10. JavaScript DOM 编程艺术（第2版）读书笔记（1）

    JavaScript 简史 JavaScript 是Netscape公司与Sun公司合作开发的.在 JavaScript 1.0发布时,Netscape Navigator主宰着浏览器市场.微软在推出 ...

随机推荐

  1. D0

    刚到长乐就被机房里众大神的气场给压倒了 orz....... 然后默默的感觉到自己貌似已经有一个星期没有打题了...就各种忧伤.... 还是说一下今天的计划吧 嗯傍晚5.30-6.00 &&a ...

  2. Microsoft Push Notification Service（MPNS）的最佳体验

    如何获得 Microsoft Push Notification Service(MPNS)的最佳体验 有很多同学抱怨MPNS的各种问题,其中包括服务超时.返回各种错误代码不知如何处理等等..今天我用 ...

  3. Hive中抽取连续多天登录用户

    昨天群上有人发个阿里的面试题,题目描述大概如下: 数据源:用户登录表,只有俩个字段,uid和dt 试用HQL抽取出连续登录了K天的用户uid 第一个想法就是直接用一个UDF解决,按uid分组,把dt收 ...

  4. 安装mysql-python报错:UnicodeDecodeError: 'ascii' codec can't decode byte 0xe2 in position 65: ordinal not in range(128)

    安装mysql-python报错: UnicodeDecodeError: 'ascii' codec can't decode byte 0xe2 in position 65: ordinal n ...

  5. mvc的验证

    mvc的验证锦上添点花(2) 上一篇文章我们演示了通过对jquery.validate.unobtrusive.js做点小修改,如何给MVC的验证添点花 主要还是修改了onError与onSucces ...

  6. zTree应用实例详讲(3)

    zTree应用实例详讲(3) 上一讲中,已经讲到了重命名与删除.那么这一讲,我们来做新建文件夹. 其实新建是非常简单的,想一下我们想要的效果:点击新建,然后在一个节点下面出现一个新建的文件夹,并且与此 ...

  7. javascript语言精粹mindmap

    javascript语言精粹mindmap 最近刚刚读完<javascript语言精粹>,感觉其中的内容确实给用js作开发语言的童鞋们提了个醒——js里面坑很多啊 不过,我也并不完全认同书 ...

  8. 将SQL获取的信息传递到Email中

    将SQL获取的信息传递到Email中 最近在为公司财务开发一个邮件通知时遇到了一个技术问题.原来我设计SSIS的是每天将ERP系统支付数据导出到财务支付平台后 Email 通知财务,然后财务到支付平台 ...

  9. Nunit NMock Ncover单元测试

    Nunit中如何进行事务性单元测试   单元测试要求:单元测试方法并不真正去变更数据库,也就是说单元测试不依赖于数据库中的数据.那我们如何解决执行单元测试方法后,不变更数据库中数据呢? 一般的解决方案 ...

  10. [分享]CSS美化浏览器滚动条

    今天看到一个站点的滚动条样式特别漂亮,顺便上网搜了一些相关资料,分享给大家: PS:兼容所有浏览器的滚动条样式目前是不存在的. IE下的滚动条样式 IE是最早提供滚动条的样式支持,好多年了,但是其它浏 ...