《浏览器对象和》PPT课件.ppt

《《浏览器对象和》PPT课件.ppt》由会员分享，可在线阅读，更多相关《《浏览器对象和》PPT课件.ppt（37页珍藏版）》请在三一办公上搜索。

1、浏览器对象 和 DOM,目标,掌握常用的浏览器对象：Window,document,Historysreen,event掌握DOM的通用节点掌握DOM的元素节点熟悉DOM的文本节点,浏览器对象简介 2-1,http:/,Window 窗口对象,location地址对象,document文档对象,FORM表单对象,浏览器对象的分层结构,window.document.myform.text1,浏览器对象简介 2-2,浏览器对象的分层结构,Window 对象 7-1,属性,Window 对象 7-2,常用方法,Window 对象 7-3,function openwindow()window.op

2、en(google.htm);function closewindow()window.close();,使用 Open 方法打开新窗口,使用 Close 方法关闭窗口,添加单击事件,open（”打开窗口的url”，”窗口名”，”窗口特征”）窗口的特征如下，可以任意组合：height：窗口高度；width：窗口宽度；top：窗口距离屏幕上方的象素值；left：窗口距离屏幕左侧的象素值；toolbar：是否显示工具栏，yes为显示；menubar，scrollbars 表示菜单栏和滚动栏。resizable：是否允许改变窗口大小，yes或1为允许 location：是否显示地址栏，yes或1为允

3、许 status：是否显示状态栏内的信息，yes或1为允许；,Window 对象 7-4,function openwindow()window.open(adv.htm,toolbars=0,scrollbars=0,location=0,statusbars=0,menubars=0,resizable=0,width=650,height=150);看看和我一起打开的广告窗口,Window 对象 7-5,使用 Open 方法打开广告新窗口,添加页面加载事件,showModalDialog（”打开窗口的url”，”窗口名”，”窗口特征”）窗口的特征如下，可以任意组合：dialogHeigh

4、t:对话框高度dialogWidth:对话框宽度dialogLeft:离屏幕左的距离dialogTop:离屏幕上的距离center:窗口是否居中，默认yeshelp:是否显示帮助按钮，默认yesresizable:是否可被改变大小，默认nostatus:是否显示状态栏，默认为yesscroll指明对话框是否显示滚动条。默认为yes下面几个属性是用在HTA中的，在一般的网页中一般不使用dialogHide:在打印或者打印预览时对话框是否隐藏，默认为noedge:指明对话框的边框样式，默认为raisedunadorned:默认为no,Window 对象 7-6,function openwindo

5、w()window.showModalDialog(adv.htm,“scroll:0;status:0;resizable:0;dialogWidth:650px;dialogHeight:150px);看看和我一起打开的广告窗口,Window 对象 7-7,使用 showModalDialog方法打开广告新窗口,添加页面加载事件,1.插入一个层Layer1，z-index=1；2.层中插入一幅图片。,3.定时器函数setTimeout（）的用法：setTimeout（“调用的函数名”，间隔的毫秒数）表示每隔多少毫秒，就循环调用某个函数来执行清除某个定时器：clearTimeout（）方法。

6、例如：var myclocksetTimeout（”move()”,500）;if()clearTimeout（myclock）;,Window 对象 7-8,function move()document.getElementById(Layer1).style.left=Math.random()*500;document.getElementById(Layer1).style.top=Math.random()*500;setTimeout(move(),1000);随机漂浮的广告,Window 对象 7-9,定义层图片移动的函数move(),每隔1秒调用move()函数随机改变层的位

7、置，从而实现随机漂浮的效果,Document 对象 3-1,属性,Document 对象 3-2,方法,Document 对象 3-3,无标题文档function change(color)document.bgColor=color;移过来我变色给你看看！变红色|变蓝色|变黄色,利用document对象的bgColor属性改变背景色,添加鼠标悬停事件,History对象 4-1,history 对象 方法,Location对象 4-2,Location 对象 属性,方法,History 和 Location 对象 4-4,function jump()location.href=docume

8、nt.myform.menu1.value;.-请选择季节景色-春天美景 夏天一色,根据用户的选择，修改跳转的网址,添加选项改变事件,screen对象,Screen的常用属性：height获取屏幕的垂直分辨率width获取屏幕的垂直分辨率availheight获取系统屏幕的工作区域高度，排除 Microsoft Windows 任务栏availwidth 获取系统屏幕的工作区域宽度，排除 Windows 任务栏,当我们使用window的open方法打开新的窗口时，为了使窗口在屏幕的最中间位置，必须使用screen对象计算屏幕中间位置.,screen示例,示例function login()va

9、r winwidth=300;/需要弹出的窗口的宽度var winheight=200;/需要弹出的窗口的高度/需要弹出的窗口的左顶点坐标var winleft=(-winwidth)/2;/需要弹出的窗口的上顶点坐标var wintop=(-winheight)/2;var str=width=+winwidth+,height=+winheight+,left=+winleft+,wintop=+wintop;window.open(login.html,str);登录,计算出弹出窗口的位置,单击登录时弹出,event对象,event代表事件状态，如事件发生的元素，键盘状态，鼠标位置和鼠标

10、按钮状态常用属性:srcElement事件源,发生事件的元素clientX/clientY鼠标指针位置相对于窗口的坐标offsetX,offsetY鼠标指针位置相对于触发事件的坐标keyCode与导致事件的按键关联的 Unicode 按键代码screenX、screenY鼠标指针位置相对于触发事件的对象的坐标returnValue事件的返回值,尽管所有事件属性都可通过所有的 event 对象访问，但是在某些事件中某些属性可能无意义。例如，fromElement和 toElement属性仅当处理 onmouseover和 onmouseout 事件时有意义,event示例,在新窗口中打开 首页

