Document对象内容集合

document 文挡对象 - JavaScript脚本语言描述

———————————————————————

注:页面上元素name属性和JavaScript引用的名称必须一致包括大小写 否则会提示你一个错误信息 “引用的元素为空或者不是对象\\\\\” ———————————————————————

对象属性

document.title //设置文档标题等价于HTML的title标签

document.bgColor //设置页面背景色

document.fgColor //设置前景色(文本颜色)

document.linkColor //未点击过的链接颜色

document.alinkColor //激活链接(焦点在此链接上)的颜色

document.vlinkColor //已点击过的链接颜色

document.URL //设置URL属性从而在同一窗口打开另一网页 document.fileCreatedDate //文件建立日期，只读属性

document.fileModifiedDate //文件修改日期，只读属性

document.fileSize //文件大小，只读属性

document.cookie //设置和读出cookie

document.charset //设置字符集 简体中文:gb2312

———————————————————————

常用对象方法

document.write() //动态向页面写入内容

document.createElement(Tag) //创建一个html标签对象

document.getElementById(ID) //获得指定ID值的对象

document.getElementsByName(Name) //获得指定Name值的对象 document.body.appendChild(oTag)

———————————————————————

body-主体子对象

document.body //指定文档主体的开始和结束等价于body>/body> document.body.bgColor //设置或获取对象后面的背景颜色

document.body.link //未点击过的链接颜色

document.body.alink //激活链接(焦点在此链接上)的颜色

document.body.vlink //已点击过的链接颜色

document.body.text //文本色

document.body.innerText //设置body>…/body>之间的文本

document.body.innerHTML //设置body>…/body>之间的HTML代码 document.body.topMargin //页面上边距

document.body.leftMargin //页面左边距

document.body.rightMargin //页面右边距

document.body.bottomMargin //页面下边距

document.body.background //背景图片

document.body.appendChild(oTag) //动态生成一个HTML对象

常用对象事件

document.body.onclick=”func()” //鼠标指针单击对象是触发

document.body.onmouseover=”func()” //鼠标指针移到对象时触发 document.body.onmouseout=”func()” //鼠标指针移出对象时触发 ———————————————————————

location-位置子对象

document.location.hash // #号后的部分

document.location.host // 域名+端口号

document.location.hostname // 域名

document.location.href // 完整URL

document.location.pathname // 目录部分

document.location.port // 端口号

document.location.protocol // 网络协议(http:)

document.location.search // ?号后的部分

documeny.location.reload() //刷新网页

document.location.reload(URL) //打开新的网页

document.location.assign(URL) //打开新的网页

document.location.replace(URL) //打开新的网页

———————————————————————

selection-选区子对象

document.selection

———————————————————————

images集合(页面中的图象)

a)通过集合引用

document.images //对应页面上的img标签

document.images.length //对应页面上img标签的个数

document.images[0] //第1个img标签

document.images[i] //第i-1个img标签

b)通过nane属性直接引用

img name=”oImage”

document.images.oImage //document.images.name属性 c)引用图片的src属性

document.images.oImage.src //document.images.name属性.src d)创建一个图象

var oImage

oImage = new Image()

document.images.oImage.src=”1.jpg”

同时在页面上建立一个img /标签与之对应就可以显示

———————————————————————-

forms集合(页面中的表单)

a)通过集合引用

document.forms //对应页面上的form标签

document.forms.length //对应页面上/formform标签的个数

document.forms[0] //第1个/formform标签

document.forms[i] //第i-1个/formform标签

document.forms[i].length //第i-1个/formform中的控件数

document.forms[i].elements[j] //第i-1个/formform中第j-1个控件 b)通过标签name属性直接引用

/formform name=”Myform”>input name=”myctrl”/>/form document.Myform.myctrl //document.表单名.控件名

c)访问表单的属性

document.forms[i].name //对应form name>属性

document.forms[i].action //对应/formform action>属性

document.forms[i].encoding //对应/formform enctype>属性 document.forms[i].target //对应/formform target>属性

document.forms[i].appendChild(oTag) //动态插入一个控件 document.all.oDiv //引用图层oDiv

document.all.oDiv.style.display=” //图层设置为可视

document.all.oDiv.style.display=”none” //图层设置为隐藏

document.getElementId(”oDiv”) //通过getElementId引用对象 document.getElementId(”oDiv”).style=”

document.getElementId(”oDiv”).display=”none”

/*document.all表示document中所有对象的集合

只有ie支持此属性，因此也用来判断浏览器的种类*/

图层对象的4个属性

document.getElementById(”ID”).innerText //动态输出文本 document.getElementById(”ID”).innerHTML //动态输出HTML document.getElementById(”ID”).outerText //同innerText document.getElementById(”ID”).outerHTML //同innerHTML

