【学习日记】Dom基础

1、   内容:使用JavaScript操作Dom进行DHTML开发

2、   目标:能共使用JavaScript操作Dom实现常见的DHTML效果

3、   DHTML= CSS + JavaScript +Dom

4、   Dom中的事件

1> 当鼠标点击按钮时弹出“大家好”对话框

<inputtype=”button” value=”你好”

onclick=”alert(‘大家好’);”/>

2> 将弹出对话框的代码写到<head></head>标签中

<scripttype=”text/javascript”>

function mouseDown() {

           alert(“大家好”);

        }

</script>

下面的代码就可以直接调用上面的一段JavaScript代码

<inputtype=”button” value=”你好”onclick=”mouseDown()”/>

3> 可以在代码中动态的设置事件响应函数

方法一:

functionf1() {

            alert(“我是f1”);

        }

方法二;

functionf2() {

            alert(“我是f2”);

        }

<!–双击之后让其显示事件document.ondblclick–>

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

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

5、   window对象(浏览器当前页面的窗口)

1> alert(“a”);其实应该是window.alert(“”);

window可以省略

2> confirm:弹出确定、取消按钮的对话框

//弹Ì¡¥出?是º?否¤?确¨¡¤定¡§的Ì?对?话¡ã框¨°

function confirmDemo() {

if (confirm(“是否进入?”)) {

               alert(“已经进入了”);

           }

else {

               alert(“您被拒绝了”);

            }

3> 重新导向到指定的地址

navigate(‘www.baidu.com’)

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

setInterval(“alert(‘hello’)”,5000);//每隔5秒弹出一次对话框

5> clearInterval:取消setInterval的定时执行,相当一Timer中的Enabled=False。

因为setInterval可以设定多个定时,所以clearInterval要指定要清除哪个定时器的标识,即setInterval的返回值。

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

           clearInterval(setinterval);//清除了定时操作

6> setTimeout要是定时执行,但是不像setInterval那样重复的定时执行,而是只执行一次。clearTimeout也是要消除定时。

//定时操作,间隔时间,只执行一次操作

var settimeout = setTimeout(“alert(‘你?好?’)”, 5000);

//取消只执行一次的定时操作

           clearTimeout(settimeout);

6、   实现浏览器标题的跑马灯效果

functionleftScoll() {

vartitle = document.title;//获取浏览器的标题

varfirstch = title.charAt(0);//获取标题的第一个字符

varleststr = title.substring(1, title.length);//获取剩余标题

            document.title = leststr + firstch;

varresult = setInterval(“leftScoll()”,500);//设置标题滚动的时间

        }

7、   <body></body>、document对象的事件

1>  onload:网页加载完毕时触发

元素的onload事件是元素本身加载完成时触发,把onload放到<body onload=””>里面才是网页全部加载完成时才触发。

2> onunload:网页关闭(或离开)后触发

3>  onbeforeunload:在网页准备关闭(或离开)时触发。

在事件中用window.event.returnValue赋值(需要显示的警告消息)

<bodyonload=”btn.value=’呵呵’“onunload=”alert(‘不要走嘛?,在多呆一会儿啊?’)”

onbeforeunload=”window.event.returnValue=’退出?”>

4> 其他事件:(event.)

onclick(单击); ondblclick(双击);onkeydown(按键‘下’);onkeypress(点击按键);onkeyup(按键释放);onmousedown(鼠标按下);onmousemove(鼠标移动);onmouseou(鼠标离开元素范围);onmouseover(鼠标移动到的位置);onmouseup(鼠标按键释放)…

8、   window对象属性1

1>(取得和设置)当前页面的地址:

alert(‘本页地址:+window.location.href)

重新导向新的地址,和navigate的用法效果一样。 window.location.reload()刷新页面

<inputtype=”button” value=”获取本页地址”onclick=”alert(‘本页地址:êo’+window.location.href)”/>

<inputtype=”button” value=”修改本页地址”onclick=”window.location.href=’Demo1.htm’”/>

<inputtype=”button” value=”刷新?”onclick=”window.location.reload()”/>

2>   window.event属于事件对象,用于获得发生事件的信息,事件不局限于window对象,所用的元素都可以通过event属性获得相关的信息。

–>1、altKey属性(bool类型),表示事件发生时alt键是否被按下。类似的属性还有ctrlKey、shiftKey属性。

例子:

<inputtype=”button” value=”按住shift键¨¹”onclick=”if(event.shiftKey){alert(‘shift事件’);}else{alert(‘普通事件’);}”/>

–>2、clientX、clientY发生事件时鼠标在客户区的坐标;screenX、screenY发生事件时鼠标在屏幕上的坐标;offsetX、offsetY发生事件时鼠标相对于事件源(比如点击按钮onclick)的坐标。

–>2、【重点】returnValue属性:默认事件的处理=true

取消默认设置false(设为false可以禁用默认设置)

<ahref=”http://www.baidu.com”onclick=”alert(‘禁止访问’+href);window.event.returnValue=false”>百度</a>

9、   window对象属性2

1> screen对象,屏幕的信息

<inputtype=”button” value=”获取当前的屏幕信息”

onclick=”alert(screen.width+’*‘+screen.height);”/>

//结果是打印出屏幕的分辨率

2> clipboardData对象,对粘贴板的操作。

clearData(“Text”)清空粘贴板

getData(“Text”)读取粘贴板的值,返回为粘贴板的内容

setData(“Text”)设置粘贴板的值

<inputtype=”button” value=”分享给小伙伴”

onclick=”clipboardData.setData(‘Text’,’推荐给你的小伙伴一个很黄很暴力的网站,’+location.href); alert(‘已经复制到粘贴板上了,赶快分享给你的小伙伴吧!”/>

(1)oncopy:oncopy= alert(‘禁止复制’);  return false”)//禁止复制

(2)onpaste:  onpaste=”alert(‘禁止粘贴’); return false;”//禁止粘贴

(3)网站复制文章时,自动在文章的后面添加小尾巴

<scripttype=”text/javascript”>

functionmodifyClipboard() {

vartxt = clipboardData.getData(“Text”);

            txt = txt + “本文转载自追梦无悔的个人主页” + location.href;

            clipboardData.setData(“Text”, txt);

        }

</script>

<bodyoncopy=”setTimeout(‘modifyClipboard()’,100)”>//用户复制动作发生一秒后再去更改粘贴板中的内容

(注:不能直接在oncopy中执行对粘贴板的操作,因此设定定时器,0.1秒后执行,这样就不用oncopy执行调用堆栈了)

3> history操作历史记录

window.history.back();后退

window.history.forward();前进

也可调用window.history.go(-1);后退

window.history.go(1);前进

<inputtype=”button” value=”后退”onclick=”window.history.back()”/>

10、  document属性(window.document)

1> document.write(内容);用于动态向页面写入东西,经常用于广告版块

document.write(“<ahref=’http://www.baidu.com’>百度</a>”)

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

{有关广告模块:

       广告:heim8.com 获取广告脚本

      新闻:news.baidu.com/newscode.html

       访问流量统计CMZZ(www.cnzz.com):如鹏网( www.rupeng.com)数据查看密码:123456

       百度地图API:http://developer.baidu.com/map/

}

2> getElementById方法【非常常用】

function getText1() {

var text = document.getElementById(“textbox1”);//获取一个标签的id

           alert(text.value);

        }

<inputtype=”text” id=”textbox1” />

<inputtype=”button” value=”点一下” onclick=”getText1()”/>

3> getElementsByName(“”),根据元素的内容获取对象

由于页面中元素的name可以重复,因此getElementsByName(“”)的返回值是一个数组

//getElementByName(““)获得的name值是一个数组 function getRadio() {

varradios = document.getElementsByName(“sex”);

for(var i = 0; i < radios.length; i++) {

varradio = radios[i];

                alert(radio.value);

            }

<inputtype=”radio” name=”sex” value=”男”/>男

<inputtype=”radio” name=”sex” value=”女”/>女

<inputtype=”radio” name=”sex” value=”保密¨¹”/>保密¨¹

4> getElementsTagName(“”)根据元素的标签来获得对象

function getTagName() {

var texts =document.getElementsByTagName(“input”);

for (vari = 0; i < texts.length; i++) {

var text = texts[i];

               text.value = “你好,世界”;

          }

       }

<inputtype=”text”/>

<inputtype=”text”/>

<inputtype=”text”/>

<br/>

<inputtype=”button” value=”点我啊”onclick=”getTagName()”/>

5>   window.event.srcElement取得引发事件的控件