JavaScript_DOM操作详解.doc

DOM 文档对象模型 Document Object Model JavaScript将浏览器及网页文档、HTML元素都使用相应的对象表示如：window、document、body、forms这些对象与对象的层次关系称为DOMDHTML (Dynamic HTML 动态HTML) HTML+JavaScript+CSS+DOM的结合使用 称之为DHTMLBOM 浏览器对象模型 浏览器对象window对象 表示浏览器窗口 对其属性和方法的引用可以省略window.window对象方法 alert()方法 显示包含由应用程序自定义消息的对话框 confirm()方法 返回true false显示一个确认对话框，prompt()方法 显示一个提示对话框 其中带有一条消息和一个输入框确定 返回文本框的值 取消 返回nullclose()方法 关闭指定的窗口 open()方法 打开一个WEB浏览器窗口 window.location.href=URL 当前窗口打开新窗口 覆盖当前窗口window.open（”打开窗口的url”，”窗口名”，”窗口特征”） window.open(about:blank); /open()最简单使用window.open(url,windowName,width=100 height=100 status=yes menubar=notoolbar=no resizable=no location=yes scrollbars=yes);height： 窗口高度； width： 窗口宽度； top： 窗口距离屏幕上方的象素值； left：窗口距离屏幕左侧的象素值； toolbar： 是否显示工具栏，yes为显示； menubar，scrollbars 表示菜单栏和滚动栏。 resizable： 是否允许改变窗口大小，yes或1为允许 location： 是否显示地址栏，yes或1为允许 status：是否显示状态栏内的信息，yes或1为允许定时器 轮询Window. setTimeout(函数名，指定时间毫秒数) 延时执行某个函数 执行一次clearTimeout(定时器对象名称) 取消执行定时器setInterval(函数名称，时间毫秒数) 定时执行指定的函数 间隔为多少毫秒数clearInterval (定时器对象名称) 取消定时器定时器示例:/setTimeout(函数名，指定时间毫秒数) 延时执行某个函数 执行一次/clearTimeout(定时器对象名称)var start;function showName()document.allmyname.style.display=block; start=setTimeout(hideName(),300);function hideName()document.allmyname.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=停止闪烁 Hello肖总/setInterval(函数名称，时间毫秒数) 定时执行指定的函数 间隔为多少毫秒数/clearInterval (定时器名称) 取消定时器var num=0;var myTimer;function show() document.all.myNum.innerHTML=num+;function testTimer() if(myTimer!=null ) clearInterval(myTimer);num=0;myTimer=null;document.all.btn.value=开始计时;elsemyTimer=setInterval(show,100);document.all.btn.value=停止计时;计时：0其他例子见：js_时间显示器.html js_跑马灯.html js_文字滚动.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 代表浏览器屏幕 设置浏览器屏幕var h=screen.Height; /屏幕高度var w=screen.Width; /屏幕宽度window对象属性：window.status 代表浏览器状态栏设置状态栏标题window.status=清华IT; window.closed 窗口是否关闭window的事件window 对象的专有事件演示alert(开始加载网页.n -请注意网页的加载顺序-); 注意网页的加载顺序哦!alert(加载写在最下面的JavaScript脚本); document对象 代表给浏览器窗口中的 HTML 文档 document的属性: function change()document.bgColor=green;document.fgColor=red; /文本前景色document.vlinkColor=0x00ff00; /已访问过的链接文本颜色document.linkColor=gray; /链接文本颜色 function showURL()alert(document.URL); /当前文档Unicode编码的 URL地址普通文本链接document的方法document.write()document.writeln() document.close() 开始的内容 document.write(这是document对象写入的内容); var str = world; document.write(哈楼 , str, javascript , ); document.writeln(mystr = Hello , World, ); document.writeln(mystr) var a = 帅哥; document.write(newStr = (a = 美女) ? 东方不败 : 西门吹雪); document.write();function changeDoc() document.writeln(以下是更新后的文档内容); document.writeln(); document.writeln(function changeDoc(); document.writeln(); document.writeln(document.writeln(hello );); document.writeln(document.writeln(world );); document.writeln(); document.writeln();/注意这里写法 document.writeln(); document.close(); /关闭文档 输出 document集合属性:document.forms /返回文档中的表单数组document.anchors /获取所有带有 name 和/或 id 属性的 a 对象的集合数组document.images /返回文档中的image的数组document.links /获取文档中所有指定了 HREF 属性的 a 对象和所有 area 对象的集合数组 document.all 返回对象所包含的元素集合的引用 window.status = 清华IT; /设置状态栏文本 document.title = 演示; function show() alert(文档标题： + document.title); alert(所有指定了href属性的 对象集合数组长度: + document.links.length); alert(所有带有 name或 id 属性的 a对象的集合数组长度： + document.anchors.length); alert(document.links1.href); alert() alert(document.formsfrm1.method); document集合属性演示 TO js_right.html 链接到js_left.html 链接到js_right.html frames框架对象 不能同时设定bodyparent.frames 返回父窗口的框架数组：alert(top.frames.length);alert()alert()body对象及通用属性body对象方法:function createA()var myA=document.createElement(a); /创建一个html元素myA.href=js_跑马灯.html;myA.innerText=链接到js_跑马灯.html;document.body.appendChild(myA); /body对象添加子节点 这是一个javascript动态创建的超链接通用属性:body对象属性演示body font-size:20px;p id=p1 onmouseover=this.innerText=innerText onmouseout=this.innerHTML=innerHTMLinnerText与innerHTML的区别div onmouseover=p2.outerHTML=outerHTML onmouseout=p2.outerText= outerText 测试outerText与outerHTML区别 注意当鼠标再次移动到div上时报错 原因： p2不存在 原来的p2已经被替换成文本 outerText与outerHTML区别 哈楼！ /* offsetTop 表示对象距顶部高度 offsetLeft 表示对象距左边宽度 offsetWidth 表示对象宽度 offsetHeight 表示对象高度 clientWidth 表示对象不包含滚动条或边框、边距的宽度 clientHeight 表示对象不包含滚动条或边框、边距的高度 clientTop 表示对象不包含滚动条或边框、边距的距父容器顶部高度 clientWidth 表示对象不包含滚动条或边框、边距的距父容器左边宽度*/ var dirX = 1, dirY = 1; var xPos = 0, yPos = 0; window.setInterval(moveIcon, 10); function moveIcon() xPos += 2 * dirX; yPos += 2 * dirY; float_icon.style.top = yPos; /top div距顶部高度 float_icon.style.left = xPos; /left div距左边宽度 if (xPos = document.body.clientWidth) dirX = -dirX; if (yPos = document.body.clientHeight) dirY = -dirY; Style对象:function showItem()/获取id为sp的span标记下的img标记数组var imgs=document.getElementById(sp).getElementsByTagName(img);var cp=document.getElementById(cp);var canExpand=true;if(imgs0.src.indexOf(minus.gif)!=-1)canExpand=false;imgs0.src=images/plus.gif;elseimgs0.src=images/minus.gif;if(canExpand)cp.style.display=block; /显示elsecp.style.display=none; /隐藏 总公司上海分公司北京分公司常德分公司 js树的例子见：js_静态树.htmlw3c DOM 关于节点的操作 引用结点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节点的节点类型 1 element 2 attribute 3 text node.nodeValue node节点的文本内容属性结点elementNode.setAttribute(attributeName,attributeValue) 设置节点属性elementNode.getAttribute(arributeName) 获取节点属性例子： 这是文本 function changeText() var node=document.getElementById(div1); alert(节点名称:+node.childNodes0.nodeName); alert(节点类型:+node.childNodes0.nodeType); alert(节点的文本内容:+node.childNodes1.childNodes0.nodeValue); node.childNodes1.childNodes0.nodeValue=这是改变后的文本; node.childNodes1.setAttribute(color,red);/设置节点属性 节点的创建和删除创建元素节点document.createElement(div);创建文本节点document.creatTextNode(hello);添加子节点父节点.appendChild(span);插入所有子节点之后返回新节点引用插入子节点 父节点.insertBefore(新节点,当前节点)返回新节点引用 删除子节点父节点.removeChild(childNode)例子： function createDOM() var mydiv=document.getElementById(div3); var _img=document.createElement(img); _img.setAttribute(src,images/fish.gif); mydiv.appendChild(_img); var _span=document.createElement(span); var _hr=document.createElement(); var _text=document.createTextNode(hello world); _span.appendChild(_hr); _span.appendChild(_text); insertAt(mydiv,_span,1); function insertAt(currentNode,newNode,index) /如果父结点无子结点则直接添加 if(!currentNode.hasChildNodes() currentNode.appendChild(newNode); else /否则在指定索引的子节点前添加一个节点 currentNode.insertBefore(newNode,currentNode.childNodesindex); DOM操作表格表格的其他标签：表头 只一个 表体 可以有多个 用户名地址电话 宇春妹妹后街111111 芙蓉姐姐后街111111 引用单元格 mytable.rows /返回行的集合 mytable.rows(i).cells(j) /返回指定行和列的单元格 mytable.rows(i).cells(j).childNodes0.value /返回指定行和列的单元格文本创建表格var mytable=document.createElement(table)删除行mytable.deleteRow(i);添加行mytable.insertRow(i)添加单元格mytableRow.insertCe