第二篇：JavaScript学习总结

1、 JavaScript变量可以使用var事先进行声明，也可以用赋值语句隐藏声明。对于一个变量，它存在指的是它拥有值。检查一个变量是否有值的方法是使用Window对象，因为JavaScript声明或使用的变量都属于Window对象的属性。

2、 JavaScript函数使用function命令声明，如果函数有返回值，在调用时就可以使用指定语句获取返回值。当调用函数传入参数时，函数即使没有指明参数名称，也一样可以使用参数数组的对象arguments获取参数的个数和参数值。

3、 局部变量：在函数内声明，只能在函数内的程序使用；全局变量：在函数外声明，整个JavaScript程序的函数和程序代码都可以使用。

4、 自定义JavaScript的对象：直接建立Object对象副本后，可新增所需的属性和方法；建立对象的构造函数，定义属性和方法，使用new命令建立对象副本时，构造函数传入的参数是对象的属性值，如果在建立副本时未指定属性值，一样可以在建立副本后再设置对象的属性值。

5、 JavaScript的内置对象：Array、Date、Function、Math、String···

6、 DHTML对象模型：是将浏览器和HTML文件的标签都对象化，以便JavaScript程序代码可以轻易地操控浏览器和访问HTML标签的对象。

版本3.x BOM、版本4.x DHTML=BOM+DHTML DOM、版本5.x BOM+W3C DOM

7、 DOM对象模型是一种拥有扩展性的文件架构

DOM Level 0 - DHTML DOM、DOM Level 1 – W3C DOM

DHTML DOM 和 W3C DOM 的差异在于DHTML DOM只是将整份HTML文件都对象化，每一个HTML标签都对应有标签对象；W3C DOM属于一种通用的文件浏览和访问机制，可以将整份HTML或XML文件视为一种阶层架构的树状结构。

8、 DHTML对象模型的完整架构是由BOM的根对象Window开始。

9、 Window对象：浏览器的窗口对象

浏览器的状态栏：属性defaultStatus、status

定时器：方法setTimeout(express,time) clearTimeout()

只会运行一次，在经过设置的一段时间后，运行指定的函数或表达式

方法setInterval(express,time) clearInteval()

一旦启动就可以周期性地运行函数或表达式

窗口的打开与关闭：open(url,winName)方法可以打开一个全新的窗口，并且使用JavaScript程序代码获取新窗口的Window对象；在父窗口使用winID访问新窗口的属性和方法，Window对象的opener属性可以参考到父窗口的Window对象。

Close()方法可以关闭一个窗口。

10、Window对象内置对话框：

alert(message) 显示一个警告信息的窗口，参数就是显示的信息内容。

confirm(message) 一个确认的对话框，参数为信息内容，传回true表示单击”确认”按钮，false为”取消”按钮。

Prompt(msg,value) 显示输入文字内容的对话框，参数msg为信息内容，value为默认值，传回用户输入的字符串。

showModelessDialog(url,arguments,features) 显示一个新的窗口，参数url为显示的网页。arguments为传送到显示网页的参数，可以是任何数据，例如对象；在显示的网页中可以使用window对象的dialogArguments属性获取传递过来的参数。feature参数可以设置对话框的外观。

11、更改窗口的尺寸和位置：

Window对象的属性：screenLeft传回左边界的坐标 screenTop传回上边界的坐标

Window对象的方法：moveTo(x,y) 将浏览器移到坐标x和y的位置

moveBy(offsetx,offsety) 将浏览器目前的位置移动参数的位移量

resizeTo(width,height) 将浏览器窗口调整为参数width和height的尺寸

resizeBy(offsetx,offsety) 将浏览器窗口尺寸放大或缩小

12、窗口内容的卷动

Window对象的方法：scroll(x,y)、scrollTo(x,y) 滚动窗口内容到指定的位置

scrollBy(offsetx,offsety) 从目前窗口内容的位置，滚动参数的位移量

13、Navigator对象：获取浏览器和系统资源的信息

14、History对象：保存历史记录

15、Location对象：保存目前URL网址的详细数据

属性：href 返回完整的URL字符串，重设该属性可以转向链接到其他的网址

方法：reload() 重新加载现在打开的HTML文件，如同浏览器工具栏中的“刷新”按钮

replace(url) 转向到参数url的网址，如同设置href属性

16、Document对象：

打开与写入文件：方法open(“text/html”,”replace”)可以清除目前的文件内容，第一个参数是MIME类型，text/html就是html文件，第二个参数replace可以取代历史记录，浏览器就无法按工具栏的“上一页”按钮返回上一页。

方法 write()或writeln()输出HTML文件的内容

方法 close()显示输出的内容

获取文件的指定元素：getElementById()

