版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
DOM 文档对象模型 DocumentObjectModelJavaScript将浏览器及网页文档、HTML元素都使用相应的对象表示如：window、document、body、forms这些对象与对象的层次关系称为 DOMDHTML (DynamicHTML 动态HTML)HTML+JavaScript+CSS+DOM的结合使用 称之为DHTMLBOM 浏览器对象模型浏览器对象window对象表示浏览器窗口 对其属性和方法的引用可以省略 window.window对象方法alert()方法显示包含由应用程序自定义消息的对话框confirm()方法 返回true false显示一个确认对话框，prompt()方法显示一个提示对话框 其中带有一条消息和一个输入框确定返回文本框的值 取消返回nullclose()方法 关闭指定的窗口open()方法 打开一个WEB浏览器窗口 当前窗口打开新窗口 覆盖当前窗口window.open（”打开窗口的 url”，”窗口名”，”窗口特征”）window.open("about:blank" );//open() 最简单使用window.open("url","windowName","width=100height=100status=yesmenubar=notoolbar=noresizable=nolocation=yesscrollbars=yes");height：窗口高度；width： 窗口宽度；top：窗口距离屏幕上方的象素值；left：窗口距离屏幕左侧的象素值；toolbar：是否显示工具栏，yes为显示；menubar，scrollbars表示菜单栏和滚动栏。resizable：是否允许改变窗口大小， yes或1为允许location：是否显示地址栏，yes或1为允许status：是否显示状态栏内的信息， yes或1为允许定时器轮询Window.setTimeout(函数名，指定时间毫秒数 )延时执行某个函数 执行一次clearTimeout(定时器对象名称) 取消执行定时器setInterval(函数名称，时间毫秒数 )定时执行指定的函数 间隔为多少毫秒数clearInterval(定时器对象名称) 取消定时器定时器示例
:<script
type
="text/javascript">//setTimeout(
函数名，指定时间毫秒数
)
延时执行某个函数
执行一次//clearTimeout( 定时器对象名称)var start ;function showName(){document .all ["myname"]. style .display ="block" ;start =setTimeout ("hideName()" ,300);}function hideName (){document .all ["myname"]. style .display ="none" ;start =setTimeout ("showName()" ,300);}function stopTime (){if (start != null ) {clearTimeout (start );start =null ;document.all .btn.value ="开始闪烁"}else{start =setTimeout ("showName()" , 300);document.all .btn.value ="停止闪烁"}}</script ></head><body onLoad="showName(); "><input type="button" onClick ="stopTime (); " id="btn" value ="停止闪烁" /><h2>Hello <font id="myname" color ="red" style ="display :none">肖总</font ></h2></body><scripttype="text/javascript">//setInterval(函数名称，时间毫秒数)定时执行指定的函数间隔为多少毫秒数//clearInterval(定时器名称)取消定时器varnum=0;varmyTimer;functionshow(){}document.all.myNum.innerHTML=num++;functiontestTimer(){if(myTimer!=null){clearInterval(myTimer);num=0;myTimer=null;document.all.btn.value="开始计时";}else{myTimer=setInterval(show,100);document.all.btn.value="停止计时";}}</script></head><body><h2>计时：<fontid="myNum"face="宋体"color="red">0</font></h2><input type="button" name="btn" onclick ="testTimer (); " value ="开始计时" /></body></html>其他例子见：js_时间显示器.htmljs_ 跑马灯.htmljs_ 文字滚动.html网页对话框模式对话框和无模式对话框window.showModalDialog("URL",传递变量名，"窗口特征")建议传递window对象window.showModelessDialog("URL",传递变量名，"窗口特征")子窗口访问父窗口数据使用 dialogArguments对象返回到父窗口的值使用 returnValuewindow对象的子对象属性：parent对象代表对象层次中的父窗口parent对象仅仅是对子窗口有意义self对象 代表对当前窗口或框架的引用top对象 代表最顶层的窗口opener对象代表创建当前窗口的源窗口用于确定open方法打开窗口的源窗口location对象代表特定窗口的URL信息location.replace(url)刷新不后退location.href="url"
加载可后退window.location
.reload
();history对象 用于存储客户端最近访问过的网址清单onClick="javascript:top.mymain.history.forward();">=history.go(1)onClick="javascript:top.mymain.history.back(1);"=history.go(-1)history.go()刷新表单不提交history.forward()指向浏览器历史列表中的下一个URL，相当于点击浏览器的“前进”按钮history .back() 指向浏览器历史列表中的上一个 URL，相当于点击浏览器的“后退”按钮window.screen代表浏览器屏幕设置浏览器屏幕varh=screen.Height;
//屏幕高度varw=screen.Width;
//屏幕宽度window对象属性：window.status代表浏览器状态栏设置状态栏标题window.status="清华IT";window.closed 窗口是否关闭window的事件<html><head><meta
http-equiv
="Content-Type"
content
="text/html;charset=UTF-8"><title<script
>window 对象的专有事件演示language ="javascript"
</titletype
>="text/javascript">alert</script
("开始加载网页>
....\n---
请注意网页的加载顺序
---"
);</head><!--window
的专有事件
:onload 在浏览器完成对象的装载后触发事件onunload 在对象卸载前立即触发事件onbeforeunload 在页面将要被卸载前触发事件window 对象的事件处理通过body标签的事件属性来设置的--><body onload ="alert ('html 文档加载完毕')"onbeforeunload ="window .event .returnValue ='****** 你确定关闭本窗口******' "onunload ="alert ('拜拜')"><h2>注意网页的加载顺序哦!!! </h2></body></html><script
language
="javascript"
type
="text/javascript">alert
("加载写在最下面的
JavaScript
脚本");</script
>document对象代表给浏览器窗口中的HTML文档document的属性:<scripttype="text/javascript"language="JavaScript">functionchange(){document.bgColor="green";document.fgColor="red";//文本前景色document.vlinkColor="0x00ff00";//已访问过的链接文本颜色document.linkColor="gray";//链接文本颜色}functionshowURL(){alert(document.URL);//当前文档Unicode编码的URL地址}</script><bodyonload="change();"><h2>普通文本</h2><ahref="#"onclick="showURL();">链接</a></body>document的方法document.write()document.writeln()document.close()<body><h2>开始的内容</h2><scripttype="text/javascript">document.write("这是document对象写入的内容<br>");varstr="world";document.write("哈楼",str,"javascript","<br>");document.writeln(mystr="Hello","World","<br>");document.writeln(mystr)vara="帅哥";document.write(newStr=(a=="美女")?"东方不败":"西门吹雪");document.write("<br>");functionchangeDoc(){document.writeln("以下是更新后的文档内容<br>");document.writeln('<scriptlanguage="javascript">');document.writeln('functionchangeDoc()');document.writeln('{');document.writeln('document.writeln("hello");');document.writeln('document.writeln("world");');document.writeln('}');document.writeln('</scr'+'ipt>');//注意这里写法document.writeln('<inputtype="button"value="测试document对象"onclick="changeDoc();">');document.close();//关闭文档输出}</script ><input type="button" value ="测试document 对象" onclick ="changeDoc (); "></body>document集合属性:document.forms //返回文档中的表单数组document.anchors //获取所有带有 name和/或id属性的 a对象的集合数组document.images //返回文档中的 image的数组document.links //获取文档中所有指定了 HREF属性的 a对象和所有 area对象的集合数组document.all 返回对象所包含的元素集合的引用<script type="text/javascript">window
.status
="清华IT";
//设置状态栏文本document
.title
="演示";function
show
(){alert
("文档标题："
+document
.title
);alert
("所有指定了href 属性的对象集合数组长度
:"
+document
.links
.length
);alert
("所有带有name或id
属性的
a对象的集合数组长度：
"
+document
.anchors
.length
);alertalertalert
(document .links [1].href );(document .all ["an1" ].name)(document .forms["frm1" ].method);}</script
></head><body><button
name="btn"
onClick
="show();
">document 集合属性演示</button ><br/><a name="an1" id="a"> TOjs_right.html </a><br/><a name="an2" id="b" href ="js_left.html"> 链接到js_left.html </a><br/><a href ="js_right.html"> 链接到js_right.html </a><br/><form name="frm1" method="get"></form><form name="frm2" method="post"></form><form name="frm3" method="post"></form></body>frames框架对象不能同时设定bodyparent.frames返回父窗口的框架数组：alert(parent.frames[0].name)alert(parent.frames["myleft"].name)body对象及通用属性body对象方法:<script type
="text/javascript"
language
="JavaScript">function
createA (){var
myA=document
.createElement
("a");
// 创建一个html
元素myA.href ="js_ 跑马灯.html" ;myA.innerText ="链接到js_跑马灯.html" ;document .body.appendChild (myA); //body 对象添加子节点}</script ></head><body onload ="createA (); "><h2>这是一个javascript 动态创建的超链接</h2></body>通用属性:<html><head><meta http-equiv ="Content-Type" content ="text/html;charset=UTF-8"><title >body对象属性演示</title ><style >body{ font-size :20px;}</style ></head><body><!—通用属性：innerText 起始和结束标签内的文本innerHTML 起始和结束标签内的 HTMLouterText
起始和结束标签内的文本
(包含标签本身
)outerHTML
起始和结束标签内的
HTML(包含标签本身
)--><p
id="p1"
onmouseoveronmouseout
="this="this
.innerText.innerHTML
='<I>innerText</I>'='<I>innerHTML</I>'
"">innerText
与innerHTML
的区别</p><div
onmouseoveronmouseout
="p2.outerHTML="p2.outerText
='<pid=p2><I>outerHTML</I></p>'='<pid=p2><I>outerText</I></p>'
"" >测试outerText
与outerHTML
区别
<br>注意当鼠标再次移动到
div
上时报错 原因：
p2
不存在
原来的p2已经被替换成文本</div><p id="p2">outerText
与outerHTML
区别</p><p
id=p3><I>哈楼！！！</I></p><input<input<input<input
typetypetypetype
="button"="button"="button"="button"
valuevaluevaluevalue
="innerText"="innerHTML"="outerText"="outerHTML"
onclickonclickonclickonclick
="alert="alert="alert="alert
(p3.innerText(p3.innerHTML(p3.outerText(p3.outerHTML
)">)">)">)"></body></html><body><div id="float_icon"<ahref ="#"><</div></body><script >/*
img
style="positionsrc="cat.gif"
:absoluteborder=1></
;lefta>
=0;top=0;">offsetTop
表示对象距顶部高度offsetLeft
表示对象距左边宽度offsetWidth 表示对象宽度offsetHeight 表示对象高度clientWidth 表示对象不包含滚动条或边框、边距的宽度clientHeight 表示对象不包含滚动条或边框、边距的高度clientTop 表示对象不包含滚动条或边框、边距的距父容器顶部高度clientWidth 表示对象不包含滚动条或边框、边距的距父容器左边宽度*/vardirX=1,dirY=1;varxPos=0,yPos=0;window.setInterval(moveIcon,10);functionmoveIcon(){xPos+=2*dirX;yPos+=2*dirY;float_icon.style.top=yPos;//topdiv距顶部高度float_icon .styleif (xPos <= 0||
.leftxPos
=xPos; //leftdiv 距左边宽度+float_icon .offsetWidth >=document
.body.clientWidth
)
{dirX
=-dirX ;}if
(yPos
<= 0||
yPos
+float_icon
.offsetHeight
>=document
.body.clientHeight
)
{dirY
=-dirY ;}}</script
>Style对象:<script type="text/javascript"
language
="JavaScript">function showItem (){获取id为sp的span标记下的img标记数组var imgs =document .getElementByIdvar cp=document.getElementById (var canExpand =true ;if (imgs[0].src.indexOf ("minus.gif"canExpand =false ;imgs[0].src="images/plus.gif"}else{imgs[0].src="images/minus.gif"
("sp""cp" );)!=;;
).getElementsByTagName-1){
("img"
);}if
(canExpand
){cp.style
.display
="block"
;
//显示}else{cp.style
.display
="none"
;
// 隐藏}}</script
></head><body><span id
="sp" style ="cursor
:hand;"
onclick
="showItem
()"><img
src="images/minus.gif"></span>总公司<ul id="cp"><li >上海分公司<li >北京分公司<li >常德分公司</ul></body>js树的例子见：js_静态树.htmlw3cDOM关于节点的操作引用结点document.getElementById("idName");document.getElementsByTagName("tagName"); 返回数组document.getElementsByName(" 元素名称");引用子结点elementName.childNodes elementName 节点下所有子节点数组elementName.firstChildelementName.lastChild引用父结点elementName.parentNode elementName 节点的父节点elementName.parentElement elementName 节点的父元素(IE)获取结点信息node.nodeName
node
节点的名称node.nodeType
node
节点的节点类型
1element2attribute3textnode.nodeValue
node
节点的文本内容属性结点elementNode.setAttribute(attributeName,attributeValue) 设置节点属性elementNode.getAttribute(arributeName) 获取节点属性例子：<body><div
id="div1"><
img
src="images/splash.gif"/><
font
>这是文本</font
></div><input
type="button"
value ="DOM演示"
onclick
="changeText
();
"><hr></body></html><script type="text/javascript">function changeText (){alert
("节点名称:"+node.childNodes
[0].
nodeName);alert
("节点类型:"
+node.childNodes
[0].
nodeType
);alert
("节点的文本内容
:"
+node.childNodes
[1].
childNodes
[0].nodeValue
);node
.childNodes
[1].
childNodes
[0].
nodeValue
="这是改变后的文本
";node
.childNodes
[1].
setAttribute
("color"
,"red"
);//
设置节点属性}</script
>节点的创建和删除创建元素节点document.createElement("div");创建文本节点document.creatTextNode("hello");添加子节点父节点.appendChild("span"); 插入所有子节点之后返回新节点引用插入子节点父节点.insertBefore( 新节点,当前节点) 返回新节点引用删除子节点父节点.removeChild(childNode)例子：<html><head><scriptfunctionvarvar_imgmydiv
type="text/javascript">createDOM (){mydiv =document .getElementById ("div3"_img =document .createElement ("img" );.setAttribute ("src" ,"images/fish.gif".appendChild (_img);
);
);varvarvar
_span =document .createElement ("span" );_hr =document.createElement ("<hr>" );_text =document .createTextNode ("helloworld"
);_span_spaninsertAt
.appendChild (_hr);.appendChild (_text(mydiv,_span,1);
);}function insertAt (currentNode ,newNode,index ){如果父结点无子结点则直接添加if (!currentNodecurrentNode}else {
.hasChildNodes ()){.appendChild (newNode);否则在指定索引的子节点前添加一个节点}}</script ></head><body><div id="div3"><input
type="button"
value ="DOM演示"
onclick
="createDOM
();
"></div></body></html>DOM
操作表格表格的其他标签：
<thead>表头
只一个
<tbody>表体
可以有多个<table
border
="1"
width
="500"><thead><tr><th>用户名</th><th>地址</th><th>电话</th></tr></thead><tbody ><tr><td>宇春妹妹</td><td>后街</td><td>111111</td></tr><tr><td>芙蓉姐姐</td><td>后街</td><td>111111</td></tr></tbody
></table
>引用单元格mytable.rows//
返回行的集合mytable.rows(i).cells(j)//
返回指定行和列的单元格mytable.rows(i).cells(j).childNodes[0].value//
返回指定行和列的单元格文本创建表格varmytable=document.createElement("table")删除行mytable.deleteRow(i);添加行mytable.insertRow(i)添加单元格mytableRow.insertCell(i)删除单元格mytableRow.deleteCell(i)删除列mytable.rows[i].deleteCell(j);使用单元格varcb=document.createElement("input")cb.type="checkbox"mytable.rows[0].cells[1].appendChild(cb)mytable.rows[0].cells[0].innerHTML="hello"例子：<body><h3 align ="center" >用户信息</h3><table id="mytb" align ="center" border ="1" width ="500"><thead><tr align ="center"><td><input type='checkbox' id="selAll" onclick
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 2024年02月江苏海洋大学2024年公开招聘教师（第一批）笔试参考题库后附答案详解
- 2024年02月广州市南沙区教育局2024年公开招聘5名事业编制园级领导11笔试参考题库后附答案详解
- 2024年02月山东省胶州市2024年“优才聚胶”选聘80名中小学教师20笔试参考题库后附答案详解
- 2024年02月厦门市2024年公开招聘中小学幼儿园职业学校教师531笔试参考题库后附答案详解
- 2024年02月云南省保山市市直事业单位2024年公开遴选管理人员和专业技术人员354笔试参考题库后附答案详解
- 四川省泸州市合江县2023-2024学年七年级下学期期中考试地理试题
- 2022咨询工程师《项目决策分析与评价》真题-1
- 使用手机的“三大纪律,八项注意”
- 三年级上册数学教案-第六单元 第11课时 运用乘、除法解决问题(一) 人教版
- 2024年4月山西吕梁市城乡规划设计院专业技术人员招考聘用16人笔试参考题库附带答案详解
- 2022-2023学年广东省广州市白云区七年级（下）期末数学试卷（含解析）
- 武汉农商行2023年招聘人员笔试历年难、易错考点试题含答案附详解
- 2023年注册核安全工程师-核安全综合知识考试历年试题摘选附答案
- 机械制图任务33-减速箱输出轴的测绘课件
- 中国历年总人口、出生人口、死亡人口、出生率、死亡率、城镇人口、城市化率表(截止2022年末)
- 2022-2023学年广西南宁市部分地区八年级（下）期中数学试卷-普通用卷
- 国家级工法申报表
- 陪诊师免责协议版本
- 劳务技术标模板劳务分包技术标
- 学生矛盾纠纷排查登记表
- 课件：人教部编版 高中语文必修上册 《心有一团火温暖众人心》
评论
0/150
提交评论