JavaScriptDOM编程讲述.ppt

获取页面元素 window.id document.getElementById() innerHTML还是操作Dom节点 操作页面的元素的时候是用innerHTML的方式还是createElement()、appendChild()与removeChild()的方式？ 1.对于大量进行节点操作时，使用innerHTML的方式性能要好于频繁的Dom操作(有专门用C或C++写的html解析器。)。先将页面的HTML代码写好，然后调用一次innerHTML,而不要反复调用innerHTML. 2.对于使用innerHTML=‘’的方式来删除节点，在某些情况下会存在内存问题。比如：div下面有很多其他元素，每个元素都绑定有事件处理程序。此时，innerHTML只是把当前元素从节点树上移除了，但是那些事件处理程序依然占用内存。 代码是否需要放置到onload中 //如果js代码需要操作页面上的元素，则将该代码放到onload里面。 //因为当页面加载完毕之后页面上才会有相关的元素 //如果js代码中没有操作页面元素的语句，则可以将该代码直接写在script标签中， //例如：声明变量，相加求和等操作。 body !-- html标签-- script type=text/javascript //写在这里的代码，由于已经是页面的底部，在执行该代码时，页面的元素已经都加载完毕，所以可以不放到onload里面也可以操作页面上的元素。 //建议将操作页面元素的代码都放到onload里面。 /script /body 课程说明 内容：使用JavaScript操作DOM进行DHtml开发。 目标：能够使用JavaScript操作DOM实现常见的DHtml效果。 参考书：张孝祥《JavaScript网页开发——体验式学习教程》 为什么要学习JavaScript操作DOM JavaScript最终是要操作Html页面，让Html变成DHtml，而操作Html页面就要用到DOM。DOM就是把Html页面模拟成一个对象，就像XDocument一样，把Xml模拟成了一个对象，提供了操作各个节点的方法，直接调用就可以了。 如果JavaScript只是执行一些计算、循环等操作，而不能操作Html也就失去了它存在的意义。 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 学习阶段只考虑IE。用IE Collection安装IE所有版本，学习使用IE6（要调试必须使用本机安装的版本）。//js DOM在不同的浏览器下支持不一样。(IETester) DOM模型 事件 在DOM中有很多事件。演示： body onmousedown=“alert(‘别点我！’);”//注意body的范围。 有时事件的响应代码比较多，就要放到一个函数中： script type=text/javascript function UserMouseDown() { alert(网页被你点坏了_~~,赔吧！); alert(逗你玩呢~~); } /script input type=button value=按钮 onmousedown=UserMouseDown(); / onmousedown=“UserMouseDown();”中，UserMouseDown后的括号不能丢（不能写成onmousedown=“UserMouseDown” ），带()表示调用函数，直接写函数名表示设置事件的处理函数为UserMouseDown。 动态设置事件 JavaScript也可以像.Net中那样动态设置事件，Button.Click+=… script type=text/javascript function F1() { alert(In F1); } function F2() { alert(In F2); } /sc