javascript动态网页编程二

最新推荐文章于 2021-09-26 20:19:46 发布

车晋强

最新推荐文章于 2021-09-26 20:19:46 发布

阅读量870

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/chejinqiang/article/details/44117457

版权

javascript 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

第六章 JavaScript对象与数组
对象是JavaScript最基本的数据类型之一，是一种复合的数据类型，将多种数据类型集中在一个数据单元中。并允许通过对象名来存取这些数据的值。
对象使用运算符new来创建，在new之后必须有用于初始化对象的构造函数名，。
在建立新对象之前，需要通过构造其属性来定义对象，这一过程由定义函数名及其属性的函数来完成。
function Student(name,age,grade){
this.name=name;
this.age=age;
this.grade=grade;
}
利用该函数，可以用new语名来建立一个新的对象，student1=new Student(李明，16,3);
可以直接创建对象。如：

<html>
<head></head>
<body>
<script language="javascript">

</script>
</body>
</html>
可以用delete语句来删除一个对象的属性。
6.1.2对象的方法
方法其实就是通过对象调用的JavaScript函数，可以将函数赋值给任何变量，甚至赋值给一个对象的任何属性，在方法的主体内部，关键词关键词this会变成调用该方法的对象，函数是存储在变量中的值，而这个变量也是全局对象的一个属性，因此，当调用一个函数，实际上是调用的全局对象中的一个属性。
方法用来对this对象操作，函数通常是独立的并不需要使用this对象。
使用函数来定义和调用方法如：

<html>
<head>
<title></title>
</head>
<body>
<script language="javascript">

</script>

</body>
</html>
像上面的例子一样，如果用构造函数把方法赋值给要初始化的对象，那么，类的每一个对象都会有一个相同的方法属性副本，执行效率低，在JavaScript中，可以使用一种更为有效的方式，常量以及能被类的所有对象共享的属性。
每一个对象都有一个原型对象，而且一个对象可以继承其原型对象的所有属性，要为一个对象的类指定原型对象，需要将构造函数的prototype属性设置为当的对象。此后，当用构造函数初始化一个新对象时，JavaScript自动将该对象作为新建对象的原型对象。
6.1.5 构造函数与this关键字
对象实例由new关键字来创建，而不是由方法创建，也就是说，构造方法不用返回任何结果，因此，在构造方法中不要有返回结果的return.
如：

<html>
<head>
</head>
<body>
<script language="javascript">

</script>
</body>

</html>
6.2JavaScript中的数组
由于JavaScript是一种无类型的语言，所以一个数组的元素可以具有任意的数据类型，同一数组的不同元素可以具有不同的类型，数组的元素甚至可以是其它的数组，这样就可以创建更为复杂的数据结构。
数组可以用构造函数Array()和运算符new来创建。
var a=new Array();
var a=new Array(5,4,3,2,1,"test","text");
var a=new Array(10);
另外，使用数组直接量可以直接将一个数组的值嵌入到JavaScript中，如同把字符串文本放入引号之间来定义字符串直接量一样，要创建数组直接量，只需将一个用逗号的值列表放入【】中，即可。
var primes=[2,3,5,6];
与其它语言不同，在javascript语言的数组可以具有任意个数的元素，可以在任何时候改变元素数量，要给一个数组添加新的元素，只需要给其赋值即可。
在JavaScript中，只有那些真正存储在数组中的元素才能分配到内存。
数组的length()属性。
如：

<html>
<head></head>
<body>
<script>

</script>
</body>
</html>
数组元素遍历
在对数组元素进行遍历时，不能假定数组元素是连续的，而且从0开始，那使用数组元素之前需要进行检测。看该元素是不是已经定义。
删除数组元素，通过设置数组的length属性来截断该数组，是唯一可以将数组中元素真正删除的方法，用 delete删除后，元素变成undefined但，length属性并不会改变。
用对象的方法实现数组。
Array对象及其属性与
join方法：将一个数组的所有元素转化为字符串，并把这些字符串连接起来，可以任意指定一个字符串来分割结果字符串中的元素。若没有指定，则使用逗号来分割。
reverse方法：颠倒数组元素的顺序。
sort方法：排序
alice方法：返回数组的一个子数组，带有两个参数，分别表示要返回的子数组的起止点。
splice方法：可以把元素从数组中删除，也可以向数组中插入元素。
如：

<html>
<head></head>
<body>
<script language="javascript">

</script>
</body>
</html>
6.2.4作为关联数组的对象
JavaScript内部对象。
Object对象：提供了对象最基本的功能。这些功能构成了所有其他对象的基础，Object对象提供了创建自定义对象的简单方式。不需要再定义构造函数，可以在程序运行时对JavaScript对象随意添加属性。
String对象。是动态对象，需要创建该对象的实例，最常用的属性是length.indexof返回字符串在一个字符串对象中第一次出现的位置。
正则表达式相关方法：
match方法：使用正则表达式对模式串搜索
replace方法：使用正则表达式对字符串搜索，并用指定的字符串替换搜索到的内容
search方法：返回搜索时第一个匹配的位置
字符串匹配与转换相方法：
slice:返回在一个字符串中两个指定位置之间的子字符串
substr:返回从指定位置开始，具有指定长度组成的字符串
toLowerCase
toUpperCase
6.3.3Date对象
Date对象的方法：如：

<html>
<head></head>
<body>
<script language="javascript">

</script>
</body>
</html>
6.3.4 toString方法
所有内部对象的一个成员方法，作用是将对象中的数据转换成某种格式的字符串类型。
专门用于对象的语句
在JavaScript中，with与for in是专门用于对象的语句。
with语法如下：
with(对象名){
}
在一个连续的程序代码中，如果多次使用某个对象的属性和方法，就在with关键字之后的括号中写出该对象的名称，就可以在程序块中直接使用该对象的属性名和方法名。
for in语句
for(变量 in 对象){}
用于对某个对象的所有属性进行循环操作，将某个对象的所有属性名称依次赋值给不同的变量，而不需要知道对象属性的个数。

