本文详细介绍了JavaScript中的document对象，包括如何访问html和body元素，获取文档信息，以及各种获取和操作元素的方法。同时，文章讲解了表单和表单元素的使用，如form对象的属性和方法，以及按钮、切换按钮、文本框和Select元素的交互与事件处理。
document对象
Document 对象是是window对象的一个属性，因此可以将document对象作为一个全局对象来访问。当浏览器载入 HTML 文档, 它就会成为 Document 对象。
一、document对象的属性
-
html元素和body对象
document.documentElement 获取html元素，文档的根节点
document.body 获取文档的body元素
-
文档信息
document.title 获取文档标题
My title document.URL
返回文档完整的URL比如：{协议}：//{用户名}:{密码}@{主机名}:{端口号}/{路径}/{文件}?{参数}document.domain 返回当前文档的域名。
document.referrer 返回载入当前页面的URL
-
获取元素–Element
getElementById();
getElementsByTagName(); 标签
getElementsByName(); name
getElementsByClassName();
querySelector(); 获取匹配的第一个元素！ ()中可以是css选择器的标准形式兼容到css2. ( id,
类, 类型, 属性, 属性值)。querySelectorAll(); 获取元素集合，()中可以是css选择器的标准形式兼容到css2.
-
特殊集合
1）document.anchors:返回文档中所有带那么特性的
<a>元素。2）document.forms:返回文档中所有的
<form>元素，与document.getElementByTagName(“form”)的到的结果相同。3）document.images:返回文档中所有的
<img>元素，与document.getElementByTagName(“img”)的到的结果相同。4）document.links:返回文档中所有带href特性的
<a>元素。
5）document.applets[]:applet对象的一个数组，该对象代表文档中的Java小程序。6）lastMondified：一个字符串，包含文档的修改日期
-
颜色属性
bgColor：文档的背景颜色fgColor：文档的前景颜色
linkColor：定义超链接的颜色，超链接是没有被访问的链接
alinkColor：定义超链接的颜色，超链接是激活过的链接
vlinkColor：定义超链接的颜色，超链接是访问过的链接
-
其他
document.addEventListener() 向文档添加句柄
removeEventListener()
document.cookie() 设置或返回与当前文档有关的所有cookie
createElement() 创建元素节点
createTextNode() 创建文本节点
二、document对象的方法
write() 向文档写 HTML 表达式 或 JavaScript 代码。
open() 打开一个流，用来收集来自任何write()或writeln()方法的输出。
close() 关闭输入流，并显示数据
表单和表单元素
一、From对象
document.forms[] 是一个数组，包含了文档中所有的表单（<form>）。要引用单个表单，可以用 document.forms[x]，但是一般来说，人们都会这样做：在<form>标记中加上“name="…"”属性，那么直接用 “document.<表单名>”就可以引用了。
-
属性
name 返回表单的名称，也就是<form name="...">属性。 action 返回/设定表单的提交地址，也就是<form action="...">属性。 method
返回/设定表单的提交方法，也就是<form method="...">属性。 target
返回/设定表单提交后返回的窗口，也就是<form target="...">属性。 encoding
返回/设定表单提交内容的编码方式，也就是<form enctype="...">属性。 length 返回该表单所含元素的数目。
enctype属性：编码方式 -
方法
reset() 重置表单。这与按下“重置”按钮是一样的。
submit() 提交表单。这与按下“提交”按钮是一样的。 -
事件
onreset; onsubmit
<form onreset="return confirm('really dsddds)"></form>
与onsubmit一样，只有真正点击Rest按钮才会触发onreset事件处理程序，调用表单的reset（）方式不会触发它。
二、定义表单元素
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form name="everything">
<table border="border" cellpadding="5">
<tr>
<td>UserName:<br/>[1]<input type="TEXT" name="username" size="15"/></td>
<td>Password:<br/>[2]:<input type="PASSWORD" name="password" size="15"/> </td>
<td rowspan="4">Input Events[3]<br/><textarea name="textarea" rows="20" cols="28"/></textarea> </td>
<td rowspan="4" align="center" valign="center">
[9]<input type="BUTTON" value="Clear" name="clearbutton"/><br/>
[10]<input type="BUTTON" value="submit" name="submitbutton"/><br/>
[11]<input type="RESET" value="Reset" name="resetbutton"/><br/>
</td>
</tr>
<tr>
<td colspan="2">File:[4]<input type="FILE" name="file" size="15"/></td>
</tr>
<tr>
<td>My Computer Peripherals:<br/>
[5]<input type="CHECKBOX" name="extras" value="burner">DVD Writer<br/>
[5]<input type="CHECKBOX" name="extras" value="printter">Printer<br/>
[5]<input type="CHECKBOX" name="extras" value="card">cardReader<br/>
</td>
<td>My Web Browser:</br>
[6]<input type="RADIO" name="browser" value="ff">Firefox<br/>
[6]<input type="RADIO" name="browser" value="ie">IE<br/>
[6]<input type="RADIO" name="browser" value="other">Other
</td>
</tr>
<tr>
<td> My Hobbies:[7]<BR/>
<select multiple="multiple" name="Hobbies" size="4">
<option value="programmeing">Hacking Javascript
<option value="surfing"> surfing the web
<option value="caffeine">Drinking coffe
<option value="annoying">annoying my friends
</select>
</td>
<td align="center" valign="center">My Favorite Color:<br>[8]
<select name="color">
<option value="red">red <option value="green">green
<option value="Blue">Blue <option value="white">white
<option value="violet">violet <option value="peach">Peach
</select>
</td>
</tr>
</table>
</form>
<div align="center">
<table border="4" bgcolor="pink" cellspacing="1" cellpadding="4">
<tr>
<td align="center"><b>Form Elements</b></td>
<td>[1]Text</td> <td>[2]Password</td> <td>[3]textarea</td>
<td>[4]FielU</td> <td>[5]Checkbox</td>
</tr>
<tr>
<td>[6]Radio</td><td>[7]select(list)</td><td>select(menu)</td>
<td>[9]BUTTON</td><td>[10]submit</td><td>[11]Reste</td>
</tr>
</table>
</div>
<script type="text/Javascript">
function report(element,event){
if((element.type=="select-one") || (element.type=="select-multiple")){
value="";
for(var i=0;i<element.options.length;i++)
if(element.options[i].selected)
value+=element.options[i].value+"";
}
else if(element.type=="textarea") value="..."
else value=element.value;
var msg=event+":"+element.name+'('+value+')\n';
var t=element.form.textarea;
t.value=t.value+msg;
}
function addhandlers(f){
for(var i=0;i<f.elements.length;i++){
var e=f.elements[i];
e.onclick=function(){report(this,'Click');}
e.onchange=function(){report(this,'Change');}
e.onfocus=function(){report(this,'Focus');}
e.onblur=function(){report(this,'Blur');}
e.onselect=function(){report(this,'Select');}
}
f.clearbutton.onclick=function(){
this.form.textarea.value='';report(this,'CLick');
}
f.submitbutton.onclick=function(){
report(this,'Click');return false;
}
f.resetbutton.onclick=function(){
this.form.reset();report(this,'Click');return false;
}
}
</script>
</body>
</html>
三、脚本化表单元素
1、表单元素的属性
| type | 一个只读字符串，标识表单元素的类型 |
|---|---|
| from | 对包含from的元素只读 |
| name 由html的name性质指定的只读引用 | |
| value | 一个可读可写的字符串，指定了表单元素包含或表示的 ’ 值 ’ |
2、按钮
由“<input type="button">”指定。引用一个 Button 对象，可以使用“<文档对象>.<表单对象>.<按钮名称>”。<按钮名称>指在<input>标记中的“name="…"”属性的值。引用任意表单元素都可以用这种方法。
- 属性
<name 返回/设定用指定的元素名称。
value 返回/设定用指定的元素的值。
form 返回包含本元素的表单对象。 - 方法
blur() 从对象中移走焦点。
focus() 让对象获得焦点。
click() 模拟鼠标点击该对象。 - 事件
onclick; onmousedown; onmouseup
3、切换按钮
由“<input type="checkbox">”指定。
- 属性
name 返回/设定用指定的元素名称。
value 返回/设定用指定的元素的值。
form 返回包含本元素的表单对象。
checked 返回/设定该复选框对象是否被选中。这是一个布尔值。
defaultChecked 返回/设定该复选框对象默认是否被选中。这是一个布尔值。 - 方法
blur() 从对象中移走焦点。
focus() 让对象获得焦点。
click() 模拟鼠标点击该对象。 - 事件
onclick
4、文本框
Text 文本框对象
由“<input type="text">”指定。Password 对象也是 Text 对象的一种，所以 Password 对象所有的属性、方法和事件，Text 对象都有。
5、Select元素和option元素
菜单列表类的控件<select>和<option>菜单是种最节省空间的方式，正常状态下只能看到个选项，单击按钮打开菜单后才能看到部的选项。
列表可以显示一定数量的选项，如果超过了这个数量，会自动出现滚动条。具体语法如下:
<select name="select_name" size=select_size multiple="multiple">
<option value="option_value" selected="selected">选项</option>
<option value="option_value">选项</option>
</select>
select元素
- 属性
name 返回/设定用指定的元素名称。
length 返回 Select 对象下选项的数目。
selectedIndex 返回被选中的选项的下标。这个下标就是在 options[] 数组中该选项的位置。如果 Select 对象允许多项选择，则返回第一个被选中的选项的下标。
form 返回包含本元素的表单对象。 - 方法
blur() 从对象中移走焦点。
focus() 让对象获得焦点。 - 事件
onchange
判断select选项中 是否存在Value=”paraValue”的Item
function jsselectisexititem(objselect,objitemvalue){
var isexit = false;
for(var i=0;i<objselect.options.length;i++)
{
if(objselect.options[i].value == objitemvalue)
{
isexit = true;
break;
}
}
return isexit;
}
Option对象
options[] 是一个数组，包含了在同一个 Select 对象下的 Option 对象。Option 对象由“<select>”下的“<options>”指定。
options[] 数组的属性
length; selectedIndex 与所属 Select 对象的同名属性相同。
单个 Option 对象的属性
text 返回/指定 Option 对象所显示的文本
value 返回/指定 Option 对象的值，与<options value="...">一致。
index 返回该 Option 对象的下标。对此并没有什么好说，因为要指定特定的一个 Option 对象，都要先知道该对象的下标。这个属性好像没有什么用。
selected 返回/指定该对象是否被选中。通过指定 true 或者 false，可以动态的改变选中项。
defaultSelected 返回该对象默认是否被选中。true / false。
扫一扫
153
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
