DOM编程

Posted 男孩IT小菜鸟

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了DOM编程相关的知识,希望对你有一定的参考价值。

来源:http://www.cnblogs.com/happygx/archive/2011/03/12/1982080.html
DOM编程

DOM入门

•DOM就是HTML页面的模型,将每个标签都做为一个对象,javascript通过调用DOM中的属性、方法就可以对网页中的文本框、层等元素进行编程控制。比如通过操作文本框的DOM对象,就可以读取文本框中的值、设置文本框中的值。 JavaScript→Dom就是C#→.Net Framwork。没有.net,C#只能for、while,连WriteLine、MessageBox都不行。Dom就是一些让JavaScript能操作HTML页面控件的类、函数。
•DOM也像WinForm一样,通过事件、属性、方法进行编程。
•CSS+JavaScript+DOM=DHTML
 ===================================================================================================
事件
•事件:<body onmousedown="alert(\'哈哈\')">当点击鼠标的时候执行onmousedown中的代码。有时间事件响应的代码太多,就放到单独的函数中:

    <script type="text/javascript">

        function bodymousedown() {

            alert("网页被点坏了,赔吧!");

            alert("逗你玩的!");

        }

    </script>

<body onmousedown="bodymousedown()">

bodymousedown后的括号不能丢( onmousedown="bodymousedown" ),因为表示onmousedown事件发生时调用bodymousedown函数,而不是onmousedown事件的响应函数是bodymousedown。

 ===================================================================================================

动态设置事件

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

        function f1() {

            alert("1");

        }

        function f2(){

            alert("2");

        }

<input type="button" onclick="document.ondblclick=f1" value="关联事件1" />//注意f1不要加括号。

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

 ===================================================================================================

window对象

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

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

(2)confirm方法,显示“确定”、“取消”对话框,如果按了【确定】按钮,就返回true,否则就false

        if (confirm("是否继续?")) {

            alert("确定");

        }

        else {

            alert("取消");

        }

•(3)重新导航到指定的地址:navigate("http://www.rupeng.com");
•(4)setInterval每隔一段时间执行指定的代码,第一个参数为代码的字符串,第二个参数为间隔时间(单位毫秒),返回值为定时器的标识

  setInterval("alert(\'hello\')", 5000);

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

var intervalId = setInterval("alert(\'hello\')", 5000);

clearInterval(intervalId);

•(6)setTimeout也是定时执行,但是不像setInterval那样是重复的定时执行,只执行一次,clearTimeout也是清除定时。很好区分:Interval:间隔;timeout:超时。

var timeoutId = setTimeout("alert(\'hello\')", 2000); 

 
===================================================================================================
body、document对象的事件
•(1)onload:网页加载完毕时触发,浏览器是一边下载文档、一边解析执行,可能会出现JavaScript执行时需要操作某个元素,这个元素还没有加载,如果这样就要把操作的代码放到body的onload事件中,或者可以把JavaScript放到元素之后。元素的onload事件是元素自己加载完毕时触发,body onload才是全部加载完成
•(2)onunload:网页关闭(或者离开)后触发。
•(3)onbeforeunload:在网页准备关闭(或者离开)后触发。在事件中为"window.event.returnValue赋值(要显示的警告消息),这样窗口离开(比如前进、后退、关闭)就会弹出确认消息
–<body onbeforeunload="window.event.returnValue=\'真的要放弃发帖退出吗?\'">。显示的文字随浏览器版本而有差异。
===================================================================================================
其他事件
•除了有特有的属性之外,当然还有通用的HTML元素的事件:onclick(单击)、ondblclick(双击)、onkeydown(按键按下)、onkeypress(点击按键)、onkeyup(按键释放)、onmousedown(鼠标按下)、onmousemove(鼠标移动)、onmouseout(鼠标离开元素范围)、onmouseover(鼠标移动到元素范围)、onmouseup(鼠标按键释放)等。
===================================================================================================
form对象
•document.getElementById(\'btn1\').click()
•form对象是表单的Dom对象。
•方法:submit()提交表单,但是不会触发onsubmit事件。
•实现autopost,也就是焦点离开控件以后页面立即提交,而不是只有提交submit按钮以后才提交,当光标离开的时候触发onblur事件,在onblur中调用form的submit方法。代码见备注。
•在点击submit后form的onsubmit事件被触发,在onsubmit中可以进行数据校验,数据数据有问题,返回false即可取消提交
•    <form name="form1" action="a.aspx" method="get" onsubmit="if(document.getElementById(\'txtname\').value.length<=0){alert(\'姓名必填\');return false;}">
===================================================================================================
window对象的属性
•window.location.href=\'http://www.itcast.cn\',重新导向新的地址,和navigate方法效果一样。window.location.reload() 刷新页面
•window.event是非常重要的属性,用来获得发生事件时的信息,事件不局限于window对象的事件,所有元素的事件都可以通过event属性取到相关信息。类似于winForm中的e(EventArg).
–altKey属性,bool类型,表示发生事件时alt键是否被按下,类似的还有ctrlKey、shiftKey属性,例子 <input type="button" value="点击" onclick="if(event.altKey){alert(\'Alt点击\')}else{alert(\'普通点击\')}" /> ;
–clientX、clientY 发生事件时鼠标在客户区的坐标;screenX、screenY 发生事件时鼠标在屏幕上的坐标;offsetX、offsetY 发生事件时鼠标相对于事件源(比如点击按钮时触发onclick)的坐标。
–returnValue属性,如果将returnValue设置为false,就会取消默认事件的处理。在超链接的onclick里面禁止访问href的页面。在表单校验的时候禁止提交表单到服务器。
–srcElement,获得事件源对象。几个事件共享一个事件响应函数用。
–keyCode,发生时间时的按键值。
–button,发生事件时鼠标按键,1为左键,2为右键,3为左右键同时按。<body  onmousedown="if(event.button==2){alert(\'禁止复制\');}">
•*)screen对象,屏幕的信息