<html>
<head>
<title></title>
<style></style>
<link type="text/css" rel="stylesheet" href="6.24.html">

</head>
<body>
<script language="javascript">

</script>
</body>

</html>

第七章字符串与数值处理对象
字符串是程序设计中经常使用的一种数据类型，在JavaScript中，字符串主要用于用表单的确认。
如：

<html>
<head></head>
<body>
<script language="javascript">

</script>
</body>
</html>
数值处理对象
JavaScript中同样包含了校丰富的数值型数据，但是很少用于数值的计算。更多应用于与用户的交互响应。
Math对象
Number对象

第十三章样式与定位
动态网页DHTML是静态网页，网页样式表，以及JavaScript语言基于DOM的组合效果。由于各种浏览器提供的动态网页的实现方法各不相同，因此在使用时应当注意其使用规范。
动态网页的基本任务就是根据用户的需要，动态地改变网页元素的内容或表现形式。对于JavaScript来说，动态网页的实现如下：
在网页元素中设置事件处理器，当用户对网页元素进行处理时，可自动调用网页处理器的JavaScript函数。
在JAvaScript中得到需要改变的网页元素对象。
通过网页元素的属性和方法改变网页元素的内容。（文字，按钮，文本框）或其表现方式，字体，颜色，背景色，位置，尺寸。
13.1 网页对象模型与网页元素对象
网页对象模型描述的是网页中各元素的组成结构及其相互间的关系，为JavaScript提供了得到元素对象的方法，随着网页技术的发展，产生了三种对象模型方法，从而提供了三种得到网页元素对象的方法。
HTML对象模型方法：HTML对象模型是通过其结构层次得到每一个对象，使用这种代码时，需要清楚地知道当前所处理的网页元素对象在网页结构层次中的位置，。
DHTML对象模型
DHTML对象模型方法是为JavaScript提供了得到网页对象的另外方法，使用时可以不必具体了解文档对象模型的结构层次。而直接使用网页中的元素对象，。该对象具有如下特点：网页中的每一对标记就是一个元素对象。为得到网页中的对象，可以为每一个标记赋值一个惟一的id.可通过document.getElementById方法得到所需的方法。
可以获取网页文本框中输入的内容。显示和修改网页中文字的内容。处理网页中的表格内容：
关于处理网页中的表格内容：
通过<table></table>标记的id属性可以得到表格对象，或通过innerHTML插入表格对象。
通过表格对象的insertRow方法在表格中插入行。
对过行对象的insertCell方法在行中插入表格元素。
通过表格元素对象的innerHTML方法添加表格元素中的内容。
通过行对象的deleteCell方法可以删除行中的表格对象。
通过表格对象的deleteRow方法可以删除表格中的行。
例如下面的代码所示：
<html>

<head>

<title></title>

</head>

<body style="margin:40px;">
<table id="maintb" border="1">
<tr><th width="80">姓名</th><th="250">单位</th></tr>
<tr id="row0"><td>张三</td><td>北京中软科技公司</td><td><input type="button" value="删除" οnclick="deleterow(0);"></td></tr>
<tr id="row1"><td>李四</td><td>北京中软科技公司</td><td><input type="button" value="删除" οnclick="deleterow(1);"></td></tr>
</table>
<br>
<div>
<span id="new">
姓名：<input type="text" name="newname" id="newname"><br>

单位: <input type="text" name="newcompany" id="newcompany">
 
<input type="button" value="新增" οnclick="addrow();">
</span></div>
<script language="javascript">

