DOM访问列表框、下拉菜单

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="selected">上海</option>
        <option value="tianjin">天津</option>
        <option value="nanjing">南京</option>
        <option value="shenzhen">深圳</option>
        <option value="wuhan">武汉</option>
    </select><br/>
    <input type="button" value="第一个城市" onclick="change(s_city[0]);"/>
    <input type="button" value="上一个城市" onclick="change(s_city[s_city.selectedIndex-1]);"/>
    <input type="button" value="下一个城市" onclick="change(s_city[s_city.selectedIndex+1]);"/>
    <input type="button" value="最后一个城市" onclick="change(s_city[s_city.length-1]);"/>
    <input type="button" value="所有城市" onclick="alert(document.getElementById('city').innerText)"/>
    <script type="text/javascript">
        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等元素的索引值

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

cellIndex

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

<table id="mytable" border="1">
        <caption>计算机课程</caption>
        <tr>
            <td>算法</td>
            <td>c++</td>
        </tr>
        <tr>
            <td>内存</td>
            <td>CPU</td>
        </tr>
        <tr>
            <td>Java</td>
            <td>CSS</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="cell" size="2"/>列的值为
    <input type="text" id="course" size="10"/>
    <input type="button" id="btn_set" value="修改" onclick="set_value()"/>
    <script>
        function set_value(){
            var row = document.getElementById('row').value;
            var cell = document.getElementById('cell').value;
            document.getElementById('mytable').rows[row-1].cells[cell-1].innerHTML = document.getElementById('course').value;
        }
    </script>