DOM零碎知识点归纳

来源：互联网发布：淘宝新店可直通车编辑：程序博客网时间：2024/05/01 07:08

一、各种浏览器的支持性

1. window.navigate(url);//将网页重新导航到url,只支持IE、Opera,建议使用window.location.href=‘url’;//几大浏览器都支持!

2. onbeforeunload="window.event.returnValue='你确定离开吗?'";好像只有IE支持! 直接使用onbeforeunload="return '你确定离开吗?'";大多数浏览器都支持!

3. <a href="http://www.baidu/com" onclick="window.event.returnValue=false;">去百度</a>取消默认事件window.event.returnValue=false; IE和FF支持,其他的不支持
还是用return false;几乎都支持。

4. 关于innerText与innerHTML的支持问题对于innerHTML所有浏览器都支持,而innerText几乎所有浏览器都支持,但FF不支持!

二、setInterval,clearInterval,setTimeout,clearTimeout的用法

1. 每隔一秒钟,文本框的内容自增1。

效果图:

<html xmlns="http://www.w3.org/1999/xhtml">   <head>       <title>dadadfa</title>       <script type="text/javascript">var intervalId = setInterval(function () {var num = document.getElementById('txt').value; num = parseInt(num) + 1; document.getElementById('txt').value = num;}, 1000);function stopIt() { clearInterval(intervalId);} </script></head> <body><input type="text" name="name" id="txt" value="1" /><input type="button" name="name" value="Stop" onclick="stopIt();" /> </body></html>

因为是在1秒钟之后,才执行setInterval方法,那个时候文本框已经加载完毕,所以不会报错!

2. 流水灯效果。

效果图：

<html xmlns="http://www.w3.org/1999/xhtml"> <head><title>12345</title> <script type="text/javascript">var direction = 'left'; //定义滚动的方向 var intervalId = setInterval(function () {var title = document.title; if (direction == 'left') {var front = title.charAt(0); var rear = title.substr(1); document.title = rear + front;}else if (direction == 'right') {var front = title.substr(0, title.length - 1); var rear = title.substr(title.length - 1); document.title = rear + front;}}, 500);function goLeft() { direction = 'left';}function goRight() { direction = 'right';} </script></head> <body>Flow<input type="button" name="name" value="left" onclick="goLeft();" /> <input type="button" name="name" value="right" onclick="goRight();" /></body></html>

三、 onload、onunload、onbeforeunload

onload 页面加载后触发一般用window.onload代替使用

onunload 页面卸载后触发
onbeforeunload 页面卸载前触发最好使用，onbeforeunload="return '提示信息'"。

四、取消默认事件

1. <a href="http://www.baidu/com" onclick="alert('Good');return false;">Baidu</a>

点击文字后，会弹出 "Good"，但是不会跳转到百度。

2. 用js的方式实现。

<html xmlns="http://www.w3.org/1999/xhtml"><head><title></title>    <script type="text/javascript">function Judge() { alert('Fobbiden'); return false;} </script></head><body><a href="http://www.baidu.com" onclick="Judge();">Baidu</a> </body></html>

注意，Judge函数本身的返回值为false，并不是onclick这个方法本身返回false，所以上述的代码执行后，依旧会跳转到百度，正确的写法应该是 onclick = "return Judge();"。

五、clipboardData对象

setData('text',val); 设置剪贴板中的值

getData('text'); 读取剪切板的值

clearData('text'); 清空剪贴板中的内容

onpaste,oncopy 粘贴，拷贝时执行的操作

Demo效果图:

<html xmlns="http://www.w3.org/1999/xhtml">   <head>       <title></title>       <script type="text/javascript">function toCopy() {var comment = document.getElementById('comment').value; comment = comment + '\r\n' + window.location.href; //将复制内容加上网站地址加到剪贴板中 clipboardData.setData('text',comment);} </script></head> <body>try to copy:<input type="text" name="name" value="" oncopy="alert('fobbiden to copy');return false;" /><br />try to paste:<input type="text" name="name" value="" onpaste="alert('fobbiden to paste');return false;"/><br /><textarea cols="40" rows="7" id="comment">contentcontentcontentcontentcontentcontent contentcontentcontentcontentcontentcontent contentcontentcontentcontentcontentcontent contentcontentcontentcontentcontentcontent</textarea><input type="button" name="name" value="copy the content of comments" onclick="toCopy();"/></body></html>

六、 window、document、body的作用

window是顶级对象,相当于C#中的object
document是浏览器整个浏览区域
body是指,浏览器区域有内容的范围因此要获得onclick事件,最好使用document.onclick,而不是body.onclick

0 0