1文档对象模型
1.1 概念
文档对象模型以对象形式描述HTML页面和Web浏览器的层次结构。
通过访问或设置文档对象模型中对象的属性并调用其方法,可以使程序按照一定的方式显示Web页面,并且与用户的动作进行交互。
1.3 引用文档对象模型中的对象
所有下层对象都是其上层对象的子对象。而子对象其实就是父对象的属性,所以引用子对象的方式,与引用对象的一般属性是相同
如:
window.document.write("Hello");
由于window对象是默认的最上层对象,因此引用它的子对象时,可以不使用window:
document.write("Hello");
当引用较低层次的对象时,要根据对象的包含关系,一层一层地引用对象。如:
document.form1.elementName
2 事件驱动
2.1 事件概念
1:在图形界面的环境下,用户操作鼠标或按键的动作以及系统操作如载入页面等称为事件。
2:用户操作事件或系统操作事件引起一连串程序动作的执行方式,称为事件驱动。
3:为了响应某个事件而进行的处理过程,称为事件处理。
浏览器在程序运行的大部分时间都在等待交互事件的发生,并在事件发生时,自动调用、执行事件处理程序
2.3处理事件
事件名处于标记(元素)内,如:
<INPUT type="button" value="问侯男士" name="hello1" onclick="alert('先生,您好!');">
如果触发事件时要执行的语句比较多,则可以在事件属性中写入函数调用的语句:
<INPUT type="button" value="问侯小姐" name="hello2" onclick="hellogirl()">
注:函数hellogirl(),需要在中定义
3浏览器对象
3.1 窗口(Window)对象
窗口(window)对象处于对象层次的顶端,并且它还提供了处理浏览器窗口的方法和属性。
3.1.1窗口对象常用属性和方法
打开和关闭窗口
window.open("URL","name","参数");
window.close();
例:window.open("http://www.baidu.com","_blank","height=200,width=300,top=20")
页面跳转
//由window的属性跳转
window.location="http://www.baidu.com";
//由window的方法跳转
window.navigate("http://www.baidu.com");
状态栏信息(status)
window.status="欢迎访问我的主页! ";
内置的对话框
alert(message):弹出警告对话框
confirm(message):确认对话框
prompt(msg,value):输入对话框
3.2document对象
通过document对象可以访问HTML文档包含的任何HTML元素,如各种表格、表单、图像、超链接等。
3.2.1属性:
返回和设置title标记:window.document.title
返回网页的URL字符串:window.document.URL
3.2.2方法
3.2.3补充
write方法(动态建立新页面,非IE支持不好):
var win=window.open("URL","_blank"," width=300,height=100");
win.document.write("<html><head><title>新文件</title></head>");
win.document.write("<body>这是一份新文件</body></html>");
win.document.close();
4 表单对象
4.1 form对象的属性、方法和事件
在程序中,如果创建的表单 (如myform),可通过这个表单名访问,如:document.myform。获取了form对象之后,就可以通过使用其属性、方法和事件来实现各种功能。
document.forms[索引].属性
document.forms[索引].方法(参数)
document.表单名称.属性
document.表单名称.方法(参数)
4.2属性和方法
4.3FROM处理
表单验证是指确定用户提交的表单数据是否合法,例如填写的身份证号码是否有意义、年龄和学历是否相符等问题。由于在表单正式提交到服务器之前,需要onSubmit的值为true(如果不设置事件处理函数,则该值默认为true),因此可以通过为onSubmit事件指定的处理函数来进行表单数据的验证
4.4 表单元素对象
表单可以有很多表单元素, 称之为表单元素对象。表单元素对象可以分为:
4.5 文本对象
调用格式
document.表单名称.文本对象名称.属性
document.表单名称.文本对象名称.方法(参数)
属性
readOnly:该对象的值为只读
size:该对象宽度
maxLength:该对象的允许容纳的最大长度
type:该对象的type属性
style:该对象内值的显示风格
方法
blur():该对象失去焦点
focus():该对象获得焦点
select():该对象设置为选取状态
4.7 按钮、提交按钮、重置按钮对象
调用格式
document.表单名称.按钮对象名称.属性
document.表单名称.按钮对象名称.方法(参数)
4.9 单选按钮对象
调用格式
document.表单名称.单选对象名称[索引].属性
document.表单名称.单选对象名称[索引].方法(参数)
4.10 复选按钮对象
调用格式
document.表单名称.复选对象名称[索引].属性
document.表单名称.复选对象名称[索引].方法(参数)
4.11 选择对象
格式
文字new Option([文字[,值[,defaultSelected[,selected]]]]) 属性4.12补充
InnerText方法
格式
元素.innerText=“文本”
说明
可以对元素div,span,label,p等包含的文本段内容进行修改,无格式。
例:
text1.innerText="这是一段无格式的文字,覆盖原标记内文字
4.13补充2
InnerHTML方法
格式
元素.innerHTML=“带格式文本”
说明
可以对元素div,span,label,p等包含的文本段内容进行修改,带有HTML格式。
例:
text1.innerHTML="这是一段有格式的文字,覆盖原文字