【JavaScript】无须利用ID，一个仅靠父子节点实现的即时编辑框_js 文本框生成的文本我不需要一个个设置id-CSDN博客

本文链接：https://blog.csdn.net/yongh701/article/details/44357495

如果你要开发论坛之类的网页工程，少不了，提供编辑功能，而且这个编辑要求不刷新，要用编辑框马上代替所要编辑的文本，还要提供保存按钮，这样的编辑框才能提高用户体现。其实，不难，纯粹用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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>编辑框</title>
</head>
<body>
<div>
    <div>
    	这是一段内容
    </div>
    <div style="display:none">
        <form οnsubmit="return saveEdit(this)">
            <textarea  rows="10"></textarea><br />
            <input type="submit" value="保存" />
        </form>
    </div>
    <a href="javascript:void(0)" οnclick="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>
//这是用来判断现在是正在编辑还是没有编辑的Flag
var 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标签页》（点击打开链接）