DOM修改HTML元素

　　访问到指定HTML元素之后，还可以对该元素进行修改，通过修改HTML元素就可以实现动态更新HTML页面的目的了。
　　修改节点通常是修改节点的内容，修改节点的属性，或者修改节点的CSS样式。总结起来一句话：HTML元素的所有读写属性都可被修改！一旦HTML元素的属性值被修改，HTML页面上对应的内容也就随之改变。修改HTML元素通常通过修改如下几个常用属性来实现。
　　➢　innerHTML：大部分HTML页面元素如<div.../>、<td.../>的呈现内容由该属性控制。
　　➢　value：表单控件如<input.../>、<textarea.../>的呈现内容由该属性控制。
　　➢　className：修改HTML元素的CSS样式，该属性的合法值是一个class选择器名。
　　➢　style：修改HTML元素的内联CSS样式。
　　➢　options[index]：直接对<select.../>元素的指定列表项赋值，可改变列表框、下拉菜单的指定列表项。

例子
<!DOCTYPE html>  
<html>  
<head>  
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> 编辑表格值 </title>
</head>  
<body>  
    改变第<input id="row" type="text" size="2" />行，
    第<input id="cel" type="text" size="2" />列的值为:
    <input id="celVal" type="text" size="16" /><br />
    <input id="chg" type="button" value="改变" onclick="change();" />
    <table id="d" border="1">
        <tr>
            <td>疯狂Java讲义</td>
            <td>轻量级Java EE企业应用实战</td>
        </tr>
        <tr>
            <td>疯狂Ajax讲义</td>
            <td>经典Java EE企业应用实战</td>
        </tr>
        <tr>
            <td>疯狂XML讲义</td>
            <td>疯狂Android讲义</td>
        </tr>
    </table>
    <script type="text/javascript">
        var change = function()
        {
            var tb = document.getElementById("d");
            var row = document.getElementById("row").value ;
            row = parseInt(row);
            // 如果需要修改的行不是整数，弹出警告
            if(isNaN(row))
            {
                alert("您要修改的行必须是整数");
                return false;
            }
            var cel = document.getElementById("cel").value ;
            cel = parseInt(cel);
            // 如果需要修改的列不是整数，弹出警告 
            if(isNaN(cel))
            {
                alert("您要修改的列必须是整数");
                return false;
            }
            // 如果需要修改的行或者列超出了表格的行或列，弹出警告
            if (row > tb.rows.length || 
                cel > tb.rows.item(0).cells.length)
            {
                alert("要修改的单元格不在该表格内");
                return false;
            }
            //  修改单元格的值
            tb.rows.item(row - 1).cells.item(cel - 1).innerHTML
                = document.getElementById("celVal").value;
        }
    </script>
</body>  
</html>

注：本博客内容节选自李刚编著的疯狂HTML 5/CSS 3/JavaScript讲义 ，详细内容请参阅书籍。