…) 2、value: 少量的表单控件的显示内容有该属性控制。 (、 3、className: 修改XHTML元素的CSS样式,该属性的合法值是一个class选择器名 4、style: 修改XHTML元素的内联样式 5、options[index]: 直接对 示例代码: () 3.5、新增XHTML元素 JavaScript脚本可以为DOM动态新增节点,程序为DOM树新增节点时,页面会动态地新增XHTML元素,当需要为页面新增XHTML元素时,可按照如下两个步骤操作: 1、创建或复制节点 2、直接添加新节点 3.5.1、创建或复制节点 创建节点通常借助与document对象的createElement方法,语法如下: document.createElement(Tag): 创建Tag标签对应的节点。 示例代码: () 3.5.2、添加节点 当一个节点创建成功后,将节点添加到DOM中才行,对于普通的节点,可采用Node对象的如下方法添加节点: NO 方法 1 appendChild(NodenewNode) 2 insertBefore(NodenewNode,NoderefNode) 3 replaceChild(NodenewNode,NodeoldChild) 示例代码: () 3.5.3、为列表框,下拉菜单增加选项 为列表框,下拉菜单添加子节点,有如下两个方法: 1、调用HTMLSelectElement的add()方法添加选项 2、直接为 HTMLSelectElement中添加新选项方法如下: NO 方法 说明 1 add(HTMLOptionElementoption,HTMLOptionElementbefore) 示例代码: () IE6中不允许使用add()方法时指定最后一个参数为null,还可直接创建Option的方式创建下拉选项。 可使用如下构造器: NO 构造器 1 NewOption(text,value,defaultSelected,selected) 该构造器中4个参数说明如下: |-text: 该选项的文本,即该选项所呈现的内容 |-value: 选中该选项的值 |-defaultSelected: 设置默认是否选中该选项 |-selected: 设置该选项当前是否被选中 示例代码: () 3.5.4、动态添加表格内容 HTMLTableElement对象有如下方法添加元素: NO 方法 说明 1 insertRow(index) 2 createCaption() 3 createTFoot() 4 createTHead() 5 HTMLTableRowElement对象代表表格的行,该对象包含如下方法添加单元格: NO 方法 说明 1 insertCell(longindex) 示例代码: () 3.6、删除XHTML元素 删除XHTML元素也是通过节点来完成的,对于普通的XHTML元素,可用通用的方法来删除节点,而列表框,下拉菜单,表格,则有额外的方法来删除XHTML元素。 3.6.1、删除节点 删除节点通常借助于父节点,Node对象提供了如下方法来删除节点: NO 方法 1 removeChild(oldNode) 从父节点中删除该子节点后,该子节点代表的内容也消失 示例代码: () 3.6.2、删除列表框,下拉菜单的选项 删除列表框,下拉菜单的选项有两种方法: |-利用HTMLSelectElement对象的remove()方法来产出选项 |-直接将指定选项赋值为null即可 示例代码: () 3.6.3、删除表格的行或单元格 删除表格的指定表格行使用HTMLTableElement对象的如下方法: NO 方法 1 deleteRow(longindex) 删除表格行的指定单元格使用HTMLRowElement对象的如下方法: NO 方法 1 deleteCell(longindex) 示例代码: () 3.7、传统的DHTML模型 DOM出现之前,javaScript使用的是传统的DHTML模型来访问,动态更新XHTM页面.,在DHTML模型里,各元素之间有严格的包含关系,js通过他们的id和name属性来访问他们。 使用DHTML对象模型来访问和更新XHTML页面时,需查阅相关技术手册,因为XHTML元素很多,每个XHTML元素都有很多独特的属性,方法和事件 DHTML对象模型不包含Tree结构,因此不具备对象相互导航功能。 理论上DOM模型和DHTML模型存在差异,但实际应用中我们不会区分那种方式属于DOM模型,那种方式属于DHTML,考虑最多的是如何跨浏览器,如何保持高性能。 DHTML虽然没有提供一种完备的树形结构,却也提供了一种简单的方法来访问页面中的各个子元素。 这种访问主要通过DHTML的包含关系来实现,如下图: DHTML是DynamicHTML(动态HTML)的缩写,是HTML、CSS、Javascript这三种技术的结合。 DOM是DocumentObjectModel(文档对象模型)的缩写,是一种应用编程接口。 DHTML出现得较早。 DOM是在DHTML之后出现的,DHTML没有统一的标准,各浏览器有各自的DHTML。 DOM已经得到W3C的承认,并有新的标准,DOM版本越往后,各浏览器对DOM的支持越相近。 也即DOM比DHTML更规范。 DHTML只适用于Web文档。 DOM则涵盖了使用任何一种支持DOMAPI的程序设计语言去处理任何一种标记文档的所有情况,比如: ASP处理XML文档,JavaScript处理Web文档。 也即DOM比DHTML功能强大。 所以,从现在开始,逐渐放弃DHTML,投身到DOM中来。 示例代码: () 3.8、使用window对象 window对象是整个javascript脚本运行的顶层对象,定义全局变量是作为window对象的一个属性存在,定义一个普通的函数时,是作为windows对象的方法存在。 Window提供例如如下常用方法,这些方法可直接在JavaScript脚本中直接使用: NO 方法 1 alert() 2 confirm() 3 prompt() 4 close() 5 focus() 6 blur() 7 moveby() 8 moveTo() 9 open() 10 print 11 risizeBy()/resizeTo() 12 setInterval()/clearInterval() Window提供了如下常用属性: NO 属性 1 closed 2 defaultStatus、status 3 document 4 Frames[] 5 history 6 Location 7 Name 8 Navigator 9 Parent 10 Screen 11 Self 12 Top 示例代码: () 3.8.1、访问历史 Window的histroy属性是一个History对象,该对象表示当前窗口的浏览历史,支持如下几个方法: NO 方法 1 back() 2 forward 3 go(intvalue) 示例代码: 3.8.2、浏览器对象 Window对象有个navigator属性,该属性对应于Navigator对象,该对象代表浏览该页面使用的浏览器,该对象在不同平台上的信息并不完全相同。 常用属性如下: NO 属性 1 appName 2 appValue 3 Platform 示例代码: () 3.8.3、访问页面URL Window对象还包含了location属性,该属性可以用于访问该窗口或Frame所装载文档的地址。 Location对象包含了如下常用属性: NO 属性 1 hostname 2 href 3 host 4 Port 5 pathname 6 Protocol 示例代码: 3.8.4、客户机屏幕信息 Window对象中的Screen属性,它返回的是当前浏览器的屏幕对象,可用于获取用户屏幕当前的大小,色深,分辨率等参数。 常见属性如下: NO 属性 1 Width 2 Hight 3 colorDepth 示例代码: 3.8.5、弹出新窗口 Window的open()方法用于打开一个新窗口,如果结合screen对象的属性,可将打开的窗口放大到满屏效果。 示例代码: () 3.8.6、确认框和输入对话框 Window对象提供了还提供了如下两种对话框: |-confirm: 用于取得用于确认(confirm)的确认框 |-prompt: 用于获得用户输入(propmt)的输入对话框 示例代码: () 3.8.7、使用定时器 Window提供了如下4个方法来支持定时器: NO 方法 1 setInterval() 2 clearInterval() 3 setTimeout() 4 Cleartimeout() 示例代码: () 3.9、使用document对象 Document对象即是HTMLDocument类的一个实例,也是DHTML模型中的一个对象,因此,javascript的document对象即可作为HTMLDocument使用,也可以作为DHTML的document使用。 该对象除了可使用标准DOM模型的方法,还可使用如下常用方法: NO 方法 1 Close() 2 Open() 3 Write() 4 Writeln() 常用属性如下: NO 属性 1 alinkColor、linkColor、vlinkColor、bgColor、fgColor 2 All 3 Anchors 4 Cookie 5 documentElement 6 Forms 7 Frames 8 Images 9 lastModified 10 Links 11 Location 12 Referrer 13 Scripts 14 styleSheets 15 Title 16 URL 3.9.1、动态页面 借助于document对象的Open和write方法,可以动态生成一个页面。 示例代码: () 3.9.2、读写Cookie Cookie是一些name=value对数据,这些数据可由浏览器写入客户机硬盘,也可由浏览器从客户机硬盘读取。 Cookie通常用于持久记录客户的某些信息,比如客户的用户名及客户的喜好等。 通常而言,读写Cookie都是由服务器程序控制,但实际读写Cookie的依然是浏览器,而javaScript一样可以控制浏览器读写Cookie。 使用JavaScript控制浏览器写Cookie,直接给document.cookie属性赋值即可,这个属必须为如下格式: =,除此之外,添加cookie时还可以指定如下几个属性: NO 属性 说明 1 max-age 指定该cookie存活的最长有效期 2 expires 指定cookie的过期时间 3 path 指定该cookie的路径 4 domain 指定该cookie属于哪个域 5 secure 指定该cookie的安全属性 示例代码: () 4总结 5预习任务 6作业
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
-
dommodel
冰豆网所有资源均是用户自行上传分享,仅供网友学习交流,未经上传用户书面授权,请勿作他用。
|