DOM入门学习笔记

1.课前说明

DOM就是使用js操控界面的空间

js和DOM,就像C#语法和.netFramework的关系

js可以定义变量，定义函数，但是说和用户进行交互，还是用DOM实现,就像alert(),也是有定义DOM中的

DOM可以让我们程序员操纵html上的动态交互,比如:点击按钮

2.DOM入门

DOM就是HTML页面的模型,将每一个标签作为一个对象,js通过调用DOM中的属性,方法就可以对页面中的文本框,层等元素进行编程控制,比如通过操作文本框的DOM对象,就可以读取文本框中的值,设置文本框中的值.

JavaScript->Dom 就是 C#->.Net Framework

Dom也想winForm一样,通过事件.属性,方法进行编程

css+js+Dom = DHTML(动态页面)

3.事件

事件 ,直接在body部分,点击body部分就会弹出对话框

</body>

另一种使用方式

<head>

function bodymousedown() {

alert( '点我了!');

alert( '地方');

}

</script>

</head>

</body>

4.动态设置事件

可以再代码中动态设置事件响应函数,就像.net中btn.Click+=一样

function f1() {

alert( '我是f1');

}

function f2() {

alert( '我是f2');

}

...............

5.window对象1 -------- confirm

window对象道标当前浏览器窗口,使用window对象的属性,方法的时候可以省略window,比如window.alert('a') 可以省略成alert('a')

(1)alert()方法,弹出信息对话框

(2)confirm方法,显示"确定","取消"对话框,如果按了【确定】按钮,就返回true,否则就false程序如下: 一般删除操作,询问客户时候决定执行

function confirmdemo() {

if (confirm("是否进入?" )) {

alert( "进入了" );

}

else{

alert( "取消进入" );

}

</script>

.....................

6.window对象2 ---------- navigate, setInterval, clearinterval

(3) 重新导航到指定的地址: navigate("http://www.baidu.com") 注意:这个只是在IE里可以运行.在FireFox里运行不了

(4)setInterval, 每个一段时间执行指定代码,类似winform的timer(),

(返回值为定时器的标志,取消定时操作时会用到)setInterval(代码字符串,间隔时间单位ms)

var intervalId;

function setIntervaldemo() {

intervalId = setInterval( "alert('hello')", 5000); //注意被执行的代码是字符串格式,也可以写一个匿名函数

}

.................................

(5)clearInterval 取消setInterval的定时执行

7.window对象3

(6)setTimeout也是执行定时执行,但是不像setInterval那样重复定时执行,只执行一次,clearTimeout也是消除定时,很好区分

var timeoutId = setTimeout("alert('你好a')" , 10000);

......

8.window对象3

案例:实现标题栏走马灯效果,也就是浏览器的标题文字每隔500ms向右滚动一下.标题为document.title属性,实现代码

点击[向左]按钮就向左连续滚动,点击[向右]按钮就向右连续滚动

js的substring语法

stringObject.substring(start,stop)

start	必需。一个非负的整数，规定要提取的子串的第一个字符在 stringObject 中的位置。
stop	可选。一个非负的整数，比要提取的子串的最后一个字符在 stringObject 中的位置多 1。如果省略该参数，那么返回的子串会一直到字符串的结尾。

程序:

  <head>
    <title> 新学期迎接新同学 </title>
    <script type="text/javascript">
        var leftId;  //标志做滚动定时器标记
        var rigthId;  //标志做滚动定时器标记
        function scrollLeft() { //左滚动一个字
            var title = document.title;
            var firstch = title.charAt(0); //第一个字
            var leftstr = title.substring(1, title.length);  //剩下的字
            document.title = leftstr + firstch; //连接起来
        }
        function scrollRight() { //右滚动一个字
            var title = document.title;
            var firstch = title.charAt(title.length-1); //最后一个字
            var leftstr = title.substring(0, title.length-1); //前面的字
            document.title = firstch + leftstr; //连接起来
        }
        function clearsroll() {  //取消所有定时器,即取消所有滚动
            if (leftId != 'undefined' ) {
                clearInterval(leftId);
            }
            if (rigthId != 'undefined' ) {
                clearInterval(rigthId);
            }
        }
        function scrollLeftStart() {
            clearsroll()
            leftId = setInterval( "scrollLeft()", 500);
        }
        function scrollRightStart() {
            clearsroll()
            rigthId = setInterval( "scrollRight()", 500);
        }
    </script>
</head>
<body>
<input type="button" value="向左" onclick="scrollLeftStart()" />
<input type="button" value="向右" onclick="scrollRightStart()" />
</body>

9.body,document对象的事件

(1)onload:网页加载完毕时触发,浏览器是一边下载文档,一边解析执行,可能会出现js执行时需要操作的某个元素,这个元素还没加载,如果这样就要把操作代码放到body的onload事件中,或者可以吧js放到元素之后,元素的onload时间是自己加载完毕时触发,body onload才是全部加载完成

</body>

(2)onunload:网页关闭(或者离开)后触发. 后退,刷新,重加载,关闭都会触发

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

在时间中为"window.event.returnValue"赋值(要显示的警告信息),这样窗口离开(比如前进,后退,关闭)就会弹出确认消息

</body>

10.其他事件

除了特有的属性之外,当然还有通用的HTML元素的事件:onclick(单击),ondbllick(双击),onkeydown(按键按下),onkeypress(点击按键),onkeyup(按键释放),onmousedown(鼠标按下),onmousemove(鼠标移动),onmouseout(鼠标离开元素范围),onmouseover(鼠标移动到元素范围),onmouseup(鼠标按键释放)等

11.window对象的属性1

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

< body onunload ="alert('您刷新了')">

< input type ="button" value ="href" onclick ="alert(location.href)" />

< input type ="button" value ="重定向" onclick ="location.href='DOM1.htm'" />

< input type ="button" value ="刷新" onclick ="location.reload()" />

</ body>

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

•altKey属性,bool属性,表示发生事件时alt键是否被按下,类似的还有ctrlKey,shiftKey,例子:

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

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

•returnValue属性,如果将returnValue设置为false,就会取消默认事件的处理.在超链接的onclick里面禁止访问href的页面,在表单

•scrElement,获得事件源对象

•keyCode,发生时间时的按键值

•button,发生时间时鼠标按键,1为左键,2为右键,3为左右两键同时按

< input type ="button" value ="禁止点击右键" onmousedown ="if(event.button == 2){alert('请不要用右键点击')}" />

12.window对象的属性2

•clipboardData对象,对黏贴板的操作.clearData("Text")清空粘贴板, .getData("Text")得到粘贴板的信息,返回值为粘贴板中的内容; .setData("Text".val),设置粘贴板中的值

案例:复制地址给好友

< input type ="button" value ="分享给好友" onclick ="clipboardData.setData('Text','我发现一个好玩的网站,很黄很暴力!'+location.href);alert('已经粘贴成功!');" />