while (obj.nodeType != 1) { 2 obj = obj.parentNode; 3 }
现在我们以一个标签结束。如果这是一个文本框的标签那么用户点击之后就可以编辑了。如果是一个链接的标签那么用户点击之后应该还是作为一个链接来反映的。这两种情况下我们就不需要这个函数了：
复制代码 代码如下:
if (obj.tagName == 'TEXTAREA' || obj.tagName == 'A') return;
我们需要再一次的向上遍历DOM树直到找到P标签或者HTML标签：
复制代码 代码如下:
while (obj.nodeName != 'P' && obj.nodeName != 'HTML') { 2 obj = obj.parentNode; 3 }
如果是HTML标签那么表示用户在段落之外点击的，就结束函数：
复制代码 代码如下:
if (obj.nodeName == 'HTML') return;
经过这个检测我们最终确定用户点击的是我们想要编辑的段落。然后保存段落的innerHTML：
复制代码 代码如下:
var x = obj.innerHTML;
创建一个新的TEXTAREA然后保存：
复制代码 代码如下:
var y = document.createElement('TEXTAREA');
然后找到段落的父节点：
复制代码 代码如下:
var z = obj.parentNode;
现在就成了这样：
z | --------------------------------------- | | | | | [more] y(TEXTAREA) butt(BUTTON) P [more]然后删除段落。现在看起来就好像是文本框和按钮代替了之前的段落。
直到现在，插入文本框之后，我们才能把段落的innerHTML放置在文本框内。Mozilla里面不支持在插入之前给文本框内添加内容。
y.value = x;为了用户方便给文本框焦点：
y.focus();然后设置editing为true。
editing = true; }将文本框转换为P当用户点击Ready按钮，就应该反过来了。这个由saveEdit()函数来完成。
function saveEdit() {得到TEXTAREA（这里假设整个页面只有一个TEXTAREA）：
var area = document.getElementsByTagName('TEXTAREA')[0]创建一个新的段落并保存：
复制代码 代码如下:
var y = document.createElement('P');
找到文本框的父元素：新的段落需要添加到那去：
复制代码 代码如下:
var z = area.parentNode;
将文本框的值存储在新的段落里：
复制代码 代码如下:
y.innerHTML = area.value;
然后把新的段落插入在文本框之前：
复制代码 代码如下:
z.insertBefore(y,area);
移除文本框：
复制代码 代码如下:
z.removeChild(area);
移除Ready按钮（同样的，假设页面只有一个按钮）：
复制代码 代码如下:
z.removeChild(document.getElementsByTagName('button')[0]);