17、JavaScript的Cookies处理：Cookies可以在客户端的计算机保存所需的数据，可以使用Document对象的cookie属性处理Cookie的访问，返回的字符串使用“；”分隔每一个Cookie

新增Cookie函数：saveCookie(name,value,expires)

获取Cookie值函数：getCookie(name)

检查Cookie是否存在的函数：checkCookieExit()

删除Cookie函数：deleteCookie(name)

18、DHTML DOM的Collection对象：

document.all对象集合可以获取HTML文件中所有的标签对象，这是一个数组对象，依照标签在HTML文件出现的顺序，可以使用索引值访问指定的标签对象,如document.all[i]。也可以直接使用id属性获取，如document.all(“myId”)或myId。

如果HTML文件拥有同名的id属性，获取的仍然是一个集合，还需要使用item()方法获取指定的标签对象。

同理，myBody.all对象集合可以获取id为myBody的body区域块中的所有标签对象。

在all对象集合的所有标签对象中，可以进一步使用tags()方法筛选出指定标签的对象集合，如document.all.tags(“p”)，可使用length属性获取共有多少个＜p＞标签。

19、HTML文件的阶层架构：

HTML文件中的标签属于一种阶层架构，可以使用parentElement属性获取上一层的标签对象，用children对象集合获取下一层标签的对象集合，这个对象集合可以进一步使用item()方法获取指定的标签对象。

20、访问HTML标签的内容：

innerText() 访问标签对象的内容

innerHTML() 访问标签对象内的子标签和内容，不包含标签对象本身

outerText() 访问标签对象的内容，可以用来取代整个标签对象

outerHTML() 访问标签对象的子标签和内容，包括标签对象本身

21、访问HTML标签的属性：

在获取HTML标签的对象后，也可以访问标签对象的属性

22、CSS层级式样式表：

HTML标签都拥有默认的显示样式，CSS能够重新定义HTML标签的显示效果，也可以自定义新的样式名称。

如果是class属性，则定义的样式名称以”.”句点开始，可以定义多个值，并且可以应用到多个标签上

如果是id属性，则定义的样式名称以”#”开始，可以定义多个值，但只能应用到一个标签上

23、动态样式CSS：

CSS样式属性可以对应Style对象的属性，在获取HTML标签对象后，可以访问Style对象的属性，如：objEle.style.color

24、DHTML的事件：

事件就是在浏览器显示和阅读HTML文件时，鼠标、键盘或文件加载等操作所触发的一些动作

鼠标事件：onclick 单击鼠标左键 ondbclick 双击鼠标左键 onmousemove 移动鼠标

onmouseout 鼠标指针离开HTML标签

onmouseover鼠标指针进入HTML标签

onmousedown 按下鼠标键onmouseup 放开鼠标键

键盘事件：onkeydown 当按下键盘按键 onkeyup 放开键盘按键

其他常用事件：onload 当浏览器加载HTML文件后

onunload 当用户离开浏览器，或是加载其他网页时

onfocus 用户指定对象拥有处理权

onblur 用户离开拥有处理权的对象

onchange 用户更改对象的内容

onsubmit 用户发送窗体字段

onreset 用户重设窗体字段

onselect 用户选择了网页内容

25、JavaScript的事件处理：

方式一：在HTML标签的属性中设置JavaScript的事件处理函数

如：＜input type=”button” value=”按钮” onclick=”showAlert();” /＞

方式二：在对象的属性中设置JavaScript的事件处理

如：document.myForm.myButton.onclick = showAlert;

如果事件是由Window或Document等上层对象所触发，此时只需设置对象的事件属性，就可以指定事件的处理函数

取消事件的处理：可以取消用户新增的事件处理函数，也可以取消浏览器默认的事件处理函数。

当事件触发后，浏览器默认的事件处理函数就会进行事件的处理，拥有默认处理函数的

常见事件有：元素＜a＞ 事件onclick 单击可以显示其他URL网址的HTML文件

元素＜form＞ 事件onsubmit 发送窗体字段的内容

元素document 事件oncontextmenu 单击鼠标右键可以显示一个快捷菜单

方式一：将事件属性设为null

如：document.myForm.myButton.onclick = null;

方式二：使用自定义的事件处理函数，函数传回false时就可取消事件

如：return false;

方式三：将event对象的returnValue属性设置为false

如：event. returnValue = false;

26、Event对象：

当事件触发时就会产生一个Event对象，它的属性用来记录事件触发时的一些数据

Event对象是一个全局属性，不能把Event对象作为参数传递给事件处理函数

属性：srcElement 返回事件触发时的标签对象

returnValue 设置和取消事件的返回值

27、DHTML DOM的窗体对象的架构

使用字段名称访问窗体字段：如 document.myForm.myUserName.value

使用forms和elements对象访问字段：如 document.forms[0].elements[0].value

