010-修改HTML元素

最新推荐文章于 2024-05-15 15:59:19 发布

编码的三叔

最新推荐文章于 2024-05-15 15:59:19 发布

阅读量462

点赞数

分类专栏： DOM详解 DOM详解文章标签：修改HTML元素

本文链接：https://blog.csdn.net/ppwwp/article/details/88364824

版权

DOM详解同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

DOM详解

16 篇文章 0 订阅

订阅专栏

访问到指定HTML元素之后，还可以对该元素进行修改，通过修改HTML元素就可以实现动态更新HTML页面的目的了。

修改节点通常是修改节点的内容，修改节点的属性，或者修改节点的CSS样式。总结起来一句话：HTML元素的所有读写属性都可以被修改！一旦HTML元素的属性值被修改，HTML页面上对应的内容也就随之改变。修改HTML元素通常通过修改如下几个常用属性来实现。

innerHTML:大部分HTML页面元素如<div……/>、<td……/>的呈现内容由该属性控制。
value:表单控件如<input……/>、<textarea……./>的呈现内筒由该属性控制。
className:修改HTML元素的CSS样式，该属性的合法值class选择器名。
style:修改HTML元素的内联CSS样式。
option[index]:直接对<select……./>元素的指定列表项赋值，可改变列表框、下拉菜单的指定列表项。

下面的示例代码演示了一个可编辑的表格，在页面中指定需要修改的表格行、列，然后输入需要修改的值，即可修改单元格的内容。

<!DOCTYPE html>
<html>
 <head>
  <meta http-equiv="content-type" content="text/html"/>
  <title>编辑表格值</title>
  
 </head>
 <body>
  改变第<input type="text" name="" id="row" value="" size="2" />行,
  第<input type="text" name="" id="cel" value="" size="2"/>列的值为：
  <input type="text" name="" id="celVal" value="" size="16"/>
  <br>
  
  <input type="button" name="" id="chg" value="改变" onclick="change()" />
  <br>
  
  <table border="1" cellspacing="" cellpadding="" id="d" style="width: 580;border-collapse: collapse;" >
   <tr><th>名称</th><th>描述</th></tr>
   <tr><td>张三</td><td>在村东</td></tr>
   <tr><td>李四</td><td>在村西</td></tr>
   <tr><td>王五</td><td>在村北</td></tr>
   <tr><td>赵六</td><td>在村南</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).cells.item(cel-1).innerHTML = document.getElementById("celVal").value;
   }
  </script>
 </body>
</html>

在这里插入图片描述