DOM 表格

DOM 访问表单控件的常用属性和方法如下：

action 返回该表单的提交地址
elements 返回表单内全部表单空间所组成的数组，通过数组可以访问表单内的任何表单控件。
length 返回表单内表单域的个数
method 返回表达你的method属性，主要有get和post两个值
target 确定提交表单是的结果窗口，主要有_self 、 _blank 、 _top 等
reset() submit() 重置表单和确定表单方法

在elements 返回的数组中访问具体的表单控件语法如下：

.elements[index] 返回该表单中第index个表单控件
.elements[elementName] 返回表单内ID或name为elementName的表单控件。
.elementName 返回表单中ID或name为elementName的表单控件。

• 实例：

    <form id="myform" action="http://www.iotek.com.cn" method="GET" target="_blank">
        <input name="username" type="text" value="lingling"><br>
        <input name="password" type="text" value="123456"><br>
        <select name="city" id="">
            <option value="shanghai">上海</option>
            <option value="nanjing" selected>南京</option>
        </select>
        <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>
    <script>
        function operatorForm() {
            var myform = document.forms[0];
            alert(myform.id);
        }
    </script>

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

form 返回列表框、下拉菜单所在的表单对象
length 返回列表框、下拉菜单的选项个数
options 返回列表框、下拉菜单里所有选项组成的数组
selectedIndex 返回下拉列表中选中选项的索引。
type 返回下拉列表的类型，多选的话 返回select-multiple.单选返回select-one

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

defaultSelected 返回该选项默认是否被选中
index 返回费选项在列表框、下拉菜单中的索引
selected 返回该选项是否被选中
text 返回该选项呈现的文本
value 返回该选项的value属性值

• 实例：

    <select id="city" name="city" size="5" >
        <option value="beijing">北京</option>
        <option value="shanghai" selected>上海</option>
        <option value="tianjin">天津</option>
        <option value="nanjing">南京</option>
        <option value="shenzhen">深圳</option>
        <option value="wuhan">武汉</option>
    </select><br>
    <input type="button" value="firstCity" onclick="change(s_city.options[0])">
    <input type="button" value="pviousCity" onclick="change(s_city.options[s_city.selectedIndex - 1]);">
    <input type="button" value="nextCity" onclick="change(s_city.options[s_city.selectedIndex + 1]);">
    <input type="button" value="lastCity" onclick="change(s_city.options[s_city.length - 1]);">
    <script>
        var s_city = document.getElementById("city");
        var change = function(city) {
            alert(city.text);
        } 
    </script>

DOM 访问表格子元素的常用属性和方法如下：

caption 返回表格的标题对象
rows 返回该表格里的所有表格行
tbodies 返回该表格里所有< tbody…/ >元素组成的数组
tfoot 返回该表格里所有< tfoot…/>元素
thead 返回该表格里所有< thead…/>元素

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

cells 返回该表格行内所有的单元格组成的数组
rowIndex 返回该表格行在表格内的索引值
sectionRowIndex 返回该表格行在其所在元素（tbody，thead等元素）的索引值

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

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

    <table id="mytable" border="1" style="border: 1px solid black;">
        <caption>w3cschool</caption>
        <tr>
            <td>c</td>
            <td>c++</td>
        </tr>
        <tr>
            <td>Lsd</td>
            <td>ARM</td>
        </tr>
        <tr>
            <td>J2EE</td>
            <td>Android</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[1].innerHTML  )"><br>
    设置指定单元格的值：
    第 <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()">

    <script>
        function updateCell() {
            var row = document.getElementById("row").value;
            var cell = document.getElementById("cel").value;
            var t = document.getElementById("mytable");
            // t.rows[row - 1].cells[cell-1].innerHTML = document.getElementById("course").value;
            t.rows.item(row - 1).cells.item(cell - 1).innerHTML = document.getElementById("course").value;
        }

    </script>