先来看一张简单的文档树
很明显树的顶层节点是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()调用。
再看一下下面这个例子:
this is a sample paragraph.
结果将会显示p,下面是一些解释
document.documentelement - gives the page's html tag.
lastchild - gives the body tag.
firstchild - gives the first element in the body.
tagname - gives that element's 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);
这种方法你不用关心节点在文档树的哪一个地方,而只要保证在页面中它的id号是唯一的就可以了。
接下来一种访问元素节点的方法是document.getelementsbytagname(),它的返回值是一个数组,例如你可以通过下面的例子改变整个页面的连接：
var nodelist = document.getelementsbytagname(a);
for (var i = 0; i nodelist[i].style.color = #ff0000;
attribute和attributes
attribute对象和元素相关,但是却没有被认为是文档树的一部分,因此属性不能作为子节点集合的一部分来使用。
有三种方法可以为元素建立新的属性
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(myparagraph);
el.myattribute = myvalue;
你可以在html标签种定义自己的属性:
this is a sample paragraph.
...
alert(document.getelementbyid(myparagraph).getattribute(myattribute));
返回值将是myvalue.但是请注意这里必须使用getattribute,而不是attributename,因为有一些浏览器并不支持自定义属性。
attributes也可以被轻易的从一个元素中删除,你可以使用removeattribute()或者将element.attributename指向一个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 paragraph
element.
... code for the links ...
document.getelementbyid('sample2').style.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 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.getelementbyid('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 upon 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 nodes中,attribute也不属于文档树的一部分,这条路也不行,现在只剩下elements nodes
了,以下的例子展示了如何添加和删除一个text node：
initial 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 child 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 nodes
有了上面的基础,应该更容易理解了,先看一下下面的代码
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));
document.getelementbyid(sample1).appendchild(parael);
你还可以直接为新加的element nodes设置attribute,以下两种都可以:
boldel.style.color = #ffff00;
parael.appendchild(boldel);
或者:
parael.appendchild(boldel);
boldel.style.color = #ffff00;