JavaScript DOM学习第二章：编辑文本

核心提示： 1while(obj.nodeType!=1){2obj=obj.parentNode;3}现在我们以一个标签结束，如果这是一个文本框的标签那么用户点击之后就可以编辑了，JavaScript DOM学习第二章：编辑文本(3)，如果是一个链接的标签那么用户点击之后应该还是作为一个链接来反映的，这两

1　while　(obj.nodeType　!=　1)　{
2　　　　　obj　=　obj.parentNode;
3　}

现在我们以一个标签结束。如果这是一个文本框的标签那么用户点击之后就可以编辑了。如果是一个链接的标签那么用户点击之后应该还是作为一个链接来反映的。这两种情况下我们就不需要这个函数了：

1　if　(obj.tagName　==　'TEXTAREA'　||　obj.tagName　==　'A')　return;

我们需要再一次的向上遍历DOM树直到找到P标签或者HTML标签：

1　while　(obj.nodeName　!=　'P'　&&　obj.nodeName　!=　'HTML')　{
2　　　　　obj　=　obj.parentNode;
3　}

如果是HTML标签那么表示用户在段落之外点击的，就结束函数：

1　if　(obj.nodeName　==　'HTML')　return;

经过这个检测我们最终确定用户点击的是我们想要编辑的段落。然后保存段落的innerHTML：

1　var　x　=　obj.innerHTML;

创建一个新的TEXTAREA然后保存：

1　var　y　=　document.createElement('TEXTAREA');

然后找到段落的父节点：

1　var　z　=　obj.parentNode;

现在的情形是：

　　　　　　　　　　　　　　　　　　　　　　　　z
　　　　　　　　　　　　　　　　　　　　　　　　|
　　　　---------------------------------------
　　　　|　　　　　　　　　　　　　　　　　　　|　　　　　　　　　　　　　　　　　|
　　[more]　　　　　　　　　　　　　　　　P　　　　　　　　　　　　　　　[more]

然后通过父节点，在段落之前插入新的TEXTAREA节点：

编缉推荐阅读以下文章

• JavaScript DOM学习第六章：表单实例
• JavaScript DOM学习第五章：表单简介
• JavaScript DOM学习第四章：getElementByTagNames
• JavaScript DOM学习第三章：内容表格
• JavaScript DOM学习第一章：W3C DOM简介
• javaScript DOM方法与属性摘要