利用节点更改table内容

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta name="author" content="" />
<link rel="stylesheet" type="text/css" href="" />
<style type="text/css"></style>
<script type="text/javascript"></script>
</head>
<body><table width="500" border="1"><tr><td>姓名</td><td>性别</td><td>年龄</td></tr><tr><td>奥特曼</td><td>男</td><td>26</td></tr></table>
<input type="button" value="查找table节点" onclick="find_table_node()">
<input type="button" value="修改男为女" onclick="edit_text_node()"> <script type="text/javascript">
function find_table_node(){
//查找html节点
var node_html=document.firstChild;
//alert(node_html.nodeName); //结果是对象
//查找body节点
var node_body=node_html.lastChild;
//alert(node_body);
var node_table=node_body.firstChild;
alert(node_table.nodeName);
} function edit_text_node(){
//查找body节点
var node_body=document.body;
//查找table节点
var node_body=document.body.firstChild;
//查找tbody节点
var node_tbody=node_body.firstChild;
//查找tr节点
var node_tr=node_tbody.lastChild;
//查找td节点 是数组
//childNodes返回的是一个数组,根据下标找td节点
var node_td = node_tr.childNodes[1];
//alert(node_td.nodeName);
//查找文本节点
var node_text=node_td.firstChild;
//修改内容为女
node_text.nodeValue="女";
//alert (node_text.nodeValue); }
</script> </body>
</html>
上一篇:深入分析MVC中通过IOC实现Controller依赖注入的原理


下一篇:深圳共创力咨询《成功的产品经理DNA》公开课3月29~30日在深圳开课!