知识-ument编程和body对象_第1页
知识-ument编程和body对象_第2页
知识-ument编程和body对象_第3页
知识-ument编程和body对象_第4页
知识-ument编程和body对象_第5页
已阅读5页，还剩17页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

Document和body对象1、document对象2、body对象3、document文档编程document对象Document对象包括当前浏览器窗口或框架内区域中的所有内容，包含文本域、按钮、单选框、复选框、下拉框、图片、链接等html页面可访问元素，但不包含浏览器的菜单栏、工具栏和状态栏。Document对象在一个window对象中并不止一个，在页面上有多少个框架，就会有多少个document，每一个被嵌进来的页面都是一个单独的document对象。Document对象的一些常用属性和方法属性说明all表示文档中所有<html>标记的集合(只适用与IE)alinkColor设置一个被激活链接的颜色anchors获取文档中<anchor>标记的集合(数组)bgColor设置背景颜色fgColor设置文档的前景色(文本)cookie获取与文档相关的Cookiedomain用于指定文档的安全域embeds代表文档中所有<embed>标记的数组forms代表文档中所有<form>标记的数组Images代表文档中所有<image>标记的数组body获取网页的主体(body)对象属性说明lastModified代表文档的最后修改时间linkColor设置未访问过的链接的颜色Links0代表文档中所有<a>标记的数组title获得文档的标题URL返回文档对应的URLvinkColor设置以访问过链接的颜色方法说明focus()让指定的文档获得焦点write()向文档中写入文本writeln()向文档中写入文本，并向文档的末尾追加一个换行符使用document对象访问页面中的元素<html><body><formname="form1"></form><formname="form2"></form><formname="form3"></form><inputtype="button"onclick="allformname()"value="查看所有form表单的名字"></body></html><script>varmsg="";functionallformname(){varMyForms=document.forms;for(i=0;i<MyForms.length;i++){msg+="forms["+i+"].name:"+MyForms[i].name+"\n";}alert(msg)}</script>源代码见教材代码javascript部分的代码3-7-3综合示例运行效果如右图：body元素body对象是文档对象的主体部分，包含了大多数被展现给用户的信息。在javascript中，我们可以通过document.body来获得某个文档的body对象。body元素对象的一些常用属性和方法：属性说明属性名简要说明aLinkColor表示文档中文本链接被单击后的颜色background表示文档的背景图片bgColor表示文档的背景色bgProperties标识文档滚动时页面背景图片是固定还是随文档移动，可选值scroll（表示滚动）和fixed（表示固定）bottomMargin保存文档内容与浏览器窗口或框架底部的距离leftMargin保存文档内容与浏览器窗口或框架左边的距离属性说明linkColor表示文档中未访问文本链接的颜色rightMargin保存文档内容与浏览器窗口或框架右边的距离fgColor表示文档中文本的颜色topMargin保存文档内容与浏览器窗口或框架顶部的距离vLinkColor表示文档中已访问文本链接的颜色noWrap标识是否将文档中文本限制在窗口或框架的宽度内，参数为布尔值“true”或“false”Scroll标识是否隐藏文档的滚动条，参数为布尔型字符串yes”或“no”scrollLeft返回页面左边与水平滚动条左端之间的距离scrollTop返回页面顶部与垂直滚动条顶部之间的距离方法说明doScroll(ScrollAction)模拟滚动条上的用户动作，以ScrollAction标识用户的动作，如PageDown、Left、PageUp等Document介绍DOM是DocumentObjectModel文档对象模型的缩写。根据W3CDOM规范（），DOM是一种与浏览器，平台，语言无关的接口，使得你可以访问页面其他的标准组件。简单理解，DOM解决了Netscape的Javascript和Microsoft的Jscript之间的冲突，给予web设计师和开发者一个标准的方法，让他们来访问他们站点中的数据、脚本和表现层对像。

DOM是以层次结构组织的节点或信息片断的集合。这个层次结构允许开发人员在树中导航寻找特定信息。分析该结构通常需要加载整个文档和构造层次结构，然后才能做任何工作。由于它是基于信息层次的，因而DOM被认为是基于树或基于对象的。Document编程Document：文档对象模型。使用document

对象可以对html文档进行检查、修改或添加内容，并处理该文档内部的事件。在Web页面上，window对象是所有其他对象的父对象,document是作为window对象的一个属性存在的document

对象可通过window

对象的document

