浏览器对象和DOM课件.ppt

1、http:/浏览器对象 和 DOMhttp:/目标目标 掌握常用的浏览器对象：lWindow,document,Historylsreen,eventl掌握DOM的通用节点l掌握DOM的元素节点l熟悉DOM的文本节点http:/浏览器对象简介浏览器对象简介 2-1 http:/Window 窗口对象location地址对象document文档对象FORM表单对象浏览器对象的分层结构window.document.myform.text1 http:/浏览器对象简介浏览器对象简介 2-2浏览器对象的分层结构浏览器对象的分层结构http:/Window 对象对象 7-1 属性 名称名称 说明说明

2、document表示给定浏览器窗口中的 HTML 文档。history 包含有关客户访问过的URL的信息。location包含有关当前 URL 的信息。name设置或检索窗口或框架的名称。status 设置或检索窗口底部的状态栏中的消息。screen包含有关客户端的屏幕和显示性能的信息。http:/Window 对象对象 7-2 名称 说明 alert(“m提示信息)显示包含消息的对话框。confirm（“提示信息”）显示一个确认对话框，包含一个确定取消按钮Prompt（”提示信息“）弹出提示信息框open(url,name)打开新窗口并装入给定 URL 的文档。showModalDialog

3、(“URL”,null,”)创建一个显示指定 HTML 文档的模式对话框。close()关闭当前窗口setTimeout（”函数”,毫秒数）设置定时器：经过指定毫秒值后执行某个函数 setInterval(”函数”,毫秒数）每经过指定毫秒值后计算一个表达式。clearTimeout(定时器对象)取消先前用 setTimeout 方法设置的超时事件。resizeTo(iWidth,iHeight)将窗口左上角的屏幕位置移动到指定的 x 和 y 位置。moveTo(iX,iY)将窗口的大小更改为指定的宽度和高度值。常用方法 http:/Window 对象对象 7-3 function openwi

4、ndow()window.open(google.htm);function closewindow()window.close();使用 Open 方法打开新窗口 使用 Close 方法关闭窗口添加单击事件http:/open（”打开窗口的打开窗口的url”，”窗口名窗口名”，”窗口特征窗口特征”）窗口的特征如下，可以任意组合：lheight：窗口高度；lwidth：窗口宽度；ltop：窗口距离屏幕上方的象素值；lleft：窗口距离屏幕左侧的象素值；ltoolbar：是否显示工具栏，yes为显示；lmenubar，scrollbars 表示菜单栏和滚动栏。lresizable：是否允许改变窗

5、口大小，yes或1为允许 llocation：是否显示地址栏，yes或1为允许 lstatus：是否显示状态栏内的信息，yes或1为允许；Window 对象对象 7-4 http:/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 方法打开广告新窗口 添加页面加载事件http:/showModalDial

6、og（”打开窗口的打开窗口的url”，”窗口名窗口名”，”窗窗口特征口特征”）窗口的特征如下，可以任意组合：ldialogHeight:对话框高度ldialogWidth:对话框宽度ldialogLeft:离屏幕左的距离ldialogTop:离屏幕上的距离lcenter:窗口是否居中，默认yeslhelp:是否显示帮助按钮，默认yeslresizable:是否可被改变大小，默认nolstatus:是否显示状态栏，默认为yeslscroll指明对话框是否显示滚动条。默认为yes下面几个属性是用在HTA中的，在一般的网页中一般不使用ldialogHide:在打印或者打印预览时对话框是否隐藏，默认为

7、noledge:指明对话框的边框样式，默认为raisedlunadorned:默认为noWindow 对象对象 7-6 http:/function openwindow()window.showModalDialog(adv.htm,“scroll:0;status:0;resizable:0;dialogWidth:650px;dialogHeight:150px);看看和我一起打开的广告窗口 Window 对象对象 7-7 使用 showModalDialog方法打开广告新窗口 添加页面加载事件http:/1.插入一个层插入一个层Layer1，z-index=1；2.层中插入一幅图片。层

8、中插入一幅图片。3.定时器函数setTimeout（）的用法：setTimeout（“调用的函数名”，间隔的毫秒数）表示每隔多少毫秒，就循环调用某个函数来执行清除某个定时器：clearTimeout（）方法。例如：var myclocksetTimeout（”move()”,500）;if()clearTimeout（myclock）;Window 对象对象 7-8 http:/ function move()document.getElementById(Layer1).style.left=Math.random()*500;document.getElementById(Layer1).

9、style.top=Math.random()*500;setTimeout(move(),1000);随机漂浮的广告Window 对象对象 7-9 定义层图片移动的函数move()每隔1秒调用move()函数随机改变层的位置，从而实现随机漂浮的效果http:/Document 对象对象 3-1 l属性名称名称 说明说明alinkColor设置或检索文档中所有活动链接的颜色 bgColor设置或检索 Document 对象的背景色 body指定文档正文的开始和结束linkColor设置或检索文档链接的颜色location包含关于当前 URL 的信息 title包含文档的标题url设置或检索当前

10、文档的 URLvlinkColor设置或检索用户访问过的链接的颜色 http:/Document 对象对象 3-2 l方法方法 名称名称 说明说明 clear()清除当前文档 close()关闭输出流并强制显示发送的数据write(text)将文本写入文档http:/Document 对象对象 3-3 无标题文档function change(color)document.bgColor=color;移过来我变色给你看看！变红色|变蓝色|变黄色利用document对象的bgColor属性改变背景色添加鼠标悬停事件http:/History对象对象 4-1 l history 对象 l方法 名称

11、 说明 back()加载 History 列表中的上一个 URL。forward()加载 History 列表中的下一个 URL。go(url or number)加载 History 列表中的一个 URL，或要求浏览器移动指定的页面数。http:/ Location对象对象 4-2 l Location 对象 l属性 名称 说明 host设置或检索位置或 URL 的主机名和端口号hostname设置或检索位置或 URL 的主机名部分href设置或检索完整的 URL 字符串名称说明assign(url)加载 URL 指定的新的 HTML 文档。reload()重新加载当前页replace(ur

12、l)通过加载 URL 指定的文档来替换当前文档l方法 http:/History 和和 Location 对象对象 4-4 function jump()location.href=document.myform.menu1.value;.-请选择季节景色-春天美景 夏天一色根据用户的选择，修改跳转的网址添加选项改变事件http:/screen对象对象Screen的常用属性：lheight获取屏幕的垂直分辨率lwidth获取屏幕的垂直分辨率lavailheight获取系统屏幕的工作区域高度，排除 Microsoft Windows 任务栏lavailwidth 获取系统屏幕的工作区域宽度，排除

13、 Windows 任务栏当我们使用window的open方法打开新的窗口时，为了使窗口在屏幕的最中间位置，必须使用screen对象计算屏幕中间位置.http:/screen示例示例 示例function login()var winwidth=300;/需要弹出的窗口的宽度var winheight=200;/需要弹出的窗口的高度/需要弹出的窗口的左顶点坐标var winleft=(window.screen.width-winwidth)/2;/需要弹出的窗口的上顶点坐标var wintop=(window.screen.height-winheight)/2;var str=width=+

14、winwidth+,height=+winheight+,left=+winleft+,wintop=+wintop;window.open(login.html,str);登录 计算出弹出窗口的位置单击登录时弹出http:/event对象对象event代表事件状态，如事件发生的元素，键盘状态，鼠标位置和鼠标按钮状态常用属性:lsrcElement事件源,发生事件的元素lclientX/clientY鼠标指针位置相对于窗口的坐标loffsetX,offsetY鼠标指针位置相对于触发事件的坐标lkeyCode与导致事件的按键关联的 Unicode 按键代码lscreenX、screenY鼠标指针

15、位置相对于触发事件的对象的坐标lreturnValue事件的返回值尽管所有事件属性都可通过所有的 event 对象访问，但是在某些事件中某些属性可能无意义。例如，fromElement和 toElement属性仅当处理 onmouseover和 onmouseout 事件时有意义http:/event示例示例 在新窗口中打开 首页 后退 前进 关于网站 屏蔽浏览器右键菜单处理鼠标事件Html部分http:/event示例示例 function cmenu()var menu=document.getElementById(Menu1);if(event.button=2)menu.style.

16、top=window.event.offsetY;menu.style.left=window.event.offsetX;menu.style.display=inline;function cmunu2()var menu=document.getElementById(Menu1);menu.style.display=none;鼠标单击的位置处理鼠标事件JS部分http:/Dom基础基础 Trees,trees,everywhere Trees,trees,everywhere Welcome to a really boring page.Come again soon.通常的htm

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

18、。http:/Dom基础基础 var 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

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

20、eNode 之前。lreplaceChild(newChild,oldChild)用 newChild 节点替换 oldChild 节点。lremoveChild(oldChild)从运行该方法的节点中删除 oldChild 节点。lappendChild(newChild)将 newChild 添加到运行该函数的节点之中。newChild 被添加到目标节点孩子列表中的末端。lhasChildNodes()在调用该方法的节点有孩子时则返回 true，否则返回 false。lhasAttributes()在调用该方法的节点有属性时则返回 true，否则返回 false。http:/Dom方法方法

21、 function test()var 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;var bodyElement=headEl

22、ement.nextSibling;while(bodyElement.nodeName.toLowerCase()!=“body”)/寻找body标签 bodyElement=bodyElement.nextSibling;if(bodyElement.hasChildNodes()for(i=0;ibodyElement.childNodes.length;i+)/循环所有标签 var currentNode=bodyElement.childNodesi;if(currentNode.nodeName.toLowerCase()=“img”)bodyElement.removeChild

23、(currentNode);/去除img标签 Javascipt部分http:/Dom方法方法 JavaScript and DOM are a perfect match.You can read more in Head Rush Ajax.html部分单击按钮图片消失http:/文档节点文档节点 文档节点document 对象创建新节点：lcreateElement(elementName)使用给定的名称创建一个元素lcreateTextNode(text)使用提供的文本创建一个新的文本节点lcreateAttribute(attributeName)用提供的名称创建一个新属性var p

24、Element=myDocument.createElement(p);var text=myDocument.createTextNode(“hello);pElement.appendChild(text);bodyElement.appendChild(pElement);http:/元素节点元素节点 元素节点属性处理有关的方法：lgetAttribute(name)返回名为 name 的属性值lremoveAttribute(name)删除名为 name 的属性lsetAttribute(name,value)创建一个名为 name 的属性并将其值设为 valuelgetAttribu

25、teNode(name)返回名为 name 的属性节点lremoveAttributeNode(node)删除与指定节点匹配的属性节点查找嵌套元素有关的方法：lgetElementsByTagName(elementName)返回具有指定名称的元素节点列表http:/元素节点元素节点/创建img元素var imgElement=document.createElement(img);/设置src属性imgElement.setAttribute(src,“dog.jpg);/设置width属性imgElement.setAttribute(width,130);/设置height属性imgEl

26、ement.setAttribute(height,150);/将元素添加到body中bodyElement.appendChild(imgElement);方法示例：http:/文本节点文本节点 文本节点用于增加或分解节点中的数据的方法：lappendData(text)将提供的文本追加到文本节点的已有内容之后。linsertData(position,text)允许在文本节点的中间插入数据。在指定的位置插入 提供的文本lreplaceData(position,length,text)从指定位置开始删除指定长度的字符，用提供的文本 代替删除的文本var pElements=bodyElem

27、ent.getElementsByTagName(p);for(i=0;ipElements.length;i+)var pElement=pElements.item(i);var text=pElement.firstChild.nodeValue;alert(text);一般使用 nodeValue 属性来访问文本节点的文本http:/节点类型节点类型常量值ELEMENT_NODE1ATTRIBUTE_NODE2TEXT_NODE3CDATA_SECTION_NODE4ENTITY_REFERENCE_NODE5ENTITY_NODE6PROCESSING_INSTRCTION_NODE

28、7COMMENT_NODE 8DOCUMENT_NODE9DOCUMENT_TYPE_NODE10DOCUMENT_FRAGMENT_NODE11NOTATION_NODE 12注意:IE6.0不支持通过节点的nodeType属性来检验节点类型http:/节点类型节点类型var someNode=document.documentElement.firstChild;if(someNode.nodeType=Node.ELEMENT_NODE)alert(Weve found an element node named +someNode.nodeName);else if(someNode.

29、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属性来检验节点类型http:/总结总结 l JavaScript 程序是事件驱动程序l onFocus获得焦点事件，表示获得鼠标光标，onBlur失去焦点事件，刚好与之相反l 浏览器对象是一个分层次的结构，window是顶层的根对象l 打开窗口使用window对象的open()方法l 设置定时器，使用window对象的setTimeout()方法l location对象的back()和forward()方法等同于前进、后退按钮l DOM的通用节点属性l DOM的通用节点方法l MOM的元素节点l DOM的文本节点