DOM对HTML元素的访问操作（二）

上篇文章介绍了DOM访问HTML元素的两种主要方式，这篇文章继续介绍DOM对HTML的访问，主要是DOM访问表单控件、列表框、下拉菜单以及表格元素的方法与属性。

1.DOM访问表单控件

主要有以下属性和方法：

action:返回该表单的提交地址
element:返回表单内全部表单控件所组成的数组
length:返回表单内表单域的个数
method:返回表单内method属性，主要有get和post两种
target:确定显示表单提交的结果的窗口，主要有_self（当前页面）、_blank（新页面）
reset():重置表单
submit():确认提交表单

注：elements返回的数组中可以访问具体的表单

elements[index]:返回该表单中第index个表单控件
elements[elementName]:返回表单中id或name为elementName的表单控件
elementName:与elements[elementName]类似

用代码测试以上属性：

<!DOCTYPE html>
<html>
<head>
	<title>查找表单控件</title>
	<script type="text/javascript">
		function operatorForm(){
			var myform=document.forms[0];
			//alert(myform.action);   
			//alert(myform.method);
			//alert(myform.target);
			//myform.reset();     //重置表单
			myform.submit();    //确定表单
		}
	</script>
</head>
<body>
    <form id="myform" action="http://www.baidu.com" method="get" target="_blank">
    	<input type="text" name="username" value="向日葵"/><br/>
    	<input type="text" name="password" value="123456"/><br/>
    	<select name="city">
    		<option value="HZ">杭州</option>
    		<option value="HF">合肥</option>
    		<option value="BZ">亳州</option>

    	</select><br/>
    	<input type="button" value="获取表单内第一个控件" 
    	onclick="alert(document.getElementById('myform').elements[0].value);"/>
    	<input type="button" value="获取表单内第二个控件" 
    	onclick="alert(document.getElementById('myform').elements['password'].value);"/>
    	<input type="button" value="获取表单内第三个控件" 
    	onclick="alert(document.getElementById('myform').city.value);"/>
    	<input type="button" value="操作表单" onclick="operatorForm()"/>
    </form>
</body>
</html>

2.DOM访问列表框、下拉菜单的常用属性有：

form:返回列表框、下拉菜单所在的表单对象
length:返回列表框、下拉菜单的选项个数
options:返回列表框、下拉菜单所有选项组成的数组
selectedIndex：返回下拉列表中选中的选项的索引

注：使用options[index]返回具体选项对应的常用属性

index：返回该选项在下拉列表中的索引
selected：返回该选项是否被选中
text：返回该选项所呈现的文本
value：返回该选项的value属性值

用代码测试以上属性使用方法：

<!DOCTYPE html>
<html>
<head>
	<title>查找列表框、下拉菜单控件</title>
</head>
<body>
      <select id="city" size="5">
      	<option value="BZ">亳州</option>
      	<option value="HE">合肥</option>
      	<option value="HZ" selected="selected">杭州</option>
      	<option value="BJ">北京</option>
      	<option value="SH">上海</option>
      	<option value="CD">成都</option>
      	<option value="CQ">重庆</option>
      </select><br/>
      <input type="button" value="第一个城市" onclick="change(s_city.options[0]);"/>
      <input type="button" value="上一个城市" onclick="change(s_city.options[s_city.selectedIndex-1]);"/>
      <input type="button" value="下一个城市" onclick="change(s_city.options[s_city.selectedIndex+1]);"/>
      <input type="button" value="最后一个城市" onclick="change(s_city.options[s_city.length-1]);">
      <script type="text/javascript">
      	var s_city=document.getElementById("city");
      	var change=function(city){
      		alert(city.text);
      	}
      </script>
</body>
</html>

3.DOM访问表格元素

常用属性如下;（caption和rows最为常用）

caption：返回表格的标题对象
rows：返回表格所有的行
tfoot：返回表格里所有的<tfoot.../>元素
thead：返回表格里所有的<thead.../>元素
tbodies：返回表格里所有的<tbodies.../>元素

注：通过rows[index]返回表格指定的行所对应的属性

cells：返回此行内所有单元格组成的数组
rowIndex：返回该行在此表格内的索引值

通过cells[index]返回表格指定的列所对应的属性

cellIndex：返回该单元格在表格行内的索引值

代码测试如下

<!DOCTYPE html>
<html>
<head>
	<title>查找表单控件</title>
	<script type="text/javascript">
		function updateCell(){
			var row=document.getElementById("row").value;
			var cel=document.getElementById("cel").value;
			var t=document.getElementById("mytable");
			t.rows[row-1].cells[cel-1].innerHTML=document.getElementById("course").value;
		}
	</script>
</head>
<body>
     <table id="mytable" border="1">
     	<caption>DOM课程</caption>
     	<tr>
     		<td>语文</td>
     		<td>数学</td>
     	</tr>
     	<tr>
     		<td>音乐</td>
     		<td>美术</td>
     	</tr>
     	<tr>
     		<td>太极拳</td>
     		<td>五禽戏</td>
     	</tr>
     </table>
     <input type="button" value="表格标题" onclick="alert(document.getElementById('mytable').caption.innerHTML);"/>
     <input type="button" value="第一行第一列" onclick="alert(document.getElementById('mytable').rows[0].cells[0].innerHTML);"/>
     <input type="button" value="第二行第二列" onclick="alert(document.getElementById('mytable').rows[1].cells[1].innerHTML);"/>
     <input type="button" value="第三行第一列" onclick="alert(document.getElementById('mytable').rows[2].cells[0].innerHTML);"/>
     修改单元格的值：第<input type="text" id="row" size="2"/>行，第<input type="text" id="cel" size="2"/>列的值为
     <input type="text" id="course" size="10"/>
     <input type="button" id="btn_set" value="修改" onclick="updateCell()" />
</body>
</html>

DOM对HTML元素的访问操作（二）

猜你喜欢