属性引用，或者直接引用。<html> <head> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <title>文档结构</title> </head> <body> <div> <form> <inputname=""type="text"/> <select> <optionvalue="1">男</option> <optionvalue="2">女</option> </select> </form> </div> <div>Gamegame</div> </body></html>一个简单的文档对象的结构模型由上面的HTML文档结构可知，文档中各个元素（标记元素、文本元素等）在HTML元素层次结构图中都被标记为具有一定层次关系的成员，并可通过这种关系来访问指定的成员，为了能根据这种关系访问各个结构成员,于是制定出了这种结构的标准:DOM文档结构模型，DOM模型的产生Document编程起步我们通常会使用document对象来操控页面里面的元素，并达到我们所期望的效果。想要操作页面的元素，首先我们必须知道如何获取页面元素的对象。我们可以通过下面的这几种方式获得页面元素的引用：1、使用document对象的all属性语法：document.all.(元素的名字或者元素的id)注意，使用这个的时候document.all会返回所有元素的集合形式，如果页面中存在相同的标记(id值或者name值)，那么具有相同标记的元素将会被当做一个数组返回。所以在需要使用id或者name的值标记的时候，最好不要使用相同的标记名，以免造成不必要的困扰。2、使用方法getElementById()语法：document.getElementById(元素的名字或者元素的id);这个是documentimian的一个方法，这个方法需要浏览器的支持，指得庆幸的是，现在大多数的浏览器都会提供对document的支持。注意：在使用这个方法的时候，如果页面中存在相同名字的元素，那么他所定位到的永远是第一个。3、使用方法getElementsByTagName()语法：document.getElementByTagName(标记名)，这里的标记名其实是标签的名字，这个方法返回的是某个标签的数组。4、使用方法getElementsByName()语法：document.getElementsByName(元素的名字)。这个方法和document.all的方法是一样的，都是通过寻找元素的名字，返回一个具有相同元素名字的数组。5、间接获得元素的对象我们还可以通过节点的一些方法获得与这个节点相关的节点的对象。这个将在后面的具体操作节点的时候做详细的介绍。定位了元素对象之后，我们就能够使用javascript修改元素的属性或者状态，从而达到控制页面元素动态变化的目的。元素的创建：首先，我们需要创建一个标记：使用方法：createElement(tagname)语法：document.createElement(tagname)tagname是标记的名字，比如<div>,这个方法会返回一个指向我们所创建的这个元素的一个对象，我们通常需要通过这个对象对我们所创建出来的元素设置一些相关的属性。元素属性的设置：使用方法：setAttribute()语法：元素对象.setAttribute(属性名和属性值的键值对)；把指定的属性设置为指定的字符串值，如果该属性不存在则添加一个新属性，注意我们在设置的时候需要注意，如果对象是浏览器的元素对象，也就是说这个对象可以被浏览器识别，那么如果你需要你所设置的属性页能被浏览器正确展现出来的话，那么所设置的元素属性必须是这个对象所具有的属性。如果对已经存在的属性再次进行设置，则会覆盖掉前面的属性值。属性的删除和元素的删除：属性的删除：使用方法：removeAttribute()语法：元素对象.removeAttribute(“属性名字”)从元素中删除指定的属性元素的删除：使用方法：

removeChild()语法：父元素对象.

removeChild(子元素对象)删除指定的子元素

Document操作节点Document文档对象模型是一个树形结构，我们将其中的所有可操作的元素看做单个的节点，html就是一个节点，而且是整个document树形结构的根节点。我们先来看一下节点的结构：htmlheadbodytextbutton根节点子节点兄弟节点节点的访问实际上，节点就是document对象模型中的元素，所以获得节点的方法和获得document对象模型中的元素的方法是一致的。我们能够通过节点对象中的一些属性和方法来操作所有的节点元素。下面是常用来访问节点的属性和方法：parentNode：节点的父节点，没有父节点时为nullchildNodes：节点的所有子节点的NodeListfirstChild：节点的第一个子节点，没有则为nulllastChild：节点的最后一个子节点，没有则为nullpreviousSibling：节点的上一个节点，没有则为nullnextChild：节点的下一个节点，没有则为nullinsertBefore(newChild,refChild)在现有节点refChild之前插入节点newChildreplaceChild(newChild,oldChild)将子节点清单中的子节点oldChild换成newChild，并返回oldChild节点removeChild(oldChild)将子节点清单中的子节点oldChild删除，并返回oldChild节点appendChild(newChild)将节点newChild添加到该节点的子节点的清单末尾。如果newChild已经在树中，则先将其删除hasChildNodes()返回一个布尔值，表示节点是否有子节点cloneNode(deep)返回这个节点的复件

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论