上一篇：细品DW MX 2004内建FW技术 >>

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>
<p>this is a sample paragraph.</p>
<script language="javascript">

</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>

<p>this is a sample paragraph.</p>
<script language="javascript">

</script>
</body>
</html>
这个例子和上面并没有什么大的区别,仅仅是多了一个空行,但是在ns中,会自动为空行加上一个节点所以返回值是"undefined",而在ie中将跳过空行仍然指向p标签。

更常用的方法:
<p id="myparagraph">this is a sample paragraph.</p>
...
alert(document.getelementbyid("myparagraph").tagname);
这种方法你不用关心节点在文档树的哪一个地方,而只要保证在页面中它的id号是唯一的就可以了。

接下来一种访问元素节点的方法是document.getelementsbytagname(),它的返回值是一个数组,例如你可以通过下面的例子改变整个页面的连接：
var nodelist = document.getelementsbytagname("a");
for (var i = 0; i < nodelist.length; 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标签种定义自己的属性:
<p id="myparagraph" myattribute="myvalue">this is a sample paragraph.</p>
...
alert(document.getelementbyid("myparagraph").getattribute("myattribute"));
返回值将是"myvalue".但是请注意这里必须使用getattribute,而不是attributename,因为有一些浏览器并不支持自定义属性。

attributes也可以被轻易的从一个元素中删除,你可以使用removeattribute()或者将element.attributename指向一个null值。
通过attributes我们就可以产生一些动态效果：
<p id="sample1" align="left">text in a paragraph element.</p>
... code for the links ...
document.getelementbyid(sample1).setattribute(align, left);
document.getelementbyid(sample1).setattribute(align, right);
另一种:
<p id="sample2" style="text-align:left;">text in a paragraph
element.</p>
... 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:
先看一下例子：
<p id="sample1">this is the initial text.</p>
... 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的值了。

另一个更加复杂一点的例子：
<p id="sample2">this is the <b>initial</b> text.</p>
它的文档结构

在这里通过document.getelementbyid(sample1).firstchild.nodevalue讲仅仅改变"this is the"
而initial text.将不会改变.在这里大家应该看到了它和innerhtml的不同了.当然你也可以这样用：
document.getelementbyid(sample3).firstchild.nodevalue =
<b>once</b> upon a time...;
document.getelementbyid(sample3).firstchild.nodevalue =
...in a galaxy <i>far, far</i> away;
其中的html代码将不会被解释,浏览器将把他们当成普通的文本来显示。

创建和删除text nodes:
var mytextnode = document.createtextnode("my text");
通过上面的代码你可以创建一个新的text node,但是它并不是文档树的一部分,要让它显示在页面上就必须让它成为文档树中某一个节点的child,因为
text nodes不能有儿子,所以你不能将它加入到一个text nodes中,attribute也不属于文档树的一部分,这条路也不行,现在只剩下elements nodes
了,以下的例子展示了如何添加和删除一个text node：
<p id="sample1">initial text within a paragraph element.</p>
... 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
有了上面的基础,应该更容易理解了,先看一下下面的代码
<div id="sample1">this text is in a div element.</div>
... 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";

注:此文主要来自于一些英文资料和身边的一些参考书,如果有错误大家请指出,一起讨论,dom我一点也不熟。

（）

返回顶部

下一篇：优化你的网站--三大网页辅助工具简介 >>