黑马程序员_学习日记17_Dom(1)

来源：互联网发布：android建服务器软件编辑：程序博客网时间：2024/05/02 00:15

JavaScript和Dom的关系好比C#和.NETFramework的关系。

内容：使用JavaScript操作Dom进行DHTML开发。

Alert都不是JavaScript中定义的东西，它是Dom方法；好比WinForm中的MessageBox

Dom就是HTML页面的模型，将每个标签都作为一个对象。 Dom也想WinForm一样，通过事件、属性、方法进行编程

CSS+JavaScript+Dom=DHTML

事件：

<head>

<scripttype="text/jscript">

functionbodymousedown(){

alert('别点我！');

alert('哈哈');

}

functionf1(){

alert("我是f1");

}

functionf2(){

alert("我是f2");

}

</script>

</head>

<body>

<inputtype="button" onclick="document.ondblclick=f1" value="关联事件1"/>

<inputtype="button" onclick="document.ondblclick=f2" value="关联事件2"/>

</body>

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

(1) alert方法，弹出消息对话框

(2) confirm方法，显示确定、取消对话框

(3) 重新导航到指定的地址：navigate(“http://www.rupeng.com”);

(4) setInterval每隔一段时间执行指定的代码，第一个参数为代码的字符串，第二个参数为间隔时间（单位毫秒），返回值为定时器的标识

setInterval(“alert(‘hello’)”,5000);

(5) clearInterval取消setInterval的定时执行，相当于Timer中的Enabled=False。因为setInterval可以设定多个定时，所以clearInterval要指定清除那个定时的标识，即setInterval的返回值。

var intervalld =setInterval(“alert(‘hello’)”,5000);

clearInterval(intervalld);

(6) setTimeout也是定时执行，但是不像setInterval那样是重复的定时执行，只执行一次，clearTimeout也是清除定时。（翻译：Interval 间隔；Timeout 超时）

var timeoutId = setTimeout(“alert(‘hello’)”,2000);

body、document对象的事件

（1） onload：网页加载完毕时触发。浏览器是一边下载文档、一遍解析执行，可能会出现JavaScript执行时需要操作某个元素，这个元素还没有加载，如果这样就要把操作的代码放到onload事件中，或者可以把JavaScript放到元素之后。元素也有onload，表示该元素加载完成

（2） onunload：网页关闭（或离开）后触发。

（3） onbeforeunload：在网页准备关闭（或离开）时触发

在事件中为”window.event.returnValue”赋值（要显示的警告消息），这样离开窗口（比如前进、后退、关闭）就会弹出确认消息

window对象的属性

l window.location.href=”http://www.itcast.cn”。重新导向新的地址，和navigate方法效果一样。window.location.reload()刷新页面

l window.event是非常重要的属性，用来获得发生事件时的信息，事件不局限于window对象的事件，所有元素的事件都可以通过event属性取到相关信息。类似于WinForm中的e(EventArg)

altKey属性，bool类型，表示发生事件时alt键是否被按下，类似的还有ctrlKey、shiftKey属性，例：

<inputtype="button" value="点击"onclick="if(window.event.ctrlKey){alert('按下了ctrl')};else{alert('普通点击')};"/>

clientX、clientY发生事件时鼠标在客户区的坐标；screenX、screenY发生事件时鼠标在屏幕上的坐标；offsetX、offsetY发生事件时鼠标相对于事件源的坐标。

returnValue属性，如果将returnValue设置为false，就会取消默认事件的处理。在超链接的onclick里面禁止访问href的页面，在表单校验的时候禁止提交表单到服务器。

srcElement，获得事件源对象

keyCode，发生事件时的按键值

button，发生事件时鼠标按键，1为左键，2为右键，3为左右键同时按

l clipboardData对象，对剪贴板的操作。clearData(“Text”)清空剪贴板；getData(“Text”)读取剪贴板的值，返回值为剪贴板中的内容；setData(“Text”,val)，设置剪贴板中的值。

当复制的时候body的oncopy方法被触发，直接return false就是禁止复制。

很多元素也有oncopy、onpaste事件

在网站中复制文章的时候，为了防止那些拷贝党不添加文章来源，自动在复制的内容后添加版权申明。

function modifyClipboard(){

clipboardData.setData(‘Text’,clipboardData.getData(‘Text’)+’本文来自传智播客技术专区，转载请注明来源。’+location.herf);

}

oncopy=”setTimeout(‘modifyClipboard()’,100)”

用户复制动作发生0.1秒后再去改粘贴板中的内容。

不能直接在oncopy中执行对粘贴板的操作，因此设定定时器，0.1秒后执行，这样就不在oncopy的执行调用栈上了。

l history操作历史记录

window.history.back() 后退；window.history.forward()前进

也可以用window.history.go(-1) window.history.go(1)

l document

document的方法：

(1) write：向文档中写入内容。writeln，和write差不多，只不过最后添加一个回车。

在onclick等事件中写的代码会冲掉页面中的内容，只有在页面加载过程中write才会与原有内容融合在一起

(2)getElementsById：（常用），根据元素的Id获取对象，网页中Id不能重复。也可以通过元素的Id来引用元素，但是有有效范围之类的问题，因此不建议直接通过Id操作元素，而是通过getElementsById