28、Form对象

属性：name、action、method、target

方法：submit() 发送窗体字段到服务器 reset() 重设窗体的各字段为默认值

29、Input对象

属性：name、type、value、disabled、form、readonly、maxlength

针对单选按钮和复选框的属性：checked

方法：blur()设置Input对象失去处理权 focus()设置Input对象拥有处理权

select()选择Input对象 click()触发其他字段的onclick事件

30、Select对象

属性：name、disabled、length、options、selectedIndex、size、multiple

方法：blur()设置Select对象失去处理权 focus()设置Select对象拥有处理权

add(objOption, index)新增一个＜option＞标签选项，第一个参数为Option对象，第二个参数为选项的索引位置

使用构造函数建立Option对象：var objOption = new Option(text, value)

remove(index)删除参数索引值的选项

31、Option对象

属性：value、text、selected

32、Textarea对象

属性：cols、rows

方法：blur()设置Textarea对象失去处理权 focus()设置Textarea对象拥有处理权

select()选择Textarea对象

33、JavaScript的窗体字段验证

验证属性： 文字、密码和备注 value

单选按钮和复选框 checked

下拉式菜单 selected

方法：submit() onsubmit事件

34、Table对象

属性：border、cellPadding、cellSpaing、rows

方法：insertRow(index)在表格插入一个新行，插入的位置是在参数的行号之前

deleteRow(index)在表格删除传入参数行号的表格行

35、TableRow对象

属性：cells、rowIndex

方法：insertCell(index)插入单元格，是插在传入的单元格编号之前

deleteCell(index)删除传入单元格编号参数的单元格

36、TableCell对象

属性：colSpan、rowSpan、cellIndex

37、Window对象的frames对象集合

当浏览器显示框架页时，框架页的每一个框架都是一个Window对象，使用frame[]对象集合获取各框架的Window对象，也可以直接使用框架标签的名称来获取各框架的Window对象。

Window对象的属性：self 返回目前的Window对象

parent 返回目前框架的上一层对象

top 如果是一个嵌套框架，top就是最上层的Window对象

38、FrameSet对象

属性：name、cols、rows

39、Frame对象

属性：name、src

40、Iframe对象

属性：name、src

41、Anchor对象

属性：href、target 访问显示的框架名称或窗口（默认值有_blank _self _parent）

方法：blur()设置Anchor对象失去处理权 focus()设置Anchor对象拥有处理权

42、W3C DOM浏览节点

DHTML DOM 和W3C DOM最主要的差异就是获取节点的方式

DHTML DOM需要使用id/name属性或者对象集合等不同方式才能获得标签对象

W3C DOM提供一致的走访方式，只要建立好树状结构，所有能走访到的节点就是标签对象

只读属性：firstChild、lastChild、parentNode、nextSibling、previousSibling、nodeName

读/写属性：nodeValue访问文字节点的内容

对象集合：childNodes子节点的对象集合、attributes节点属性的对象集合

43、Ajax应用程序架构

传统Web应用程序架构：浏览器向web服务器提出HTTP请求，web服务器处理后产生HTML文件，就可以传回浏览器来显示。服务器可能单纯传回请求的HTML文件，或运行服务器网页技术ASP、JSP等，动态产生或进一步从数据库取出所需数据来建立相应的HTML文件。在客户端浏览器只是单纯显示HTML网页内容，而且浏览器需要等待服务器响应后，才能显示网页内容。

Ajax应用程序架构：最大差异是在客户端新增JavaScript编写的Ajax引擎来处理HTTP请求，并获取服务器的响应数据，更新网页接口的部分内容。用户不再需要等待服务器的相应，就可以进行其他操作。

44、XML的基础

XML是可扩展的标识语言，用来描述数据，需要自行定义描述数据所需的各种标签。

XML文件的组成元素：

元素、属性、实体参考：< ＜ > ＞ & & ' ‘ " “

批注：＜!-- --＞ PCDATA：XML文件的文字内容

CDATA区块：＜![CDATA[ ]]＞ 通常用来保存程序代码数据

PI：＜?name ?＞ 允许XML文件包含传送给应用程序的命令。

DTD：XML文件的验证机制，可以检查XML标签和文件架构是否正确。

45、XHTML的基础

XHTML仍然使用HTML4.0版的标签，它是W3C制定用来取代HTML4.0版的下一代HTML。XHTML文件是良好格式的HTML，它必须遵循XML文件的编写规则：

·不可以省略结尾标签，保证所有标签都成对出现

·标签和属性都是使用小写的英文字

·属性值需要使用引号括起来

·name属性使用id属性取代

46、XML DOM

XML DOM是W3C DOM针对XML文件所提供应用程序的标准的程序接口，可以通过接口来访问各种节点对象。