</script>
</body>
</html>
13.1.3 W3C对象模型方法
该对象模型将网页结构做为树状结点处理，每一个结点代表网页中的一个元素，对应于HTML中的一对标记，因此，当通过id得到某一结点的元素对象后，就可以通过结点方便的得到其相关的其他网页对象。
1.显示和修改结点内容
通过结点对象的nodeValue方法得到网页中结点处网页元素对象的内容。
通过文档对象的createElement,createTextNode,方法新建结点元素对象。
通过结点对象的appendChild方法添加新的结点
通过结点对象的replaceNode方法改变结点内容。
2.显示和修改表格内容
要使用W3C文档对象来处理表格，表格中必须包括<tbody></tbody>标记，。
通过文档对象的createElement("table")方法创建新表格对象，或通过id得到表格对象
通过文档对象的createElement("tbody"),createElement("tr"),createElement("td")新建元素对象。
通过表格元素对象的innerHTML方法添加表格元素中的内容。
通过结点的appendChild,removeChild方法删除结点对象。
13.2 动态网页样式
通过JavaScript不仅可以改变网页标签对象中的样式属性，而且可以动态改变在外部样式网页文件或内部网页样式表定义的样式，即可以在样式表中动态添加，修改或删除网页样式定义。同网页中的其他元素一样，网页样式表也是文档的一个子对象。
如下：
<head>
<link rel="stylesheet" href="a.css" type="text/css" id="outercss">
<style id="innercss">
</style>
</head>
在DOM中，可以通过styleSheet数组可以得到样式表对象，例如，上例中的网页样式表对象可用下面的方式表示：
document.styleSheets[0]
document.styleSheets[1]
不同的浏览对于添加样式定义有不同的语法规则。在IE中：
var styleobj=document.styleSheets[0];
styleobj.addRule("body","background-color:gray");
syleobj.removeRule(0);
styleobj.rules[1].style.fontsize="12px";
在Netscape中:
var styleobj=document.styleSheets[1];
styleobj.insertrule("body{background-color:gray}",0};
styleobj.deleterule(0);
styleobj.cssRules[1].style.fontsize="12px";
13.2.5 改变网页样式表
13.3网页对象动态定位
默认状态下，HTML网页中的内容都是按照网页元素的顺序出现的，在网页样式技术出现以前，网页内容大都用表格方式进行。使用样式技术后，网页元素的内容可以在网页中精确布局。
13.3.1 绝对位置与相对位置
在网页样式表定义中，属性position有两个属性值，分别为absolute绝对定位和relative相对位置。这两个值表示定位元素对象的基准点依据。
绝对位置表示当前元素对象的基准点为上一级元素对象设置的left，top位置，如果上一级元素对象没有设置left，top属性，以body对象的原点为基准。
相对位置表示当前元素对象的位置将按照网页内容顺序排版，相对移动left,top.
设置绝对位置可以不按网页元素顺序精确定位在屏幕上，设置相对位置可以使网页元素随浏览器窗口尺寸变化而相对改变。默认为相对位置。
用z-index设置网页元素顺序
如果在定位元素的过程中，两个元素重叠了，那么，设置样式中的z-index属性可以得到重叠了的两个元素的前后顺序，其属性值可以设置为auto,或者数字，当为auto时，将按时HTML中出现的顺序。后者会出现在前者的上方，当设置为数字时，数值较大的会出现在上方。
13.3.3 坐标位置及尺寸
网页中元素对象的坐标位置和尺寸，可以通过网页样式表的方法或者DOM来得到，在网页样式表中，定位网页元素对象使用left,top,right,bottom属性，设置宽度和高度使用width,height.这些网页样式属性在JavaScript中使用网页元素对象.style.网页样式属性名进行引用，通过这种方法可方便地设置网页元素对象的位置及尺寸，但是只有在网页样式表中定义了上述属性时，才可对其引用。
DOM提供了各种类型的元素对象定位及尺寸属性，这些属性基本上只用于读取，属性名中包含client的宽度和高度是真正能够显示网页内容的区域，属性名中包含offset的宽度和高度是包括了元素对象在内的所有区域，属性名中包含scroll的宽度和高度是表示的所有全部网页内容的区域。
13.3.4 控制网页元素对象的显示与隐藏
通过display,visibility,来控制元素内容的显示与隐藏。
13.4 构建跨浏览器的DHTML库
有时候，需要编写跨浏览器的JavaScript代码，需要支持以下三种不同的技术：
Netscape中特有的<layer>标签
IE中<div>标签定位的all[]类集。
由<div>标签定位的DOM兼容浏览器。
第十四章 Window对象
Window对象描述的是浏览器窗口或者显示文档的框架，该对象是JavaScript的顶层对象，。
14.1 对话框
Window对象的alert()方法会创建一个特殊的小窗口。该窗口带有一个字符串信息和一个确定按钮。可以用来对代码进行调试。
14.1.2 确认
Window对象的confirm()方法会弹出一个问题信息，如果用户同意该信息，可以单击上面的确定，否则取消。返回一个布尔值。
14.1.4 提示
JavaScript还支持Window对象的prompt()方法，该方法对弹出一个提示对话框，等待用户输入一行数据。它有两个参数，一个是显示在对话框上的提示信息，第二个出现在用户输入的行内，且被选中，作为默认值使用，。该方法的返回值可以被引用或存储在变量中，。
14.2 窗口的打开与关闭
上节介绍了三个对话框可以快速创建特殊窗口，有时候需要打开任意一个窗口，用以显示Web页面或是运算的结果，Window对象提供了 open(),close()方法，分别用来打开和关闭按钮。
打开一个窗口的语法如下：
window.open(url,name,features,replace)
url是要在新窗口打开的文档的URL地址。
name是要打开的窗口的名字。用HTML链接的target属性进行定位时会有用。
features是一个用逗号分隔的字符串，列举了窗口的特征
replace是一个可选的Boolean值，指出是否允许URL替换窗口的内容。
<script language="javascript">
secondwindow=window.open("http://baidu.com","baidu","height=300,width=200,scrollbars=yes");
</script>
可以有很多种方法来创建窗口，最常用的是使用链接或按钮来实现。
14.2.2 关闭窗口
14.2.3 窗口特征
窗口特征参数相当丰富，可以控制窗口的宽度，高度，滚动条以及其他窗口特征，。
如下：
<html>

<head>

<title></title>

</head>

<body>
<form name="windowform" id="windowform" action="#" method="get">
<h2>基本属性</h2>
URL地址：<input type="text" name="windowurl" id="windowrul" size="30" maxlength="300" value="http://yahoo.com.cn"><br>
窗口名称:<input type="text" name="windowname" id="windowname" size="30" maxlength="300" value="secondwindow"><br>
<h2>大小</h2>
高度：<input type="text" name="height" id="height" size=4 maxlength="4" value="100">
宽度：<input type="text" name="width" id="width" size="4" maxlength="4" value="100">
<h2>位置</h2>
距顶部：<input type="text" name="top" id="top" size="4" maxlength="4" value=100>
距左边：<input type="text" name="left" id="left" size="4" maxlength="4" value=100>(IE)<br><br>
ScreenX：<input type="text" name="screenx" id="screenx" maxlength="4" size="4" value="100">
ScreenY：<input type="text" name="screeny" id="screeny" maxlength="4" size="4" value="100">(Netscape)<br><br>
<h2>显示特征</h2>
always lowered:<input type="checkbox" name="alwayslowered" id="alwayslowered">
always raised:<input type="checkbox" name="alwaysraised" id="alwaysraised">
dependent:<input type="checkbox" name="dependent" id="dependent">
directories:<input type="checkbox" name="directories" id="directories">
<br><br>
<input type="button" value="创建窗口" οnclick="openwindow();">
<input type="button" value="关闭窗口" οnclick="closewindow();">
</form>
<script language="javascript">
function createfeaturestring(){
var featurestring="";
var numelements=document.windowform.elements.length;
for(var i=0;i<numelements;i++)
if((document.windowform.elements[i].type=="checkbox")&&(document.windowform.elements[i].checked))
featurestring+=document.windowform.elements[i].name+"=yes,";
featurestring+="height="+document.windowform.height.value+",";
featurestring+="width="+document.windowform.width.value+",";
featurestring+="top="+document.windowform.top.value+",";
featurestring+="left="+document.windowform.left.value+",";
return featurestring;

}
function openwindow(){
var features=createfeaturestring();
var url=document.windowform.windowurl.value;
var name=document.windowform.windowname.value;
thenewwindow=window.open(url,name,features);
}
function closewindow(){
if(window.thenewwindow)
thenewwindow.close();
}

