DOM知识的翻译与整理

1、 DOM知识的翻译与整理 先来看一张简单的文档树很明显树的顶层节点是NodeA节点,接下来可以通过指定的合适节点移动到树中的任何点,结合以下的代码你可以更好的了解这棵树节点间的相互关系:NodeA.firstChild = NodeA1 NodeA.lastChild = NodeA3 NodeA.childNodes.length = 3 NodeA.childNodes0 = NodeA1 NodeA.childNodes1 = NodeA2 NodeA.childNodes2 = NodeA3 NodeA1.parentNode = NodeA NodeA1.nextSibling =

2、NodeA2 NodeA3.prevSibling = NodeA2 NodeA3.nextSibling = null NodeA.lastChild.firstChild = NodeA3a NodeA3b.parentNode.parentNode = NodeA DOM定义对操作一个文档对象的节点结构提供了实用的方法,它提供了像执行对象插入,更新,删除,克隆等这些常用的方法insertBefore()-在参考子节点之前插入一个新的子节点.如果参考的子节点为null,则新的子节点将作为调用节点的最后一个子节点插入replaceChild()-在childNodes集合种使用指定的newC

3、hild来代替oldChild;如果代替成功,则返回oldChild;如果newChild是null,则只需删除oldChild即可 removeChild()-从节点的ChildNodes集合中删除removeChild指定的节点,如果删除成功,则返回删除的子节点 appendChild()-添加一个新节点到childNodes集合的末尾,如果成功,则返回新节点 cloneNode()-创建一个新的、复制的节点,并且如果传入的参数是true时,还将复制子节点,如果节点是一个元素,那么还将复制相应属性,返回新的节点 为了在一棵文档树中访问或者建立一个新的节点,可以用下面这些方法:getElem

4、entById()getElementsByTagName()createElement()createAttribute()createTextNode()注意:在一个页面中只有一个文档对象,除了getElementsByTagName()外,其它方法均只能通过document.methodName()调用. 再看一下下面这个例子:This is a sample paragraph.结果将会显示P,下面是一些解释document.documentElement - gives the pages HTML tag. lastChild - gives the BODY tag. first

5、Child - gives the first element in the BODY. tagName - gives that elements tag name, P in this case.另一个: This is a sample paragraph.这个例子和上面并没有什么大的区别,仅仅是多了一个空行,但是在NS中,会自动为空行加上一个节点所以返回值是undefined,而在IE中将跳过空行仍然指向P标签 更常用的方法:This is a sample paragraph. . alert(document.getElementById(myParagraph).tagName)

6、;这种方法你不用关心节点在文档树的哪一个地方,而只要保证在页面中它的ID号是唯一的就可以了 接下来一种访问元素节点的方法是document.getElementsByTagName(),它的返回值是一个数组,例如你可以通过下面的例子改变整个页面的连接var nodeList = document.getElementsByTagName(A);for (var i = 0; i nodeList.length; i+)nodeListi.style.color = #ff0000; attribute和attributesattribute对象和元素相关,但是却没有被认为是文档树的一部分,因此

7、属性不能作为子节点集合的一部分来使用.有三种方法可以为元素建立新的属性1.var attr = document.createAttribute(myAttribute);attr.value = myValue;var el = document.getElementById(myParagraph);el.setAttributeNode(attr);2.var el = document.getElementById(myParagraph);el.setAttribute(myAttribute, myValue);3.var el = document.getElementById(

8、myParagraph);el.myAttribute = myValue;你可以在html标签种定义自己的属性:This is a sample paragraph. . alert(document.getElementById(myParagraph).getAttribute(myAttribute);返回值将是myValue.但是请注意这里必须使用getAttribute,而不是AttributeName,因为有一些浏览器并不支持自定义属性 attributes也可以被轻易的从一个元素中删除,你可以使用removeAttribute()或者将element.attributeName

9、指向一个null值.通过attributes我们就可以产生一些动态效果：Text in a paragraph element. . code for the links . document.getElementById(sample1).setAttribute(align, left);document.getElementById(sample1).setAttribute(align, right);另一种:Text in a paragraphelement. . code for the links . document.getElementById(sample2).style

10、.textAlign = left;document.getElementById(sample2).style.textAlign = right;跟上面的例子一样,展示了可用通过元素修改style中的属性,甚至是class中的.唯一要提到的是textAlign是从 style中的text-align中演变而来的,有一条基本规律,就是style中的属性如果出现-则在dom中将会被去掉并且随后的一个字母将改为大写,还有一点就是如果即使元素中没有style属性,上述例子同样可以使用 text nodes:先看一下例子This is the initial text. . code for the

11、 links . document.getElementById(sample1).firstChild.nodeValue =Once upon a time.;document.getElementById(sample1).firstChild.nodeValue =.in a galaxy far, far away;首先text nodes并没有像elements那样具有id属性,所有它并不能直接通过document.getElementById()或者document.getElementsByTagName()访问看一下下面的结构也许会更明白一些可以看出通过document.ge

12、tElementById(sample1).firstChild.nodeValue就可以读取或者设置text nodes的值了 另一个更加复杂一点的例子This is the initial text.它的文档结构在这里通过document.getElementById(sample1).firstChild.nodeValue讲仅仅改变This is the而initial text.将不会改变.在这里大家应该看到了它和innerHTML的不同了.当然你也可以这样用document.getElementById(sample3).firstChild.nodeValue =Once upo

13、n a time.;document.getElementById(sample3).firstChild.nodeValue =.in a galaxy far, far away;其中的html代码将不会被解释,浏览器将把他们当成普通的文本来显示 创建和删除text nodes:var myTextNode = document.createTextNode(my text);通过上面的代码你可以创建一个新的text node,但是它并不是文档树的一部分,要让它显示在页面上就必须让它成为文档树中某一个节点的child,因为text nodes不能有儿子,所以你不能将它加入到一个text n

14、odes中,attribute也不属于文档树的一部分,这条路也不行,现在只剩下elements nodes了,以下的例子展示了如何添加和删除一个text nodeInitial text within a paragraph element. . code to add a text node . var text = document.createTextNode( new text + (+counter1);var el = document.getElementById(sample1);el.appendChild(text); . code to remove the last c

15、hild node . var el = document.getElementById(sample1);if (el.hasChildNodes()el.removeChild(el.lastChild);增加文本是很容易的,上面的代码建立了一个新的text node并且通过appendChild()方法将其加入到childNodes数组的末尾,并设置了一个counter1的全局变量,利于观察hasChildNodes()的返回值是true or false;用来判断当前节点是否还有child,以阻止当其没有child的时候调用removeChild()产生的错误 创建element no

16、des有了上面的基础,应该更容易理解了,先看一下下面的代码This text is in a DIV element. . code for the link . var paraEl, boldEl; paraEl = document.createElement(p);boldEl = document.createElement(b);paraEl.appendChild(document.createTextNode(This is a new paragraph with );boldEl.appendChild(document.createTextNode(bold);paraEl.appendChild(boldEl);paraEl.appendChild(document.createTextNode( text added to the DIV);docume