javascript入门学习第一季第六章.docVIP

Javascript学习第一季（6） 上篇文章纳闷的问题，将在这章和以后的几章里，慢慢搞定。 从今天起，开始学习DOM编程 让我们慢慢称为一名初级的js程序员。 然后往js匠人方向发展。 学习英文： Dom：文档对象模型。Document object model Bom：浏览器对象模型。 注：也可以叫窗口对象模型。（window object model.） API：应用编程接口。 注：DOM其实可以看作一种API。 Node：节点。 注：节点分为：元素节点，属性节点，文本节点。 元素节点 包含 属性节点和文本节点。 Dom树： 下面我们直接看 到底怎么操作DOM。 创建元素节点。createElement(): SCRIPT LANGUAGE=JavaScript var a = document.createElement(p); alert( 节点类型是 ： +a.nodeType + , 节点名称是： + a.nodeName); /SCRIPT 输出 ; nodeType 是 1 . a.nodeName 是 p ; 所以它创建的是一个元素节点 ….你也许会想 为什么文档中没发现 节点 p呢？ 我们看下面例子： body /body SCRIPT LANGUAGE=JavaScript var a = document.createElement(p); document.body.appendChild(a); /SCRIPT 用firebug查看下，发现文档中已经 有我们需要的结果了。 原来createElement()方法创建出来的新元素节点不会被自动添加到文档里，既然没添加到文档里，说明它还是一个游离的状态。如果想把它添加到文档里，可以使用 appendChild()或者insertBefore()方法或者replaceChild()方法（后面介绍）。 2，创建文本节点。createTextNode(): var b = document.createTextNode(my demo); alert( 节点类型是 ： +b.nodeType + , 节点名称是： + b.nodeName); 输出 ; nodeType 是 3 . a.nodeName 是 ＃text ; 所以它创建的是一个文本节点 ….你也许又会想 为什么文档中没发现 这个文本节点 呢？难道也和createElement()一样，需要使用appendChild（）添加到文档里。 对的，你的想法非常对。 我们看下面例子： body /body SCRIPT LANGUAGE=JavaScript var mes = document.createTextNode(hello world); var container = document.createElement(p); container.appendChild(mes);//先把文本节点添加到 元素节点 document.body.appendChild(container);//再把元素节点添加到 文档里 /SCRIPT 复制节点。cloneNode(boolean) :一个参数： 看一个例子： body /body SCRIPT LANGUAGE=JavaScript var mes = document.createTextNode(hello world); var container = document.createElement(p); container.appendChild(mes); document.body.appendChild(container); var newpara = container.cloneNode(true);//true和false的区别 document.body.appendChild(newpara ); var newpara = container.cloneNode(false);//true和false的区别 document.body.appendChild(newpara ); /SCRIPT 看下firebug下的结果： 看出 true 和false的区别了吧。 true的话：是phello world/p 克隆。 false： 只克隆 p/p ，里面的文本不克隆。 和createElement()一样，克隆后的新节点 不会被自动插入到文档 。需要appendChild(); 另外还有一个注意： 如果克隆后，id一样，不要忘记用 setAttribute(“id” , “ new_id “); 来 改变新的节点的