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

核心提示： 解释我们设置一个editing标志为false，这用来显示用户是否正在编辑段落，JavaScript DOM学习第二章：编辑文本(2)，当然初始是没有，varediting=false;创建一个按钮然后我们创建一个Radey按钮，结束函数：1if(editing)return;然后是支持性检测：

解释

我们设置一个editing标志为false。这用来显示用户是否正在编辑段落。当然初始是没有。

var　editing=false;

创建一个按钮

然后我们创建一个Radey按钮，后面会需要很多次。这需要一些高级脚本技术，所以先做一些对象检测：

1　if　(document.getElementById　&&　document.createElement)　{

如果是现代浏览器，则创建按钮：

1　var　butt　=　document.createElement('BUTTON');

他的文本是：

1　var　buttext　=　document.createTextNode('Ready!');

把这个文本添加到按钮上：

1　butt.appendChild(buttext);

然后添加一个onclick事件处理程序：

1　　　　　butt.onclick　=　saveEdit;
2　}

现在按钮就存储在butt里面，需要的时候我们就可以直接引用。

将P转为文本框

稍后我们会为整个页面定义一个onclick事件。所有的这些事件都会发送到catchIt()函数。

1　function　catchIt(e){

首先检测用户是否正常编辑段落，如果是，结束函数：

1　if　(editing)　return;

然后是支持性检测：

1　if　(!document.getElementById　||　!document.createElement)　return;

然后寻找事件的源：

1　if　(!e)　var　obj　=　window.event.srcElement;
2　else　var　obj　=　e.target;

现在我们有了事件的源，但是有个问题是Mozilla会认为文本节点是源（而不是我们需要的P节点）。所以如果节点不是标签（nodeType不是1），我们需要向上遍历DOM树：

编缉推荐阅读以下文章

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