黑马程序员_学习日记59_705Dom1(事件、window对象、document对象)

来源：互联网发布：c语言调用动态链接库编辑：程序博客网时间：2024/06/05 11:46

一、简介

DOM（Document Object Model，文档对象模型）就是把Html页面模拟成一个对象，就像XDocument一样，把Xml模拟成了一个对象。

JavaScript和Dom的关系就像C#和ADO.Net的关系。

Dom也像WinForm一样，通过事件、属性、方法进行编程。

CSS+JavaScript+DOM=DHTML

node 节点

element 元素

二、事件

1、动态给文档注册事件

<!-- 只能给事件注册一个方法，这里f1是事件响应函数 --><!--点击按钮，动态给文档注册单击事件--><head>         <title></title>         <script type="text/javascript">             function f1() {                 alert("别点我！");        }       </script></head><body>    sdklafjklajsfkjklsjafkjlas    <input type="button"value="click" onclick="document.onclick=f1"/></body>

2、动态注册多个事件:

（1）attachEvent只有IE支持

<head>         <title></title>         <script type="text/javascript">             //相当于C#中的btn.Click+=f1             document.attachEvent("onclick", f1);             document.attachEvent("onclick", f2);            //先弹出f2再弹出f1             function f1() {                 alert("f1");             }             function f2() {                 alert("f2");        }    </script></head><body>    sdklafjklajsfkjklsjafkjlas</body>

（2）addEventListener w3c标准（ff chrom等支持）

 document.addEventListener("click", f1);         document.addEventListener("click", f2);        //先弹出f1再弹出f2             function f1() {                 alert("f1");             }             function f2() {                 alert("f2");            }

三、基本对象

（一）window 顶级对象

1、使用window对象的方法可以省略window，比如alert()方法。

2、window对象的方法

（1）confirm

<head>         <title></title>         <script type="text/javascript">             function f1() {                //弹出提示，返回bool类型                 if (confirm('是否删除')) {                     alert('删除');                 }                 else {                     alert('不删除');                 }             }    </script></head><body>    <input type="button" value="删除" onclick="f1()"/></body>

（2）navigate（只有IE支持）

其他浏览器用window.location.href:

(3)setInterval(code,delay) 间隔一段时间执行指定的代码（类似于WinForm中的Timer）

function f3(){

if(tmrId){

clearInterval(tmrId);

}

跑马灯案例：(在vs中)

<html xmlns="http://www.w3.org/1999/xhtml"><head>    <title>我爱北京天安门</title>    <script type="text/javascript">        var flag = "left";        var inter;        function interval(flag) {                      if (inter != null) {                clearInterval(inter);            }            //run(flag)要加""            inter = setInterval("run(flag)", 1000);        };             function run(flag) {            var head;            var left;            if (flag == "left") {                head = document.title.substr(0, 1);                left = document.title.substr(1);            }            else if(flag == "right"){                head = document.title.substr(0, document.title.length-1);                left = document.title.substr(document.title.length-1);            }            document.title = left + head;        };     </script></head><body>    <input type="button"onclick="interval('left')"value="left"/>    <input type="button"onclick="interval('right')"value="right"/></body></html>（4）setTimeout也是定时执行，但只执行一次。

3、window对象的属性

window.location.href、window.location.reload

window.event是IE下非常重要的属性，用来获取发生事件的信息，事件不局限于window对象的事件。

window.event.altKey 判断是否按下Alt键

window.event.clientX和clientY发生事件时鼠标在文档上的位置

window.event.screenX和window.event.screenY屏幕上的位置

window.event.returnValue 取消后续默认行为的执行（火狐不支持）

function btn_click() {var txt = document.getElementById("txt").value;                 if (txt.length == 0) {                 alert("请输入用户名");                 //取消默认行为的执行submit                 window.event.returnValue =false;        }}

return false; 也能取消后续默认行为（都支持），但不能在动态注册事件中执行。

4、window.event的属性

（1）srcElement:获得事件源对象。

（2）clipboardData对象，对粘贴板的操作。（只支持IE）

（a）setData(“Text”,val),设置粘贴板中的值

<head>    <title></title>    <script type="text/javascript">        function f1() {            var t = document.getElementById("txt").value;            window.clipboardData.setData("text", t);        }    </script></head><body>    <input type="text"id="txt" value="http://www.qiushibaike.com"/>    <input type="button"value="复制"onclick="f1()"/></body>

（b）禁止复制

（c）复制自动加版权

<head>         <title></title>         <script type="text/javascript">             //复制的时候自动加版权             function ff() {                 var t = clipboardData.getData("text");                 t = t + "<br/>版权：http://www.itcast.cn";                 clipboardData.setData("text", t);        }        </script></head><bodyoncopy="setTimeout('ff()',100)"><!--注意加上延时-->

（二）window.document、window.document.body

1、onload方法

//动态注册事件，窗体加载完成后执行

window.onload = function(){

window.txt.value = "admin";

}

2、document的方法

（1）document.write()

document.write(“<input type=’text’/><br/>”);

（2）document.writeln()

//writeln是用”\n”换行

document.writeln(“<pre>123132”);

document.writeln(“acbc</pre>”);

（3）document.getElementById()

window.onload = function () {            //整个html文档根节点<html>            var root = document.documentElement;            var body = document.documentElement.chlidNodes[1];            for (var i = 0; i < body.childNodes.length; i++) {                document.write(body.childNodes[i].nodeName +"<br/>");            }        }

（4）getElementsByName()

<head>         <title></title>         <script type="text/javascript">             function f1() {                 //radio的集合                 var radios = document.getElementsByName("sex");                  for (var i = 0; i < radios.length; i++) {                     if (radios[i].checked) {                         alert(radios[i].value);                         break;                     }               }        }    </script></head><body>    <input type="radio"value="nan" name="sex" />男    <input type="radio"value="nv" name="sex" />女</body>

（5）getElementsByTagName()