DOM 精简知识教程.docVIP

DOM 精简知识教程 很明显树的顶层节点是NodeA节点,接下来可以通过指定的合适节点移动到树中的任何点,结合以下的代码你可以更好的了解这棵树节点间的相互关系: NodeA.firstChild = NodeA1 NodeA.lastChild = NodeA3 NodeA.childNodes.length = 3 NodeA.childNodes［0］ = NodeA1 NodeA.childNodes［1］ = NodeA2 NodeA.childNodes［2］ = NodeA3 NodeA1.parentNode = NodeA NodeA1.nextSibling = NodeA2 NodeA3.prevSibling = NodeA2 NodeA3.nextSibling = null NodeA.lastChild.firstChild = NodeA3a NodeA3b.parentNode.parentNode = NodeA DOM定义对操作一个文档对象的节点结构提供了实用的方法,它提供了像执行对象插入,更新,删除,克隆等这些常用的方法。 insertBefore()--在参考子节点之前插入一个新的子节点.如果参考的子节点为null,则新的子节点将作为调用节点的最后一个子节点插入。 replaceChild()--在childNodes集合种使用指定的newChild来代替oldChild;如果代替成功,则返回oldChild;如果newChild是null,则只需删除oldChild即可。 removeChild()--从节点的ChildNodes集合中删除removeChild指定的节点,如果删除成功,则返回删除的子节点。 appendChild()--添加一个新节点到childNodes集合的末尾,如果成功,则返回新节点。 cloneNode()--创建一个新的、复制的节点,并且如果传入的参数是true时,还将复制子节点,如果节点是一个元素,那么还将复制相应属性,返回新的节点。 为了在一棵文档树中访问或者建立一个新的节点,可以用下面这些方法: getElementById() getElementsByTagName() createElement() createAttribute() createTextNode() 注意:在一个页面中只有一个文档对象,除了getElementsByTagName()外,其它方法均只能通过document.methodName()调用。 再看一下下面这个例子: html head title/title /head body pThis is a sample paragraph./p SCRIPT LANGUAGE=JavaScript !-- alert(document.documentElement.lastChild.firstChild.tagName); //-- /SCRIPT /body /html 结果将会显示P,下面是一些解释 document.documentElement - gives the pages HTML tag. lastChild - gives the BODY tag. firstChild - gives the first element in the BODY. tagName - gives that elements tag name, P in this case. 另一个: html head title/title /head body pThis is a sample paragraph./p SCRIPT LANGUAGE=JavaScript !-- alert(document.documentElement.lastChild.firstChild.tagName); //-- /SCRIPT /body /html 这个例子和上面并没有什么大的区别,仅仅是多了一个空行,但是在NS中,会自动为空行加上一个节点所以返回值是undefined,而在IE中将跳过空行仍然指向P标签。 更常用的方法: p id=myParagraphThis is a sample paragraph./p ... alert(document.getElementById(myParagraph).tagName); 这种方法你不用关心节点在文档树的哪一个地方,而只要保证在页面中它的ID号是唯一的就可以了。 接下来一种访问元素节点的方法是document.getElementsByTagName(),它的返回值是一个数组,例如你可以通过下面的例子改变整个页面的连接： var nodeL