</script>
</body>

</html>
14.2.4 窗口写入
window.document.write();
14.2.5 DOM方法与窗口
14.3 控制窗口
除了打开和关闭窗口之外，还有很多其他控制窗口的方法，例如，可以使用window.focus()方法来使窗口获得焦点，也可以利用与其相对的window.blur方法使窗口失去焦点。
14.3.1 移动窗口
移动窗口可以有两个不同的方法:window.moveBy(),window.moveTo();
wiondowname.moveBy(水平像素，垂直像素）；
windowname是指要移动的窗口的名称，如果只有主窗口，则指该主窗口。
水平像素数是指在水平方向上移动窗口的像素数。如果为正数，则向右移动，如果为负数，则向左移动。
垂直像素数是指在垂直方向上移动窗口的像素数。如果为正数，向上移动，如果为负数，则向下移动。
windowname.moveTo(x.y);
14.3.2 JavaSCript中改变窗口大小的方法也有两种
window.resizeBy(),window.resizeTo()
window.resizeBy(水平像素，垂直像素),按照给出的数值对窗口大小进行调整，其中，正数会使窗口变大，负数会使窗口变小。
14.3.3 窗口滚动
Window对象还提供了scrollBy(),scrollTo()方法，用来相对地滚动窗口。关于窗口方法的测试如下：
14.3.4 设置窗口定位
JavaScript中有很多方法可以实现用URL打开窗口，但最好的方法是使用Window对象的Location对象，用来访问窗口的当前定位URL，可以被读取，可以被转换。因此，可以用按钮实现某个页面的更新。
<form action="#" method="get">
<inoput type="button" value="goto yahoo" οnclick="window.location='http://www.yahoo.com';">
</form>
14.3.5 访问窗口历史
JavaScript提供了History对象实现对浏览器历史记录的访问，Histroy对象是一个只读的URl字符串数组。包含了用户最近访问过的URL记录，主要方法就是引导用户在历史记录中前后游历，用法如下：
<a href="javascript:window.history.forward();">forward</a>
<a href="javascript:window.history.back();">back</a>
14.3.6 控制窗口状态栏
状态栏位更进一步浏览器的左下部，用来显示当前操作的一些信息，或显示当前浏览器的状态信息。使用JavaScript可以控制状态栏的内容，可以使用Window对象的status属性和defaultStatus属性访问状态栏。信息显示时间的长短是两个属性的区别。defaultStatus会在任何时间显示，status的值中有在某个事件发生的瞬间显示。
使用status属性，可以实现某种滚动效果。实现状态栏上文字的滚动效果。如：
<html>

<head>

<title></title>

</head>

<body οnlοad="scrollmsg();">
<script language="javascript">
var message="请注意浏览器的状态栏，这句话将在其中滚动显示!";
var delay=1000;
var timerID;
var maxcount=0;
var currentcount=1;
function scrollmsg(){
if(maxcount==0)
maxcount=3*message.length;
window.status=message;
currentcount++;
message=message.substring(1,message.length)+message.substring(0,1);
if(currentcount>=maxcount)
{
timerID=0;window.status="";
return;}
else
timerId=setTimeout("scrollmsg()",delay);

}

</script>
</body>

</html>
14.3.7 窗口时间与超时设定
Window对象支持一些设置计时器的方法，用来执行特定函数，这些方法包括setTimeout(),clearTimeout()。基本思路是设置一个超时，以便在将来的某个时候触发某段代码的运行。
14.4 窗口事件
通用的窗口事件
onblur 浏览器失去焦点的时候激活
onerror 出现JavaScript错误的时候，触发一个错误处理事件
onfocus 窗口获得焦点时被激活
onload 文档完全加载完时触发
onresize 用户改变窗口大小时触发
onunload 文档没有载入时触发
14.5 IE扩展
IE浏览器支持一些特殊类型的窗口，本节介绍模式窗口，无模式窗口，与弹出窗口。
模式窗口很像一个标准的对话框，同样会屏蔽主窗口，直到将其关闭。基本语法如下：
window.showModalDialog(url,参数，特征);
window.showModaldialog("14.14.html",window,"dialogHeight:150px;dialogWidth:300px;center:yes;help:no;resizable:no;status:no;");
无模式窗口
无模式窗口与模式窗口完全不同，模式窗口永远停留在原窗口的上层，即使原窗口获得焦点，通常用无模式窗口显示帮助信息或其他上下文相关信息。
window.showModelessdialog(url,参数，特征。)；
弹出窗口
var mypopup=window.createPopup();
mypopup.show();
mypopup.hide();
第十六章处理文档
16.1 早期文档处理
文档颜色
在传统的JavaScript中，支持大量的属性，可以对文档及其文本与链接的颜色进行读取与设置。如下：
aLinkColor 活动的超级链接的颜色
bgColor 页面背景颜色
fgColor 文档中文本的颜色
linkColor 没有访问过的链接的颜色
vlinkColor 已经访问过的链接的颜色
当然，在现代HTML描述中，不鼓励使用上面这些属性，事实上，在DOM1中就不能很好的支持这些属性，。而支持JavaScript的浏览器仍旧支持这些属性。
如下代码所示：
<html>

<head>

<title></title>

</head>

<body bgcolor="red" text="black" link="blue" alink="yellow" vlink="purple">
<h1>文档颜色属性应用</h1>
<h2>测试链接</h2>
<a href=" " οnclick="return false">没有访问过的链接</a>
<a href="#">访问过的链接</a>
<a href="#" οnclick="return false">单击验证活动链接的颜色</a>
<form name="colors" id="colors" acton="#" method="get">
<h2>页面颜色</h2>
背景颜色：<input type="text" name="backgroundcolor" id="backgroundcolor" value="red"><br>
文本颜色：<input type="text" name="textcolor" id="textcolor" value="black"> <br>
<h2>超链接颜色</h2>
没有访问过的：<input type="text" name="linkcolor" id="linkcolor" value="blue"><br>
当前活动的：<input type="text" name="alinkcolor" id="alinkcolor" value="yellow"><br>
已经访问过的：<input type="text" name="vlinkcolor" id="vlinkcolor" value=:purple"><br>
<input type="button" value="设置颜色" οnclick="setcolors(this.form);">
</form>
<script type="text/javascript">
function setcolors(form){
with(form){
document.bgColor=backgroundcolor.value;
document.fgColor=textcolor.value;
document.alinkColor=alinkcolor.value;
document.vlinkColor=vlinkcolor.value;

}
}
</script>
</body>

</html>
16.1.2 上次修改时间
document.lastModified指出当前文档最后一次被修改的具体日期和时间，。返回一个字符串
lastModified的返回值常被认为是Date对象，而事实上却是一个字符串，在该值上不可以直接用Date对象的属性与方法。
16.1.3 定位与相关属性
Document对象支持一些文档定位的属性，包括，document.location,document.URL,document.referrer;
document.location其值包括当前文档URL地址的字符串，。可以访问这的详细属性如路径，端口，协议。
<html>

<head>

<title></title>

</head>

<body>
<script language="javascript">
document.write(document.location);
document.write(document.location.pathname);
document.write(document.location.protocol);
document.write(document.location.port);
</script>
</body>

</html>
document.URL属性的值是一个只读的字符串，包含当前文档的URL地址，由于可以被document.location替换，所以很少用。
document.referer属性的值也是一个字符串，其内容是引出当前文档URL的源文档的URL的地址。
16.2 基本Document方法
document.write(),document.writeln().
在XHTML中，除非个别情况下，<pre>标签，回车与换行符都被忽略，因此，一般不会感觉到两者的区别。
Document对象的其他方法从功能上可以理解，clear()用来清除一个文档的内容，close(),open()分别用来关闭和打开一个文档，以关闭写入和准备写入，在现代JavaScript中，不支持clear(),并且当document.write()对文档写入完毕后，对文档的写入即关闭。
16.3 使用Document访问传统HTML元素
在JavaScript的最初版本中，定义了Document对象的三种聚集，anchors[],forms[],links[].又增加了applets[],embeds[],images[],plugins[]的支持。
anchors[] 页面中使用<a name="锚名称"></a>定义的所有锚的聚集
applets[] 页面中使用applet定义的所有Java applets
embeds[] 页面中所有<embed>
forms[]
images[]
links[]
plugins[] 与embeds[]同义
除上表外，传统的document还支持title属性，在传统的JavaScript中它是只读的，而在现代浏览器中，则可以对其值进行设置。
16.3.1 锚与链接
anchors[]在JavaScript用处不大，因为只能通过document.anchors.length来访问其length.
16.3.2 表单聚集
表单聚集包含文档中的所有<form>标签，可以通过数字或者名称来引用这些<form>.例如：document.forms[0]访问文档中第一个<form>，如果定义了一个<form name="myform">可以用document.forms[myform]或document.myform对其进行引用。
Form对象的几个属性包括以下几个：
action: 表单要提交到的URL。默认为当前文档的地址。
encoding: enctype属性的值
encType: 是一个DOM属性，用来替换传统encoding属性。
method: 可以是post,get.默认为get.
name: 表单的名称
target: 要显示表单结果的窗口或框架
表单元素聚集
除上一节提到的属性外，Form对象还有一个length属性，可以访问表单域内的字符数。这些表单由<input><select><textarea>等来定义，存储在Form对象的elements[]数组中，。可以使用document.myform.elements[0]或document.myform.textfield1来访问表单元素，可以使用document.formname.length,document.formname.elements.length访问表单中元素的数量。
16.3.4 图像聚集
JavaScript的Image对象支持与XHTML属性关联的一些属性，这些属性包括：border,height,hspace,lowsrc,vspace,src,name,width.该对象还有一个complete属性，该属性的值是一个逻辑值，表示该图像是不是已经被完全载入。
16.4 DOM 中的相关内容
DOM1试图对JavaScriipt的Document对象进行标准化，以支持对任意HTML元素的操作，这种技术上的倒退被称为DOM0.
DOM1中的文档属性与聚集：
anchors[]
applets[]
body 表示文档可见部分的索引
forms[]
cookie 存储文档Cookie的字符串，如果有多个
doctype 文档DTD的索引
documentElement 文档根元素的索引，<HTML>
domain 文档的安全域
images[]
implementation 一个可确定标记语言特征的对象的索引
links[]
referrer 存储引用的URL
Title
URL
DOM提供了更灵活的创建对象的方法：
createElement()
createTextNode()
DOM增加了三个方法，以检索文档中的特定区域。
document.getElementById();
document.getElementsByName()
document.getElementsByTagName(tagname)返回所有别名为tagname的所有XHTML元素的列表
16.4.2 HTMLElement的公用属性和方法
除DOM定义的属性之外，在XHTML中，所有的元素还具有一个公用属性核心集，id,style,title,class,所有这些加起来，就够成了JavaScript中可表示任意元素的公用属性与方法集。
如下：attributes[] 元素属性的聚集
childNodes[] 当前元素附加结点的聚集
className Class属性的值
Dir 一个文本，指向由dir属性设定的左右或右左顺序的文本
firstChild 当前元素中附加的第一个结点
Id 由Id属性为元素设定的文本
lang 由lang设定的语言元素代码
lastChild 最后一个孩子的索引
nodeName 元素的名称
nodeValue 元素的值，在HTML元素环境中，总是取空值
nodeType 结点类型的数字代码，在HTML中，总是为1
nextSibling 下一个兄弟结点
ownerDocument 包含当前元素的Document对象的索引
parentNode 上级元素的结点
previousSibling 前一个兄弟结点
style 访问当前元素的级联样式表
tagName 与 nodeName相同
Title 一个字符串
HTMLElement的公用方法
appendChild(newChild)
cloneNode(deep)
getAttribute(name)
getElementsByTagName(tagname)
hasChildNodes()
insertBefore(newChild,refChild)
removeAttribute(name)
removeChild(oldChild)
replaceChild(newchild,oldchild)
setAttribute(name,value)
16.4.3 访问具体HTML元素属性
XHTML与DOM之间几乎存在一对一的关系，HTML的标签也可以在DOM中找到与其对应的对象，使用document.getElementById()的方法访问一个元素，则可以直接操作该元素及其关联属性。

<html>
<head></head>
<body>
<h1>document.getElementById</h1>
<p id="myp">Test paragraph</p>
<form action="#" method="get">
<input type="button" value="left" οnclick="document.getElementById('myp').align='left';";>
<input type="button" value="center" οnclick="document.getElementById('myp').align='center'; ">
<input type="button" value="right" οnclick="document.getElementById('myp').align='right'; ">
</form>
</body>
</html>
同样的，可以使用document.createElement()向页面中直接添加XHTML元素，。如下例：
<html>
<head>
<title></title>
</head>
<body>
<script language="javascript">
var dangerousElements={'html':true,
'head':true,
'body':true,
'script':true,
'style':true,
'frameset':true,
'frame':true
};
var emptyElements={'hr':true,
'meta':true,
'br':true,
'area':true,
'base':true,
'link':true,
'frame':true
};
function addElement(theElement,theText){
if(theElement in dangerousElements){alert("not allowed");return;}
var newNode=document.createElement(theElement);
if(theText.length>0&&!(theElement in emptyElements)){var newText=document.createTextNode(theText);newNode.appendChild(newText);}
else
alert("donnot put the text in the empty element");
document.getElementById('insertHere').appendChild(newNode);
}
</script>
<h1>document.createElement()</h1>
<div id="insertHere" style="width:80%;border-style:dashed;border-width:1px;">
 
</div>
<form name="theForm" id="theForm" method="get" action="#">
<input type="text" value="i" name="theTag" id="theTag">
<input type="text" value="test" name="theText" id="theText">
<input type="button" value="create" οnclick="addElement(document.theForm.theTag.value,document.theForm.theText.value);">
</form>
</body>
</html>
16.5 用DOM处理表格
HTML中的<table>有着和DOM中很相似的属性名，这些属性包括 align,bgColor,border,cellPadding,cellSpacing,width.HTML扩展后的表格可以支持下面的结构：
一个表示开始的<table>标签。
一个可选的<option></option>定义的标题行。
一行或多行组成的群组，这些行可以包括 <thead><tfoot><tbody><tr><td><th>
一个由 <col>定义的群组中包含的列，。
一个表示关闭的</table>标签。
设置表格属性如下例所示：
<html>
<head>
<title></title>
</head>
<body>
<center><h1>设置表格属性</h1></center>

<table border="1" frame="box" id="testTable">
<caption>Test table</caption>
<thead>
<tr>
<th>product</th><th>sku</th><th>price</th></tr>
</thead>
<tfoot>
<tr><th colspan="3">this has been an HTML4 table example,thanks for reading</th></tr>
</tfoot>
<tbody>
<tr><th colspan="3" align="center">robots</th></tr>
<tr><td>trainer robot</td><td>tr456</td><td>5000</td></tr>
<tr><td>Guard Dog Robot</td><td>559</td><td>56000</td></tr>
<tr><td>friend robot</td><td>343</td><td>124000</td></tr>
</tbody>
<tbody>
<tr><th colspan="3" align="center">Jet packs</th></tr>
<tr><td>Ecooy</td><td>jp2534</td><td>45220</td></tr>
<tr><td>deluxe</td><td>jp3455</td><td>15000</td></tr>
</tbody>
</table>
<br clear="all">
<hr>
<br clear="all">
<script language="javascript">

</script>
<form action="#" method="get">
<strong>Alignment:</strong>
<select οnchange="theTable.align=this.options[this.selectedIndex].text;">
<option>left</option>
<option>center</option>
<option>right</option>
</select>
<strong>Background color:</strong>
<select οnchange="theTable.bgColor=this.options[this.selectedIndex].text;">
<option>white</option>
<option>red</option>
<option>blue</option>
<option>yellow</option>
<option>green</option>
<option>black</option>
</select>
<strong>frames:</strong>
<select οnchange="theTable.frame=this.options[this.selectedIndex].text;">
<option>above</option>
<option>below</option>
<option>border</option>
<option>box</option>
<option>hsides</option>
<option>vsides</option>
<option>lhs</option>
<option>rhs</option>
<option>void</option>
</select>
<strong>rules:</strong>
<select οnchange="theTable.rules=this.options[this.selectedIndex].text;">
<option>all</option>
<option>cols</option>
<option>groups</option>
<option>none</option>
<option>rows</option>
</select>
<br><br>
<strong>border:</strong>
<input type="text" size="2" maxlength="2" value="1" οnchange="theTable.border=this.value;">
<strong>cell padding:</strong>
<input type="text" size="2" maxlength="2" value="1" οnchange="theTable.cellPadding=this.value;">
<strong>cell spacing</strong>
<input type="text" size="2" maxlength="2" value="1" οnchange="theTable.cellSpacing=this.value;">
</form>
</body>
</html>
16.5.2 设置表格属性
HTMLTableElement对象也包含对其元素的缩写形式。如，tableElement.caption,tableElement.tFoot,tableElement.tHead,分别对应表格的<caption><tfoot><thead>.rows[],tBodies[]聚集分别可以访问<tr><tbody>
可以使用createTHead,createTFoot,createCaption与insertRow(index)等方法来创建表格元素。index是一个数字，表示该行的序号，从0开始计数。同样，也可以使用deleteTFoot(),deleteTHead(),deleteCaption(),deleteRowIndex(index)来删除元素。
操作表元
在HTML的<td>标签中，还有一个cellIndex属性，表示当前行中表元的索引。可以通过该属性向insertCell()，deleteCell()属性传递参数，以达到操作表元的目的。
<html>
<head>
<title></title>
</head>
<body>
<center><h1>插入和删除元素</h1></center>
<table id="table1" border="1">
<tr id="row1"><td id="cell1">表元一</td><td id="cell2">表元二</td></tr>
<tr id="row2"><td id="cell3">表元三</td><td id="cell4">表元四</td></tr>
</table>
<form name="testForm" id="testForm" action="#" method="get">
行号：<input type="text" name="rowtoinsert" id="rowtoinsert" size="2" maxlength="2" value="1">
<input type="button" value="插入行" οnclick="doRowInsert(document.testForm.rowtoinsert.value);">
<br>
行号:<input type="text" value="0" name="insertionRow" id="insertionRow" size="2" maxlength="2">
列号:<input type="text" value="0" size="2" maxlength="2" name="insertionColumn" id="insertionColumn">
<input type="button" value="插入列" οnclick="doCellInsert(document.testForm.insertionRow.value,document.testForm.insertionColumn.value);">
<br>
行号：<input type="text" size="2" maxlength="2" value="0" name="modifyRow" id="modifyRow">
列号:<input type="text" size="2" maxlength="2" value="0" name="modifyColumn" id="modifyColumn">
新内容:<input type="text"size="20" maxlength="20" value="" name="newContents" id="newContents">
<input type="button" value="编辑表元内容" οnclick="doCellModification(document.testForm.modifyRow.value,document.testForm.modifyColumn.value,document.testForm.newContents.value);">
<br>
行号：<input type="text" name="deletionRow" id="deletionRow" size="2" maxlength="2" value="0">
列号：<input type="text" name="deletionColumn" id="deletionColumn" size="2" maxlength="2" value="0">
<input type="button" value="删除单元" οnclick="doCellDelete(document.testForm.deletionRow.value,document.testForm.deletionColumn.value);">
</form>
<script language="javascript">
var theTable=document.getElementById("table1");
function doRowInsert(row){
var rowNumber=parseFloat(row);
if((rowNumber>=0)&&(rowNumber<=theTable.rows.length))
theTable.insertRow(rowNumber);
}
function doCellInsert(row,column){
var rowNumber=parseFloat(row);
var columnNumber=parseFloat(column);
if((rowNumber>=0)&&(columnNumber>=0)){
if(rowNumber>=theTable.rows.length){alert("cannot add beyond defined rows");return;}
if(columnNumber>theTable.rows[rowNumber].cells.length){alert("cannot add beyond defined column");return;}
theTable.rows[rowNumber].insertCell(columnNumber);
}
}
function doCellModification(row,column,newValue){
var rowNumber=parseFloat(row);
var columnNumber=parseFloat(column);
if((rowNumber>=0)&&(columnNumber>=0)){
if(rowNumber>=theTable.rows.length){alert("cannot modify cells outside the table");return;}
if(columnNumber>=theTable.rows[rowNumber].cells.length){alert("cannot modify cells outside the table");return;}
theTable.rows[rowNumber].cells[columnNumber].innerHTML=newValue;
}
}
function doCellDelete(row,column){
var rowNumber=parseFloat(row);
var columnNumber=parseFloat(column);
if((rowNumber>=0)&&(rowNumber<theTable.rows.length)&&(columnNumber>=0)&&(columnNumber<theTable.rows[rowNumber].cells.length)){
theTable.rows[rowNumber].deleteCell(columnNumber);
}
else
alert("cannot delete beyond outside the table");
}
</script>
</body>
</html>
16.6 DOM应用
事实上，只要通过getElementById()获取元素的相关属性之后，几乎可以对该元素进行任何操作。

第十七章表单和表单元素
表单是网页设计中的重要内容。没有表单，就不能实现网页内容的交互。
17.1 表单基础
javaScript通过Form对象访问XHTML文档内的表单。Form对象是Document对象的一个子对象。
Form对象的常用属性：
action 动作属性值，表示用户提交表单后，数据要传送到的URL。
elements[] 表单域对象队列，
encoding enctype属性的值
enctype 适当的DOM方式访问enctype属性值
length 与elements.length等价
method 可以是get,post
name 名称
target 要显示内容的页面所在框架的名称。_blank,_parent,_self,_top
访问表单
在扫描检测与操作表单域之前，可以通过如下方式来访问表单。
document.forms[]按编号
document.forms[]按名称
document.getElementById()
访问表单域
表单域可以通过elements[]来访问，也可以通过其名称来访问。
如下所示：
17.2 表单域
HTML支持很多表单元素，包括单行，多行文本框，口令域，下拉菜单，下拉列表，隐藏域以及众多的按钮。
Input元素属性
在DOM中，所有<input>标签都用HTMLInputElement对象来表示，下面是其公用属性与方法。
accessKey 包含给予该组件焦点的按键的字符串
defaultvalue 包含页面载入时value属性的字符串
disabled 是一个逻辑值，指出用户是否可以对该域进行操作
form 对包含该域的表单的只读引用
name 域名称
size 大小
tabIndex tab次序
type 表明类型，可以为：text,button,checkbox,radio,submit,reset,password,image,hidden,file
blur() 失去焦点
focus() 获得焦点
按钮
HTML有三种类型的按钮，提交按钮，复位按钮，普通按钮，另外还有两种按钮，分别是图像按钮和无显著特征的按钮。
<input type="submit">
<input type="reset">
<input type="button">
要定义按钮上显示的文字，需要设置value属性，还可以使用公用属性来提升按钮的外观与可用性。如下例所示：
<form>
<input type="button" value="click" name="button1" id="button1" title="please click me," style="background-color:red;color:white;"accesskey="c">
</form>
提交按钮的默认行为是将表单送往服务器进行处理，复位按钮将恢复表单域的初始样式。普通按钮没有默认动作，要使用普通按钮同，需要附加一个onclick事件处理器。
图像按钮可以使网页看起来更灵活，创建图像按键的方法有：在一个图片上加上链接，
<a href="javascript:document.myform.submit();">
<img src=" " width="55" height="21" border="0" alt="submit">
</a>
<input type="image" name="testbutton" id="testbutton" src=" " alt="submit">
无显著特征的按钮
在HTML和XHTML中提供了<button>标签，比<input>标签表现更灵活，可以创建更具视觉效果的按钮。
<button type=submit,button,reset; name= id= value= >
<button type="button" name="mybutton" id="mybutton">
<img src=" " border="0" alt="button">
</button>
文本域与文本区
文本输入框有三种形式：单行文本域，口令域，和多行文本域。
<input type="text">
<input type="password">
其附加属性如下:
maxlength 最大字符数
readonly 一个逻辑值，表示是否允许用户编辑域中内容
select() 选择域中内容。例如：准备替换或读取剪贴板的内容
多行文本或使用<textarea>来创建，基本语法如下：
<textarea name=" " id=" " rows=" " cols=" "></textarea>
限制文本域的输入长度：
<textarea> 并不能限制输入内容的长度，使用javascript则可以轻松做到。如下代码：
<texarea name=" " id=" " rows="4" cols="40" οnkeypress="return(document.myform.comments.value.length<100);">
本区域中，最多只允许输入100个字符。
</textarea>
限制输入长度的文本区之二的代码如下：

<html>
<head></head>
<body>
<h1>限制输入长度的文本区</h1>下面的文本区中允许输入100个以内的字符。若输入超过10或以后，多出的部分会被删除。
<form id="myform" name="myform" action="#" method="get">
<label>comments:<br>
<textarea id="comments" name="comments" rows="8" cols="8" οnchange="checkLimit(this,100);">
</textarea>
</label>
</form>
<script language="javascript">
function checkLimit(field,limit){
if(field.value.length>limit){
alert("允许最多输入");
field.value=field.value.slice(0,limit-1);
field.focus();
}
}
</script>
</body>
</html>
17.2.6 复选框与单先按钮
与文本域相比，复选框与单选按钮要有限的多。在XHTML中，复选框与单选按钮非常相似。如下：
<input type="checkbox,radio" name id value checked=" ">
如下代码所示：

<html>
<head></head>
<body>
<h2 align="center">复稳定框按钮与单选按钮示例</h2>
<form name="testform" id="testform" action="#" method='get'>
<em> 复选框：</em>
<input type="checkbox" name="check1" id="check1" value="testvalue">
<br><br>
<em>单选按钮:</em>
yes:<input type="radio" name="radiogroup" id="radio1" value="yes">
no:<input type="radio" name="radiogroup" id="radio2" value="no">
maybe:<input type="radio" name="radiogroup" id="radio3" value="maybe">
<br><br>
<input type="button" value="选择复选框" οnclick="document.testform.check1.click();">
<input type="button" value="选择单选按钮" οnclick="document.testform.radiogroup[0].click();">
<input type="button" value="使复选框获得按钮" οnclick="document.testform.check1.focus();">
<input type="button" value="使复选框失去焦点" οnclick="document.testform.check1.blur();">
<input type="button" value="复选框状态" οnclick="alert('checked?'+document.testform.check1.checked);">
<input type="button" value="单选框按钮状态" οnclick="showradiovalue(document.testform.radiogroup);">
</form>
<script language='javascript'>
function showradiovalue(radiogroup){
var numradios=radiogroup.length;
for(var i=0;i<numradios;i++)
if(radiogroup[i].checked)
alert("radio"+i+"with value of" +radiogroup[i].value);
}
</script>
</body>
</html>
17.2.7 文件上传
使用<input type="file">文件上传域有一个特有的accept附加属性，用来定义用户可以上传的MIME类型。
17.3 表单验证
JavaScript最常用的功能之一就是表单验证，在提交表单前进行表单验证，可以节约服务器周期，为用户节省等等的时间。
通常，表单验证发生在内容输入结束，表单提交之前，表单的onsubmit事件处理器中有一组函数负责验证。如果输入中包含非法数据，处理器会返回false,显示一条信息，同时取消提交。
1.验证内容是否为空：

<html>
<head></head>
<body>
<h1 align='center'>表单验证简单示例</h1>
<h3 align="center">输入内容不可为空</h3>
<form name="myform" id="myform" method="get" action="http://www.javascriptref.com/" οnsubmit="return validate();">
username:
<input type="text" size="30" maxlength="30" name="username" id="username" >
<input type="submit" value="提交">
</form>
<script language="javascript">
function validate(){
if(document.myform.username.value=="")
{alert("username is null");return false;}
}
</script>
</body>
</html>
上例中存在很多的不足，比如说输入一个空格也可以通过。在不能通过验证时，出错的文本获得焦点。如下代码所示：