11、后退 前进 关于网站,屏蔽浏览器右键菜单,处理鼠标事件,Html部分,event示例,function cmenu()var menu=document.getElementById(Menu1);if(event.button=2)=;=;=inline;function cmunu2()var menu=document.getElementById(Menu1);=none;,鼠标单击的位置,处理鼠标事件,JS部分,Dom基础,Trees,trees,everywhere Trees,trees,everywhere Welcometoareallyboringpage.Comeagai

12、nsoon.,通常的html文档,Html是一个树形结构,Dom节点,节点是 DOM 中最基本的对象类型，节点就是 DMO 树中的任何事物,节点的主要属性：nodeName 节点的名称。nodeValue 节点的“值”。parentNode 节点的父节点。childNodes 节点的孩子节点列表。firstChild childNodes 列表中第一个节点。lastChild childNodes 列表中的最后一个节点。previousSibling 返回当前节点之前 的节点。nextSibling 列表中的下一个节点。attributes仅用于元素节点，返回元素的属性列表。,Dom基础,va

13、r myDocument=document;var htmlElement=myDocument.documentElement;var headElement=htmlElement.getElementsByTagName(head)0;if(headElement!=null)var titleElement=headElement.getElementsByTagName(title)0;if(titleElement!=null)var titleText=titleElement.firstChild;alert(The page title is+titleText.nodeVa

14、lue+);var bodyElement=headElement.nextSibling;while(bodyElement.nodeName.toLowerCase()!=body)bodyElement=bodyElement.nextSibling;,属性示例：,得到head对象,得到head下一个节点,循环直到得到body节点,Dom节点,节点是 DOM 中最基本的对象类型节点就是 DMO 树中的任何事物,节点的主要方法：insertBefore(newChild,referenceNode)将 newChild 节点插入到 referenceNode 之前。replaceChild

15、(newChild,oldChild)用 newChild 节点替换 oldChild 节点。removeChild(oldChild)从运行该方法的节点中删除 oldChild 节点。appendChild(newChild)将 newChild 添加到运行该函数的节点之中。newChild 被添加到目标节点孩子列表中的末端。hasChildNodes()在调用该方法的节点有孩子时则返回 true，否则返回 false。hasAttributes()在调用该方法的节点有属性时则返回 true，否则返回 false。,Dom方法,function test()var myDocument=do

16、cument;var htmlElement=myDocument.documentElement;var headElement=htmlElement.getElementsByTagName(head)0;if(headElement!=null)var titleElement=headElement.getElementsByTagName(title)0;if(titleElement!=null)var titleText=titleElement.firstChild;var bodyElement=headElement.nextSibling;while()!=“body”

17、)/寻找body标签 bodyElement=bodyElement.nextSibling;if(bodyElement.hasChildNodes()for(i=0;i,Javascipt部分,Dom方法,JavaScript and DOM are a perfect match.You can read more in Head Rush Ajax.,html部分,单击按钮图片消失,文档节点,文档节点document 对象创建新节点：,createElement(elementName)使用给定的名称创建一个元素createTextNode(text)使用提供的文本创建一个新的文本节点

18、createAttribute(attributeName)用提供的名称创建一个新属性,var pElement=myDocument.createElement(p);var text=myDocument.createTextNode(“hello);pElement.appendChild(text);bodyElement.appendChild(pElement);,元素节点,元素节点属性处理有关的方法：getAttribute(name)返回名为 name 的属性值removeAttribute(name)删除名为 name 的属性setAttribute(name,value)创

19、建一个名为 name 的属性并将其值设为 valuegetAttributeNode(name)返回名为 name 的属性节点removeAttributeNode(node)删除与指定节点匹配的属性节点,查找嵌套元素有关的方法：getElementsByTagName(elementName)返回具有指定名称的元素节点列表,元素节点,/创建img元素var imgElement=document.createElement(img);/设置src属性imgElement.setAttribute(src,“dog.jpg);/设置width属性imgElement.setAttribute(

20、width,130);/设置height属性imgElement.setAttribute(height,150);/将元素添加到body中bodyElement.appendChild(imgElement);,方法示例：,文本节点,文本节点用于增加或分解节点中的数据的方法：appendData(text)将提供的文本追加到文本节点的已有内容之后。insertData(position,text)允许在文本节点的中间插入数据。在指定的位置插入 提供的文本replaceData(position,length,text)从指定位置开始删除指定长度的字符，用提供的文本 代替删除的文本,var p

21、Elements=bodyElement.getElementsByTagName(p);for(i=0;ipElements.length;i+)var pElement=pElements.item(i);var text=pElement.firstChild.nodeValue;alert(text);,一般使用 nodeValue 属性来访问文本节点的文本,节点类型,注意:IE6.0不支持,通过节点的nodeType属性来检验节点类型,节点类型,var someNode=;if(someNode.nodeType=Node.ELEMENT_NODE)alert(Weve found

22、an element node named+someNode.nodeName);else if(someNode.nodeType=Node.TEXT_NODE)alert(Its a text node;the text is+someNode.nodeValue);else if(someNode.nodeType=Node.ATTRIBUTE_NODE)alert(Its an attribute named+someNode.nodeName+with a value of+someNode.nodeValue+);,通过节点的nodeType属性来检验节点类型,总结,JavaScript 程序是事件驱动程序onFocus获得焦点事件，表示获得鼠标光标，onBlur失去焦点事件，刚好与之相反浏览器对象是一个分层次的结构，window是顶层的根对象打开窗口使用window对象的open()方法设置定时器，使用window对象的setTimeout()方法location对象的back()和forward()方法等同于前进、后退按钮DOM的通用节点属性DOM的通用节点方法MOM的元素节点DOM的文本节点,