HTML DOM 精简知识教程

======================================================
注：本文源代码点此下载
======================================================

本文转自--蓝色理想

http://www.blueidea.com/tech/web/2003/1370.asp

dom 精简知识教程

作者:mmkk 时间: 2003-12-01 文档类型:原创 来自:蓝色理想

浏览统计 total:18676 | year:9235 | quarter:1795 | month:943 | week:205 | today:13

先来看一张简单的文档树

很明显树的顶层节点是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.

这个例子和上面并没有什么大的区别,仅仅是多了一个空行,但是在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

可以看出通过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";

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

欢迎大家到我们论坛中讨论=》http://www.blueidea.com/bbs/list.asp?groupname=dreamweaver+%26+javascript%d7%a8%c0%b8

出处:蓝色理想

责任编辑:panliu888

======================================================
在最后，我邀请大家参加新浪APP，就是新浪免费送大家的一个空间，支持PHP+MySql，免费二级域名，免费域名绑定 这个是我邀请的地址，您通过这个链接注册即为我的好友，并获赠云豆500个，价值5元哦！短网址是http://t.cn/SXOiLh我创建的小站每天访客已经达到2000+了，每天挂广告赚50+元哦，呵呵，饭钱不愁了，\(^o^)/