Javascript学习第一季--Javascript DOM 总结.doc

Javascript学习第一季(9)--Javascript DOM 总结 作为一个js-DOM开发者，你必须知道的一些DOM方法： 创建节点。 createElement(): var a = document.createElement(“p”); 它创建的是一个元素节点，所以 nodeType 等于 1 。 a.nodeName 将返回 p ; 注意；createElement()方法创建出来的新元素节点不会被自动添加到文档里，既然没添加到文档里，说明它还是一个游离的状态。所以它也没有nodeParent属性。 如果想把它添加到文档里，可以使用 appendChild()或者insertBefore()方法或者replaceChild()方法。当然我们在前面的例子中，自己写了一个insertAfter()方法; 比如： var a = document.createElement(“p”); document.body.appendChild(a); 注意： appendChild()默认是添加到文档的最后。也就是lastChild子节点。 如果想添加到某个地方，可以使用insertBefore()。 如果想在元素插入之前给元素添加属性。可以这么做： var a = document.createElement(“p”); a.setAttribute(“title”,”my demo”); document.body.appendChild(a); createTextNode(): var b = document.createTextNode(“my demo”); 它创建的是一个文本节点，所以nodeType等于 3 。 b.nodeName 将返回 #text ; 跟createElement()一样，用createTextNode()创建的节点也不会自动添加到文档里。需要使用appendChild()或者insertBefore()方法或者replaceChild()方法。 他经常与createElement()配合使用，知道为什么吗？（一个元素节点，一个文本节点。） var mes = document.createTextNode(“hello world”); var container = document.createElement(“p”); container.appendChild(mes); document.body.appendChild(container); 复制节点。 cloneNode(boolean) : 它有一个参数。 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 ); 注意： true的话：是paaaa/p 克隆。 false： 只克隆 p/p ，里面的文本不克隆。 可以自己写个例子，然后用 firebug 看看。 克隆后的新节点，和createTextNode()一样 不会被自动插入到文档 。需要appendChild(); 另外还有一个注意： 如果克隆后，id一样，不要忘记用 setAttribute(“id” , “ another_id “); 改变新的节点的ID。 插入节点。 appendChild() : 给元素追加一个子节点， 新的节点 插入到 最后。 var container = document.createElement(p); var t = document.createTextNode(cssrain); container.appendChild(t); document.body.appendChild(container); 他经常跟createElement()和createTextNode(),cloneNode()配合使用。 另外 appendChild()不仅可以用来追加新的元素，也可以你 挪动 文档中现有的元素。 看下面的例子： p id=msgmsg/p p id=contentcontent/p p id=aaaaaaaaaaa/p script var mes = document.getElementById(msg); var container = document.g