alert("分辨率:" + screen.width + "*" + screen.height);

        if (scree(n.width < 1024 || screen.height < 768) {

            alert("分辨率太低!");

        }

•clipboardData对象,对粘贴板的操作。clearData("Text")清空粘贴板;getData("Text")读取粘贴板的值,返回值为粘贴板中的内容;setData("Text",val),设置粘贴板中的值。
–案例:复制地址给友好。见备注。
–当复制的时候body的oncopy方法被触发,直接return false就是禁止复制。<body oncopy="alert(\'禁止复制!\');return false;"
–很多元素也有oncopy、onpaste事件:
–案例:禁止粘贴帐号。见备注。

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

function modifyClipboard() {

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

        }

oncopy="setTimeout(\'modifyClipboard()\',100)"。用户复制动作发生0.1秒以后再去改粘贴板中的内容。100ms只是一个经常取值,写1000、10、50、200……都行。不能直接在oncopy里修改粘贴板。

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

•history操作历史记录
–window.history.back()后退;window.history.forward()前进。也可以用window.history.go(-1)、window.history.go(1)前进
•document属性。是最复杂的属性之一。
===================================================================================================
document属性
•document是window对象的一个属性,因为使用window对象成员的时候可以省略window.,所以一般直接写document
•document的方法:
–(1)write:向文档中写入内容。writeln,和write差不多,只不过最后添加一个回车
–<input type="button" value="点击" onclick="document.write(\'<font color=red>你好</font>\')" />
–在onclick等事件中写的代码会冲掉页面中的内容,只有在页面加载过程中write才会与原有内容融合在一起
–    <script type="text/javascript">
–        document.write(\'<font color=red>你好</font>\');
–    </script>
–write经常在广告代码、整合资源代码中被使用。见备注

内容联盟、广告代码、cnzz,不需要被主页面的站长去维护内容,只要被嵌入的js内容提供商修改内容,显示的内容就变了。

===================================================================================================

document方法

•getElementById方法(非常常用),根据元素的Id获得对象,网页中id不能重复。也可以直接通过元素的id来引用元素,但是有有效范围、form1.textbox1之类的问题,因此不建议直接通过id操作元素,而是通过getElementById
•(*)getElementsByName,根据元素的name获得对象,由于页面中元素的name可以重复,比如多个RadioButton的name一样,因此getElementsByName返回值是对象数组。
•(*)getElementsByTagName,获得指定标签名称的元素数组,比如getElementsByTagName("p")可以获得所有的<p>标签。
 
 
===================================================================================================
DOM的动态创建
•document.write只能在页面加载过程中才能动态创建。
•可以调用document的createElement方法来创建具有指定标签的DOM对象,然后通过调用某个元素的appendChild方法将新创建元素添加到相应的元素下

        function showit() {

            var divMain = document.getElementById("divMain");

            var btn = document.createElement("input");

            btn.type = "button";

            btn.value = "我是动态的!";

            divMain.appendChild(btn);

        }

<div id="divMain"></div>

<input type="button" value="ok" onclick="showit()" />

===================================================================================================

innerText、innerHTML

•几乎所有DOM元素都有innerText、innerHTML属性(注意大小写),分别是元素标签内内容的文本表示形式和HTML源代码,这两个属性是可读可写的。
–<a href="http://www.itcast.cn" id="link1">传<font color="Red">智</font>播客</a>
–<input type="button" value="inner*" onclick="alert(document.getElementById(\'link1\').innerText);alert(document.getElementById(\'link1\').innerHTML);" />
•用innerHTML也可以替代createElement,属于简单、粗放型、后果自负的创建
–function createlink() {
–            var divMain = document.getElementById("divMain");
–            divMain.innerHTML = "<a href=\'http://www.rupeng.com\'>如鹏网</a>";
–        }
 
===================================================================================================
其他
•事件中的this。除了可以使用event.srcElement在事件响应函数中,this表示发生事件的控件。只有在事件响应函数才能使用this获得发生事件的控件,在事件响应函数调用的函数中不能使用,如果要使用则要将this传递给函数或者使用event.srcElement。(*)this和event.srcElement的语义是不一样的,this就是表示当前监听事件的这个对象,event.srcElement是引发事件的对象:事件冒泡。
•易错:修改元素的样式不是设置class属性,而是className属性。案例:网页开关灯的效果。
•修改元素的样式不能this.style="input type="button" value="AAA" onclick="this.style.color=\'red\'" />
===================================================================================================
控制层的显示
•修改style.display,例子:切换层的显示
•        function togglediv() {
•            var div1 = document.getElementById(\'div1\');
•            if (div1.style.display == \'\') {
•                div1.style.display = \'none\';//不显示
•            }
•            else {
•                div1.style.display = \'\';//显示
•            }
•        }
 
===================================================================================================
IE中body的事件范围
•IE中如果在body上添加onclick、onmousemove等事件响应,那么如果页面没有满,则 “body 中最后一个元素以下(横向不限制)” 的部分是无法响应事件的,必须使用代码在document上监听那些事件,比如document.onmousemove = MovePic
•FF中也差不多。
===================================================================================================
元素的位置、大小单位
•通过dom读取元素的top、left、width、height等取到的值不是数字,而是“10px”这样的字符串;为这些属性设值的时候IE可以是80、90这样的数字,FF必须是“80px”、“90%”等这样的字符串形式,为了兼容统一用字符串形式。
•易错:不要写成div1.style.width=80px,而是div1.style.width=\'80px\'
•如果要修改元素的大小(宽度加10),则首先要取出元素的宽度,然后用parseInt将宽度转换为数字(parseInt可以将"20px"这样数字开头的包含其他内容的字符串解析为20,parseInt(\'22px\',10),也就是解析尽可能多的部分);然后加上一个值,再加上px赋值回去。
===================================================================================================
层的操作
•元素的position 样式值:static(无定位,显示在默认位置)、absolute(绝对定位)、fixed(相对于窗口的固定定位,位置不会随着浏览器的滚动而变化,IE6不支持)、relative(相对元素默认位置的定位)。如果要通过代码修改元素的坐标则一般使用absolute,然后修改元素的top(上边缘距离)、left(左边缘距离)两个样式值。left、top都是指的层的左上角的坐标
===================================================================================================
弹出对话框的处理
•复习,使用window.showModalDialog(\'dialog.htm\')弹出模态对话框
•给对话框传递参数,使用showModalDialog的第二个参数传递参数,在对话框中用window.dialogArguments获得传递的参数值;对话框中给window.parent.returnValue设定返回值,这样在父窗口中就可以通过showModalDialog返回值读取设置的返回值了。例子:弹出对话框询问用户姓名,向用户问好;弹出含有“是”、“否”、“取消”三个按钮的模态窗口,点击按钮的时候窗口关闭,然后主窗口显示用户点击的按钮。
•传递多个参数,将参数包装到数组中,然后仍然是通过第二个参数传递,返回多个返回值也可以返回数组:var arr = new Array();arr[0]=30;arr[1]="tom";
 
===================================================================================================
JS中的正则表达式
•复习C#正则表达式
•JavaScript中创建正则表达式类的方法:
–var regex = new RegExp("\\\\d{5}") 或者 var regex = /\\d{5}/
–/表达式/是JavaScript中专门为简化正则表达式编写而提供的语法,写在//中的正则表达式就不用管转义符了。
•RegExp对象的方法:
–(1)test(str)判断字符串str是否匹配正则表达式,相当于IsMatch
–        var regex = /.+@.+/;
–        alert(regex.test("a@b.com"));
–        alert(regex.test("ab.com"));
–(2)exec(str)进行搜索匹配,返回值为匹配结果(*)
–(3)compile编译表达式,提高运行速度。 (*)
===================================================================================================
string的正则表达式方法
•String对象中提供了一些与正则表达式相关的方法,相当于对于RegExp类的包装,简化调用:

match(regexp),相当于调用exec

        var s = "aaa@163.com";

        var regex = /(.+)@(.+)/;

        var match = s.match(regex);

        alert(RegExp.$1 + ",服务器:" + RegExp.$2);

以上是关于DOM编程的主要内容,如果未能解决你的问题,请参考以下文章

DOM编程

DOM编程

Javascript——DOM编程

JavaScript 之 DOM编程

JavaScript性能优化 DOM编程

JavaScriptJavaScript DOM 编程