在 JavaScript中,提供了对 HTML,页面,尤其是 HTML页面元素的处理方法。从本文开始,着重介绍JavaScript对于HTML页面元素的处理方法。本文主要介绍文档页面元素的按位置访问,文档元素的按名称访问,动态修改页面元素的内容,尤其是对<div>内容的修改。在本文最后,还给出一种动态改变页面样式的方法。
按位置访问元素
本节给出一段按位置访问页面元素的示例代码,可以实现对页面表单元素及其内容的动态读取。
要点
本节代码主要使用了按位置访问页面元素的相关方法,下面介绍其主要功能和用法。
- 在JavaScript中,提供了按位置访问页面元素的方法。相同类型的元素,按照在页面中出现的顺序,第一个编号为 0,下一个为1,依此类推,可以访问所有页面中出现的元素。
- 在某个元素中,如果还包含了更多其他类型的元素,则其中的元素仍按照出现的先后顺序进行编号,编号从0开始。
- 这种方式的不足是:当页面中出现的同类元素很多时,想进行准确的定位和引用将变得非常困难。
<table border="1" bordercolor="green" cellspacing="10" cellpadding="10">
<tr><td>表单一</td><td>
<!--第一个表单,有2个元素-->
<form action="#" method="get">
<input type="text" value="表单1之文本框1">
<input type="button" value="显示" onclick="alert(window.document.forms[0].elements[0].value);">
</form>
</td></tr>
<br>
<tr><td>表单二</td><td>
<!--第二个表单,有4个元素-->
<form action="#" method="get">
<input type="text" value="表单2之文本框1">
<input type="button" value="显示" onclick="alert(window.document.forms[1].elements[0].value);">
<br>
<input type="text" value="表单2之文本框2">
<input type="button" value="显示" onclick="alert(window.document.forms[1].elements[2].value);">
</form>
分析
- (1)程序建立了一个2行2列的表格,在第1行第2列中建立了一个form 表单,其中包含1个文本框和1个按钮;在第2行第2列中,同样建立了一个form 表单,其中包含两个文本框和两个按钮。
- (2)第1行第2列中按钮的onclick事件弹出一个对话框,aler()要显示的内容为window.document.fomms[0].elements[0].value”,表示文档中第1个表单中第1个元素(文本框)的值。
- (3)第2行第2列中第1个按钮的onclick事件弹出一个对话框,alert()要显示的内容为“window.document.forms[l].elements[0].value”,表示文档中第2个表单中第1个元素(文本框)的值;第2个按钮的 onclick事件弹出一个对话框,alert()要显示的内容为“window.d