版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
浏览器对象
和DOM目标掌握常用的浏览器对象：Window,document,Historysreen,event掌握DOM的通用节点掌握DOM的元素节点熟悉DOM的文本节点浏览器对象简介2-1Window窗口对象location地址对象document文档对象FORM表单对象浏览器对象的分层结构window.document.myform.text1Window对象7-1属性
名称说明document表示给定浏览器窗口中的HTML文档。history包含有关客户访问过的URL的信息。location包含有关当前URL的信息。name设置或检索窗口或框架的名称。status设置或检索窗口底部的状态栏中的消息。
screen包含有关客户端的屏幕和显示性能的信息。Window对象7-2名称说明alert(“m提示信息")显示包含消息的对话框。
confirm（“提示信息”）显示一个确认对话框，包含一个确定取消按钮Prompt（”提示信息“）弹出提示信息框open("url","name")打开新窗口并装入给定URL的文档。showModalDialog(“URL”,null,””)创建一个显示指定HTML文档的模式对话框。close()关闭当前窗口setTimeout（”函数”,毫秒数）
设置定时器：经过指定毫秒值后执行某个函数
setInterval(”函数”,毫秒数）
每经过指定毫秒值后计算一个表达式。clearTimeout(定时器对象)取消先前用setTimeout
方法设置的超时事件。resizeTo(iWidth,iHeight)将窗口左上角的屏幕位置移动到指定的x
和y
位置。moveTo(iX,iY)将窗口的大小更改为指定的宽度和高度值。常用方法
Window对象7-3<HTML><HEAD><SCRIPT>functionopenwindow(){window.open("google.htm");}functionclosewindow(){window.close();}</SCRIPT></HEAD><BODY><FORM><INPUTTYPE=buttonVALUE="打开窗口"onClick="openwindow()"><INPUTTYPE=buttonVALUE="关闭窗口"onClick="closewindow()"></FORM><BODY>使用Open方法打开新窗口使用Close方法关闭窗口添加单击事件<HTML><HEAD><SCRIPTlanguage="JavaScript">functionopenwindow(){window.open("adv.htm","","toolbars=0,scrollbars=0,location=0,statusbars=0,menubars=0,resizable=0,width=650,height=150");}</SCRIPT></HEAD><BODYonLoad="openwindow()"> <H2>看看和我一起打开的广告窗口</H2>
</BODY></HTML>Window对象7-5使用Open方法打开广告新窗口添加页面加载事件showModalDialog
（”打开窗口的url”，”窗口名”，”窗口特征”）窗口的特征如下，可以任意组合：dialogHeight:对话框高度dialogWidth:对话框宽度dialogLeft:离屏幕左的距离dialogTop:离屏幕上的距离center:窗口是否居中，默认yeshelp:是否显示帮助按钮，默认yesresizable:
是否可被改变大小，默认nostatus:是否显示状态栏，默认为yesscroll指明对话框是否显示滚动条。默认为yes下面几个属性是用在HTA中的，在一般的网页中一般不使用dialogHide:在打印或者打印预览时对话框是否隐藏，默认为noedge:
指明对话框的边框样式，默认为raisedunadorned:默认为noWindow对象7-6<HTML><HEAD><SCRIPTlanguage="JavaScript">functionopenwindow(){ window.
showModalDialog("adv.htm","", “scroll:0;status:0;resizable:0; dialogWidth:650px;dialogHeight:150px");}</SCRIPT></HEAD><BODYonLoad="openwindow()"> <H2>看看和我一起打开的广告窗口</H2>
</BODY></HTML>Window对象7-7使用showModalDialog方法打开广告新窗口添加页面加载事件<head><scriptlanguage=JavaScript>functionmove(){document.getElementById("Layer1").style.left=Math.random()*500;document.getElementById("Layer1").style.top=Math.random()*500;setTimeout("move()",1000);}</script></head><bodyonload="move()""><DIVid="Layer1"style="position:absolute;left:14px;top:44px;width:150px;height:102px;z-index:1"><Ahref=""><IMGsrc="piaofu.jpg"width="150"height="100"border="0"></A></DIV><H2>随机漂浮的广告</H2></BODY>Window对象7-9定义层图片移动的函数move()每隔1秒调用move()函数随机改变层的位置，从而实现随机漂浮的效果Document对象3-1属性名称说明alinkColor设置或检索文档中所有活动链接的颜色bgColor设置或检索Document对象的背景色
body指定文档正文的开始和结束linkColor设置或检索文档链接的颜色location包含关于当前URL的信息
title包含文档的标题url设置或检索当前文档的URLvlinkColor设置或检索用户访问过的链接的颜色Document对象3-2方法
名称
说明
clear()清除当前文档
close()关闭输出流并强制显示发送的数据write("text")将文本写入文档History对象4-1history对象
方法
名称
说明
back()加载History列表中的上一个URL。
forward()加载History列表中的下一个URL。
go("url"ornumber)加载History列表中的一个URL，或要求浏览器移动指定的页面数。
Location对象4-2Location对象
属性
名称
说明
host设置或检索位置或URL的主机名和端口号hostname设置或检索位置或URL的主机名部分href设置或检索完整的URL字符串名称说明assign("url")加载URL指定的新的HTML文档。
reload()重新加载当前页replace("url")通过加载
URL指定的文档来替换当前文档方法
History和
Location对象4-4<scriptlanguage="JavaScript">functionjump(){
location.href=document.myform.menu1.value;}</script></HEAD><BODY><FORMname="myform">...<SELECTname="menu1"onChange="jump()"><OPTION>请选择季节景色--</OPTION>
<OPTIONvalue="spring.htm">春天美景</OPTION>
<OPTIONvalue="summer.htm">夏天一色</OPTION>…根据用户的选择，修改跳转的网址添加选项改变事件screen示例<HTML><HEAD><title>示例<title></HEAD><scriptlanguage="javascript"> functionlogin(){ varwinwidth=300;//需要弹出的窗口的宽度 varwinheight=200;//需要弹出的窗口的高度 //需要弹出的窗口的左顶点坐标 varwinleft=(window.screen.width-winwidth)/2; //需要弹出的窗口的上顶点坐标 varwintop=(window.screen.height-winheight)/2; varstr="width="+winwidth+",height="+winheight+",
left="+winleft+",wintop="+wintop; window.open("login.html","",str); }</script><BODY> <ahref="javascript:login();">登录</a></BODY></HTML>计算出弹出窗口的位置单击登录时弹出event对象event代表事件状态，如事件发生的元素，键盘状态，鼠标位置和鼠标按钮状态常用属性:srcElement事件源,发生事件的元素clientX/clientY鼠标指针位置相对于窗口的坐标offsetX,offsetY鼠标指针位置相对于触发事件的坐标keyCode与导致事件的按键关联的Unicode按键代码screenX、screenY鼠标指针位置相对于触发事件的对象的坐标returnValue事件的返回值尽管所有事件属性都可通过所有的event对象访问，但是在某些事件中某些属性可能无意义。例如，fromElement和toElement属性仅当处理onmouseover和onmouseout事件时有意义event示例<BODYoncontextmenu="returnfalse;"onmouseup="cmenu()"onmousedown="cmunu2()"><divid="Menu1"style="position:absolute;background-color:White;border-width:1px;border-style:solid;border-color:#aaaaaa;padding:10px;display:none;width:160;"><li><ahref="#">在新窗口中打开</a></li><li><ahref="#">首页</a></li><li><ahref="#">后退</a></li><li><ahref="#">前进</a></li><hr/><li><ahref="#">关于网站</a></li></div></BODY>屏蔽浏览器右键菜单处理鼠标事件Html部分Dom基础<html>
<head>
<title>Trees,
trees,
everywhere</title>
</head>
<body>
<h1>Trees,
trees,
everywhere</h1>
<p>Welcome
to
a
<em>really</em>
boring
page.</p>
<div>
Come
again
soon.
<img
src="come-again.gif"
/>
</div>
</body>
</html>通常的html文档Html是一个树形结构Dom节点节点是DOM中最基本的对象类型，节点就是DMO树中的任何事物节点的主要属性：
nodeName
节点的名称。
nodeValue
节点的“值”。
parentNode
节点的父节点。
childNodes
节点的孩子节点列表。
firstChild
childNodes
列表中第一个节点。
lastChild
childNodes
列表中的最后一个节点。
previousSibling
返回当前节点之前的节点。
nextSibling
列表中的下一个节点。attributes 仅用于元素节点，返回元素的属性列表。Dom方法<scriptlanguage="JavaScript">functiontest(){varmyDocument=document;varhtmlElement=myDocument.documentElement;varheadElement=htmlElement.getElementsByTagName("head")[0];if(headElement!=null){vartitleElement=headElement.getElementsByTagName("title")[0];if(titleElement!=null){vartitleText=titleElement.firstChild;}varbodyElement=headElement.nextSibling;while(bodyElement.nodeName.toLowerCase()!=“body”){//寻找body标签
bodyElement=bodyElement.nextSibling;}if(bodyElement.hasChildNodes()){for(i=0;i<bodyElement.childNodes.length;i++){//循环所有标签
varcurrentNode=bodyElement.childNodes[i];if(currentNode.nodeName.toLowerCase()==“img”){bodyElement.removeChild(currentNode);//去除img标签
}
}
}
}}</script>Javascipt部分Dom方法<body><p>JavaScriptandDOMareaperfectmatch.Youcanreadmorein<i>HeadRushAjax</i>.</p><imgsrc=""/><inputtype="button"value="Testme!"onClick="test();"/></body>html部分单击按钮图片消失文档节点文档节点document对象创建新节点：createElement(elementName)
使用给定的名称创建一个元素createTextNode(text)
使用提供的文本创建一个新的文本节点createAttribute(attributeName)
用提供的名称创建一个新属性varpElement=myDocument.createElement("p");vartext=myDocument.createTextNode(“hello");pElement.appendChild(text);bodyElement.appendChild(pElement);元素节点元素节点属性处理有关的方法：getAttribute(name)
返回名为name的属性值removeAttribute(name)
删除名为name的属性setAttribute(name,value)
创建一个名为name的属性并将其值设为valuegetAttributeNode(name)
返回名为name的属性节点removeAttributeNode(node)
删除与指定节点匹配的属性节点查找嵌套元素有关的方法：getElementsByTagName(elementName)
返回具有指定名称的元素节点列表元素节点//创建img元素varimgElement=document.createElement("img");//设置src属性imgElement.setAttribute("src",“dog.jpg");//设置width属性imgElement.setAttribute("width","130");//设置height属性imgElement.setAttribute("height","150");//将元素添加到body中bodyElement.appendChild(imgElement);方法示例：文本节点文本节点用于增加或分解节点中的数据的方法：appendData(text)
将提供的文本追加到文本节点的已有内容之后。insertData(position,text)
允许在文本节点的中间插入数据。在指定的位置插入提供的文本replaceData(position,length,text)
从指定位置开始删除指定长度的字符，用提供的文本
代替删除的文本varpElements=bodyElement.getElementsByTagName("p");for(i=0;i<pElements.length;i++){varpElement=pElements.item(i);vartext=pElement.firstChild.nodeValue;alert(text);}一般使用nodeValue属性来访问文本节点的文本节点类型常量值ELEMENT_NODE1ATTRIBU
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 卷板机操作工岗前工作意识考核试卷含答案
- 信用分析师安全素养知识考核试卷含答案
- 弹簧工安全防护测试考核试卷含答案
- 沥青装置操作工岗前记录考核试卷含答案
- 野生动物监测工岗前工作流程考核试卷含答案
- 城市轨道交通服务员岗前工艺控制考核试卷含答案
- 2026年建筑设计项目合作合同协议
- 2026五年级下《古诗三首·四时田园杂兴》教学课件
- 《古代印度》教案
- 8.1 文化的民族性与多样性 课件高中政治统编版必修四哲学与文化
- 《AQ3067-2026化工和危险化学品重大生产安全事故隐患判定准则》解读
- 施工电梯基础监理实施细则
- 国家机关事务管理局所属事业单位2025年度公开招聘应届毕业生笔试模拟试题
- 服装压力舒适性的测试与评价体系构建
- 2026年钻探工技师考试题及答案
- 2026年河北邢台市中考数学试题及答案
- 2026年高考地理高分冲刺学习指南
- 第二单元 辽宋夏金元时期：民族关系发展和社会变化 单元总结 - 学生版
- 国开2026年《公共政策概论》形成性考核任务1-4答案
- 2026年3月版-安全环境职业健康法律法规、规章、标准文件清单
- 2026年历史上海中考试卷及答案
评论
0/150
提交评论