河南中医药大学：《Web前端开发》课程理论教学课件（2017）06.文档对象模型

文档对象模型 管理科学与工程学科 耿方方

文档对象模型 管理科学与工程学科 耿方方

主要内容 Document对象 DOM概述 访问HTM网页 修改HTM网页

主要内容  Document对象  DOM概述  访问HTML网页  修改HTML网页

Document对象 Documen对象的属性 alinkColor 链接文字被单击时的颜色,对应于标记中的 bgcolor属性 cookie 表示 cookie的值 文档的文本颜色(不包含超链接的文字)对应于body>标记中的text属性值 forms 存储窗体对象的一个数组(该属性本身也是一个对象) filecreatedDate 创建文档的日期 file modifiedDate 文档最后修改的日期 当前文件的大小 文档最后修改的时间 images 存储图像对象的一个数组(该属性本身也是一个对象) link Color 未被访问的链接文字的颜色,对应于标记的vmk属性 当前文档标题对象 当前文档主体对象 ready State 获取某个对象的当前状态 URL 获取或设置URL

Document对象  Document对象的属性

Document对象 Document对象的方法 法 说明 close 关闭文档的输出流 打开一个文档输出流并接收wite和 writeln方法的创建页 面内容 write 向文档中写入HTML或 Javascript语句 writeln 向文档中写入HTML或 JavaScript语句,并以换行符结束 createElement创建一个HTML标记 getElement Byld获取指定d的HTML标记

Document对象  Document对象的方法

Document对象 Document对象的应用 链接的颜色 1、 alinkColor属性 该属性用来获取或设置当链接被单击时显示的颜色。 document. alinkColor=setcolor ■2、1 inkColor属性 该属性用来获取或设置页面中未单击的链接的颜色。 3、 vlinkColorl属性 该属性用来获取或设置页面中单击过的链接的颜色

Document对象  Document对象的应用  链接的颜色  1、alinkColor属性 该属性用来获取或设置当链接被单击时显示的颜色。 document.alinkColor=setColor  2、linkColor属性 该属性用来获取或设置页面中未单击的链接的颜色。  3、vlinkColor属性 该属性用来获取或设置页面中单击过的链接的颜色

Document对象 Document对象的应用 文档背景色和前景色 1、 bgColor属性 该属性用来获取或设置页面的背景颜色。 document bgColor=set Color ■2、 bgColor属性 该属性用来获取或设置页面的前景颜色,即页面中文字的颜色

Document对象  Document对象的应用  文档背景色和前景色  1、bgColor属性 该属性用来获取或设置页面的背景颜色。 document.bgColor=setColor  2、fgColor属性 该属性用来获取或设置页面的前景颜色，即页面中文字的颜色

Documen对象 Document对象的应用 6-01-01: var Arraycolor-new Array var n=0 function changecolorso i n++; if (n=(Arraycolor. length))n=0 document bgColor = Arraycolor [n document. fgColor=Arraycolor [n+1] setTimeout( changecolorso", 1000) changecolors 0 script〉

Document对象  Document对象的应用  6-01-01：  背景自动变色   var Arraycolor=new Array("#00FF66","#FFFF99","#99CCFF","#FFCCFF","#FFCC99","#00FFFF");  var n=0;  function changecolors(){  n++;  if (n==(Arraycolor.length)) n=0;  document.bgColor = Arraycolor[n];  document.fgColor=Arraycolor[n+1];  setTimeout("changecolors()",1000);  }  changecolors();  

Document对象 查看文档创建时间、修改时间、文档大小以及获取URL 1、 fileCreateDate属性 该属性用来获取文档的创建日期。 2、 fileModifiedDate属性 用来获取文档最后修改日期。 3、 lastModified属性 用来获取文档最后修改的日期。 4、 filesize属性 用来获取文档的大小。 ■5、URL属性 document URL

Document对象  查看文档创建时间、修改时间、文档大小以及获取URL  1、fileCreateDate属性  该属性用来获取文档的创建日期。  2、fileModifiedDate属性  用来获取文档最后修改日期。  3、lastModified属性  用来获取文档最后修改的日期。  4、fileSize属性  用来获取文档的大小。  5、URL属性  document.URL

Document对象 实例01-02:") dw document. write( ") dw. document. write("这是一个新窗口br>"); dw. document. write("这里有新的内容!"); dwdocument. write(") dw document. close o: 1 < input type=" button"vaue="打开一个新文档" onclick=" openWin0;

Document对象  实例01-02：  function openWin(){  var dw;  dw=window.open("","","width=200,height=200");  dw.document.open();  dw.document.write("一个新的窗口");  dw.document.write("");  dw.document.write("");  dw.document.write("这是一个新窗口");  dw.document.write("这里有新的内容！");  dw.document.write("");  dw.document.close();}   

DOM概述 DOM定义 文档对象模型简称DOM,DOM是一种HTML/ⅪHTM页面的编程接口 (API)。借助D0M模型,可以将结构化文档转换成DOM树。实际上,它 是把我们的标记方式转换为 JavaScrip可以理解的格式。简单的说就 是DOM就像页面上的所有元素的一个地图。使用它通过名字和元素来找 到元素,然后添加、修改或删除元素及其内容。 通过DOM技术不仅可以操作HTM页面的内容,包括添加元素、修改 元素属性、删除元素等,而且还能操作HM页面的风格样式

DOM概述 DOM定义  文档对象模型简称DOM，DOM是一种HTML/XHTML页面的编程接口 （API）。借助DOM模型，可以将结构化文档转换成DOM树。实际上，它 是把我们的标记方式转换为JavaScript可以理解的格式。简单的说就 是DOM就像页面上的所有元素的一个地图。使用它通过名字和元素来找 到元素，然后添加、修改或删除元素及其内容。  通过DOM技术不仅可以操作HTML页面的内容，包括添加元素、修改 元素属性、删除元素等，而且还能操作HTML页面的风格样式