《电子商务实用基础 教学课件 ppt 作者 闵敏 第3章 文档对象模型》由会员分享，可在线阅读，更多相关《电子商务实用基础 教学课件 ppt 作者 闵敏 第3章 文档对象模型（34页珍藏版）》请在金锄头文库上搜索。
1、第3章 文档对象模型,电子商务设计实务 第二版,主要内容,浏览器中的对象,1,window对象,2,document对象,3,history对象,4,navigator对象,5,对象模型的事件处理机制,6,一、浏览器中的对象,文档对象模型,文档对象模型(是Document Object Model的缩写，简称为DOM)，它是浏览器处理网页内容的一种特殊方式。在可视化编程中，通过对象的方法、属性和事件实现对对象的操作，而且可以随时创建新的对象。文档对象模型是一种客户端的应用，要实现复杂且安全的交互式网页，就必须采用服务器端方案，如ASP.NET等。,一、浏览器中的对象,2.浏览器对象模型结构 整
2、个对象模型层次化的。,Event,Window,History,Navigator,Frames,Document,Document,二、window对象,属性,表3-1 window对象的属性,二、window对象,属性,defaultStatus属性，如例 3-2-1,效果,二、window对象,2. window对象的方法,表3-2 Window对象的方法,二、window对象, open方法 ，按下一个按钮后，能打开另一个新窗口显示链接的网页，其VBScript的语法如下：,如例3-2-2,2. window对象的方法,window.open URL,“窗口名称“，“名称“，“窗口属性
3、“,二、window对象, alert 方法 ，只是单纯地用来显示信息文字，不会有任何返回值。其VBScript的语法如下：,如例3-2-3,2. window对象的方法,window.alert “信息内容“,二、window对象, confirm 方法 ，也会产生信息对话框，只是对话框多了“确定”和“取消”按钮。如果选择确定，则返回值为true，否则返回值为false。其VBScript的语法如下：,如例3-2-4,2. window对象的方法,window.confirm “显示内容“,二、window对象, prompt方法，所产生的信息对话框除了可显示信息文字外，还会有一个文字输入栏
4、，让用户输入一些信息。其VBScript的语法如下：,如例3-2-5,2. window对象的方法,window.prompt “信息内容“,“输入栏默认值“,二、window对象,3. window的事件 window对象总计有9个事件，如下表所示。,二、window对象, onload事件,如例3-2-6,3. window的事件,二、window对象, onfocus事件,如例3-2-7,3. window的事件,三、document对象,1. document对象的属性,描述文件的属性,三、document对象,1. document对象的属性,描述文件的属性,例3-3-1利用了doc
5、ument对象描述文件的属性。 运行结果 ：,三、document对象,1. document对象的属性, 颜色属性,三、document对象,1. document对象的属性, 颜色属性,例3-3-2利用了document对象的颜色属性 。 运行结果 ：,三、document对象,1. document对象的属性, 和对象相关的属性,三、document对象,2. document的方法,三、document对象,2. document的方法,例3-3-3同时使用了document对象的write、writeln和open三个方法。 运行结果如下,三、document对象,3. docume
6、nt的事件 下表列出了鼠标事件发生的状态。,三、document对象,3. document的事件 下表列出了键盘事件发生的状态。,四、history对象,history对象就是历史对象，用于记录浏览器访问过的url信息，它只有属性和方法，没有专属的事件。history对象的属性如下表所示。,四、history对象,histroy对象的方法如下表所示。,四、history对象,例3-4-1是利用history对象的back和forward方法，制作一个方便访问者往前或往后浏览的按钮。 运行结果如下,五、navigator对象,navigator对象就是浏览器对象，用于获得有关浏览器的信息。通常
7、在编写跨平台的web页时，需要首先判断浏览器的相关信息，然后决定如何编写代码，此时就可以使用navigator对象。navigator的属性如下表所示。,五、navigator对象,navigator的方法见下表。,例3-5-1是一个使用navigator对象显示浏览器信息的例子。运行结果如下,六、对象模型的事件处理机制,动态网页的最大特色就在于网页可根据用户的动作或浏览器的状态给予适当的响应。例3-6-1是对象模型的事件处理。 运行结果如下,六、对象模型的事件处理机制,1. 事件类型 在浏览器内，事件通常都是由“用户的动作”及“浏览器的状态改变”所引发的。其用户的动作由于输入装置的不同，又进
8、一步分为“鼠标事件”和“键盘事件”。,六、对象模型的事件处理机制,2.事件处理方法 用标记引入 在程序段中建立响应动作的函数或是子程序，然后在标记的事件中设置其值为事件函数名。如例3-6-2。,六、对象模型的事件处理机制,2.事件处理方法 由HTML标记的ID引入 也可以为HTML标记起一个ID名称，然后以此“ID加上事件的名称”，即用id_event的命名形式，来当作函数或子程序的名称。如例3-6-3。,六、对象模型的事件处理机制,2.事件处理方法 在HTML标记中直接引入 如果处理事件的Script程序很短而且不是太复杂，就可以直接将这段Script程序写在标记内部。这样就不用额外建立函数或是子程序了。还是针对同一个例子，我们可以将程序改写为如例3-6-4。,,Thank You !,
