利用DOM理解和操作HTML

w3b

标题：
学习笔记:利用DOM理解和操作HTML
作者：
猪飞飞
Url:
http://www.duoluo.com/webdream/dlog/showlog.asp?log_id=484&cat_id=26
日期: 2006-3-27
学习笔记:利用DOM理解和操作HTML
学习笔记:利用DOM理解和操作HTML
前天晚上应一个同学的要求,做一个类似AJAX功能的页面,要求是:根据后台信息,在页面上实时插入一个图层(带背景图片和上层文字),从页面左边滑到右边,然后消失.期间插入的图层并不是一个个来,有可能一个没走到头,另一个又出来了.
面对这种情况,我想到最合适的应该是根据DOM来处理.觉得用以往熟知的document.getElementById("xxx").innerHTMl=""这样的方式来整,处理有点麻烦.
因为要求图层从左边滑到右边然后消失,如过仅用display=none等的方式来隐藏它,或者不隐藏,取消横向滚动条也行.不清楚IE执行html时,是如何存储页面以及页面上动态生成的内容,是在内存还是在临时文件夹?不管怎样,在页面长期运行的情况下,这个页面的html代码都会越来越多.所以最好是当层移动到右边以后,删除它!想到根据DOM来理解HTML,在某个容器内增加一个层节点,让它完成从左到右的移动,然后删除该节点,是最简单又容易理解的方式.
但是自己对DOM只是概念上的理解,具体如何操作,还是非常不熟练,(以前写过获取RSS并显示的代码,不过都忘光了).
赶紧上网搜索DOM的相关教程,找到一篇"
AJAX开发简略 (第二部分)
".其中有根据DOM处理HTML的详细教程,当然还有ajax开发介绍和dom处理html的教程,但是我现在需要的是前者.仔细阅读了以后,立刻开始我的DOM+HTML实践,发现真的是很实用.
罗里罗嗦的,一开始只是想写一点自己前天晚上劳累的学习笔记,一看已经写了这么多了,:(,其实最简单的方式是把上述教程转贴过来,大家一看就明白了.可是上述链接已经是不知道多少次转贴了,我想还是自己在整理整理,选我最有收获的部分来"转贴"-----或者叫剽窃拽改啦.
以下是学习笔记
首先是了解DOM--文档对象模型
在此,直说DOM眼中的HTML,HTML是树形结构的:

其中document是指整个文档,所以我们每次都需要document.getElement ... ... 别的就很清楚了,用馒头血案里面的话来说HTML像不像是圈圈套圈圈娱乐城??哈哈!!刚才没想到这个说法,我画的是框框套框框:D
HTML文档对象中的节点
节点有六种类型:element,text,document,comment,documentfragment,attr
这里指提三种最常用的element,text,document,他们之间关系象下面这个框框套框框:

我们处理最多的应该是body里的内容,根据现在最推荐的div+css设计页面,body里出现最多的,,,,等,这些就是element对象;而象XXXXXXXX里的XXXXXXX就是text对象;document对象是大框框,但是在功能上我觉得,如果把element比作部门,text比作员工,那document就是老板-----在用JAVASCRIPT处理html时,就是通过document生成一个element或买进一个text,然后再把它插入到某个element,唉,比喻好像不太生动,认真体会,大概就是这回事了吧.... :( 具体到后面通过dom用JS语句操作html才能比较直观的理解吧.
操作DOM对象的节点
以上了解了html里面各个标记和其间内容,都可以看作一个节点,以下掌握如何对这些节点进行操作.但是,
想来想去,对DOM对象的节点进行操作,如果全面一点记,那还是不如转载"[url=
http://dev2dev.bea.com.cn/bbsdoc/20051114125.html
]",还是总结一下,根据具体应用来说.对于一个节点,我们做的是找到它,然后摆弄它.
1.找节点--确切点应该是定位节点:
用JS处理html时,找DOM里的对象,最常用的可能就是document.getelementById("MyId")了.因为ID应该是个唯一的属性,这样就是指明道姓的查找,找到一个叫MyId的,那就是它了!
也可以用document.all("MyId")来找它!如果MyId是唯一的话,结果是一样的.但是就跟人一样,ID也可以出现重名,这个时候,用document.all("MyId")查找出来是一个名字叫"MyId"的集合,其中对叫"MyId"的"人"根据他出现的前后进行了编号.此时,再要找某个具体的人,具体语句是:document.all.item("MyID",0),其中0代表第一个,往后递增.补充:用document.all.MyId的结果和document.all("MyId")是一样的.
另外还有document.getElementsByTagName(),但是我没用过,好像应该是document.getElementsByTags().
这一点说这么多,其实远远不够,刚才为了证实,查看了HTMLREF.CHM中的"Scripting with Elements and Collections",发现其中有很多灵活的运用的.设计的时候可以根据掌握的知识对JS和HTML进行合理的搭配.
另外,根据上述的语句,document象不像老板?要找谁的时候都是document点然后啥啥的,就像老板发话:那个谁谁谁???!!!
2.摆弄节点--具体的操作实在太多,记不全了
要全面的话,篇幅实在太长,只能就我目前应用的范围内记录:
在我的应用里:找到一个节点(某个div),给他增加一个字节点(内嵌div),子几点的背景(用css来实现),子节点的内容(text节点),然后让子节点活动一番(从左移到右),最后删除该子几点.
找到的节点,不管是element还是text,不管他们的标签是还是,他们有个共同的概念,就是叫Node,他们有上级和下级:parentNode,childNode,还有自己的属性Attribute,关于这些上下级以及属性,到具体应用的时候,还是需要去看上述教材里全面的资料.
这里,就整理一个函数:manageNode()
程序代码:
funciont manageNode(text,NodeClass){
//找到节点,该节点是父节点
var baba = document.getElementById("baba");
//创建一个div子节点,此节点对象是element
var div = document.createElement("div");
//给这个子节点设置class属性,另外设置id属性是用div.id="xxx",别的属性应该用div.setAttribute=...来设置
div.className = NodeClass;
//创建一个text子节点
var text = document.createTextNode(dnumber);
//在div下扩展一个子节点,就是上面创建的text子节点;或者说,把text插到div之下.
div.appendChild(text);
//同上,再把div插到
baba.appendChild(div);
//对div子节点应用一些操作,比如在页面里漂移或闪烁什么的
somefunction(div)
//找到div的老爸,然后删除它叫做div的那个儿子.
div.parentNode.removeChild(div);
}
具体实现后的页面:
http://www.duoluo.com/temp/web2006.htm

通过前天晚上到现在的学习和总结:
1.是具体应用具体学习,边学边用,收货最大
2.与1矛盾一点,需要掌握好基础知识,比如DOM结构的理解,Javascript语法,当然这些知识也是在边学边用中总结
3.唉,罗嗦,天天学习,好好向上,再学再用.....


本文来自ChinaUnix博客，如果查看原文请点：http://blog.chinaunix.net/u/17944/showart_103773.html