DOM對HTML元素的訪問操作（二）
阿新 • • 發佈：2019-01-04
上篇文章介紹了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>