如果你要开发论坛之类的网页工程，少不了，提供编辑功能，而且这个编辑要求不刷新，要用编辑框马上代替所要编辑的文本，还要提供保存按钮，这样的编辑框才能提高用户体现。其实，不难，纯粹用JavaScript就已经能实现了。至于要把编辑的内容保存的数据库的步骤，请自行查询关于Ajax的东西。这个要求的难点在，如果是一个类似论坛之类的东西，需要的编辑框必定有多个。你可以利用ASP.NET,JSP,PHP这些服务器语言，生成多个文本域与编辑框，，但你不可能为这么多的编辑框设置同一个ID，毕竟HTML要求整个页面的所有节点ID唯一，而且编辑框所处于的DIV图层，本身就没有就不能设置onclick然后传递自身给唯一个javascript函数操控，设置onclick的只能是那个“编辑”按钮或者超级链接。
一、基本目标
比如如下工程，你应该如何实现呢？点击“编辑”，本页面不刷新，要用编辑框马上代替所要编辑的文本，还要提供保存按钮。而且不利用document.getElementById。主要考虑到这个网页可能有多个这样的编辑框。
二、基本思想
此时，你可以利用JavaScript对父节点与子节点的获取来完成这个事情。
本页面的基本布局，HTML代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""><html xmlns=""><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>编辑框</title></head><body><div><div>这是一段内容</div><div style="display:none"><form onsubmit="return saveEdit(this)"><textarea rows="10"></textarea><br /><input type="submit" value="保存" /></form></div><a href="javascript:void(0)" onclick="edit(this)">编辑</a></div></body></html>非常简单，首先，预设一段内容，假设是文本域。然后把编辑域隐藏起来。这个编辑域的设置了一个高10行的文本框，提供一个submit按钮，没有action，onsubmit必须返回false，所以保存了，不会跳转，里面应该放有ajax技术，这里可以用服务器语言把这条记录在数据库的ID取出来，放在一个隐藏域里面，以便Ajax根据这个ID操作数据库。不过这里就不搞这么复杂了。关键是说明这个即时编辑框在前端是怎么仅靠父子节点实现的。
这也是所谓的HTML DOM树的内容，如下图，你可以在节点后面.点一个parentNode就找到自己的老爸，比如form这个节点的老爸，就是红色框框起来的辖域，红色框的儿子便是黑色框框起来的辖域：
三、核心脚本
因此也便有了如下的JavaScript了，点击a标签，也就是“编辑”的超级链接，由于this就会把自己整个节点传过去edit函数，同样地点击提交按钮，则会把整个表单传递给saveEdit函数：
<script>//这是用来判断现在是正在编辑还是没有编辑的Flagvar editOn=0;//这里的obj就是a节点function edit(obj){//a节点的老爸，旗下的第一个div就是文本域var contentField=obj.parentNode.getElementsByTagName("div")[0];//第二个div就是编辑域var editField=obj.parentNode.getElementsByTagName("div")[1];//如果现在不是编辑框状态if(editOn==0){//那就隐藏文本域，显示编辑域contentField.style.display="none";editField.style.display="block";//把文本域的内容赋予给编辑域旗下的第一个文本框editField.getElementsByTagName("textarea")[0].value=contentField.innerHTML;//然后设置现在是编辑状态editOn=1;//a节点的内文本也应该变成“取消编辑”obj.innerHTML="取消编辑";}else{//反之，如果点击“取消编辑”则显示本文域，隐藏编辑域contentField.style.display="block";editField.style.display="none";editOn=0;obj.innerHTML="编辑";}}//提交表单的检验函数，实质上，这里的obj是整个编辑域的表单function saveEdit(obj){//表单旗下的第一个多行文本框取出来var editTextarea=obj.getElementsByTagName("textarea")[0];//表单的老爸就是编辑域var editField=obj.parentNode;//表单的爷爷旗下的第一个div就是文本域var contentField=obj.parentNode.parentNode.getElementsByTagName("div")[0];//既然用户已经点击了“保存”，也就是提交按钮了嘛，就把编辑框的内容取代原来文本框的内容。contentField.innerHTML=editTextarea.value;//之后设置成非编辑状态，显示文本域，隐藏编辑域contentField.style.display="block";editField.style.display="none";editOn=0;//表单的爷爷旗下的第一个a标签的内文本变成“编辑”obj.parentNode.parentNode.getElementsByTagName("a")[0].innerHTML="编辑";//不跳转，返回false之前，还应该用ajax操作数据库的return false;}</script>四、总结与展望
至此，整个工程就做完了，实际上，body节点就是所有节点的祖先，平时document.getElementById中的document就是指那个body，至于DOM不熟练了，可以参考《【JavaScript】网页节点的增删改查》（点击打开链接）getElementsByTagName不熟练的，请参考《【JavaScript】利用getElementsByTagName与getElementsByName改进原生态兼容IE6标签页》（点击打开链接）
一个人，一条路，人在途中，心随景动，从起点，
