作者:Flyingis
DOM(The Document Object Model)将HTML转换为XML文档格式来表达,为动态HTML编程提供了一种优雅的解决方案。DOM编程可以使用多种语言(Java中可以使用SAX进行XML编程),不论大家使用何种服务器端技术,JavaScript的DOM基础编程还是需要掌握的,最常见的莫过于getElementById(),引用Prototype.js使用最多的也是$(""),但是要做好Web客户端设计,我们需要了解更多更细。
当前各种主流浏览器对DOM Level 1标准支持的相对较好,我们就来看看在JavaScript中如何玩转DOM Level 1。
众所周知,对于XML所有的节点都是Node类型,整个XML文档的根节点是一个Document,通过document.documentElement来获取根节点,特殊的是在IE5.5中返回的是body元素。除此之外还有其他各式各样的节点类型,下面列举几个常见的:
DocumentType:代表DTD的引用
Element:代表XML中的各种标签,并且是整个文档中唯一可以拥有属性的节点
Attr:节点属性的键-值对
Text:开始标签和结束标签之间的文本值
Comment:代表XML的注释节点
JavaScript中定义了12个常量来分别代表12种不同的节点类型,通过这些常量可以判断当前变量中的节点类型,这些节点拥有一系列的属性和方法,具体可以参考相关资料。需要说明的是编程中用NodeList表示Node的集合,NamedNodeMap表示Attribute的集合,在获取了节点、属性之后可以将节点、属性保存在NodeList、NameNodeMap中,如何获取节点、属性值在下面会谈到。顺便说一下,虽然各种主流浏览器均支持DOM,但支持程度不一,Mozilla在这方面做的是最好的,它支持DOM Level 1和Level 2的所有标准,包括DOM Level 3部分标准,但是鉴于IE在市场中的主流地位,很多时候我们都需要做多种考虑。举个例子:
//
标签中间是一空格
<
tag id
=
"
tagId
"
>
</
tag
>
![None.gif](/Images/OutliningIndicators/None.gif)
//
获取tag节点
var
tagId
=
document.getElementById(
"
tagId
"
);
//
在Mozilla中返回true,IE中返回false
alert(tagId.hasChildNodes());
获取属性
Element是所有节点中唯一拥有属性的节点,NamedNodeMap表示Node节点的属性,拥有以下方法:
getNamedItem(name)
removeNamedItem(name)
setNamedItem(node)
item(pos)
各种方法涉及的对象是属性节点名称,而不是属性值。另外,通过下列方法可以实现同样的功能:
getAttribute(name)
setAttribute(name, value)
removeAttribute(name)
获取节点
XML Node节点获取方式大家应该都非常熟悉了:
getElementsByTagName()
getElementsByName()
getElementsById()
getElementsByTagName("*")可以获取所有的Element,但是IE中,需要使用document.all来实现这个功能。IE6.0和Opera老版本的浏览器对于getElementsByName()的支持存在一些问题,一般不推荐使用。对于getElementsById("idVal"),如果Element的name和参数idVal匹配,会获得该Element。
创建和控制节点
create***一系列的方法以及appendChild()、removeChild()、replaceChild()、insertBefore()、createDocumentFragment(),提供了创建各种节点的功能,参考相关资料。
上面讨论是JavaScript对XML的操作,如果仅仅对HTML DOM进行操作,编程相对更为简单,如HTML元素的属性可以直接作为代码的属性:
<
img id
=
"
img
"
src
=
""
/>
![None.gif](/Images/OutliningIndicators/None.gif)
var
img
=
document.getElementBy(
"
img
"
);
//
设置图片的路径
img.setAttribute(
"
src
"
,
"
pic.gif
"
);
//
输出图片的路径,结果和上面设置的路径相同
alert(img.src);
同样需要我们注意的是,IE对setAttribute()支持的并不是很好,在大多数情况下,应该避免使用setAttribute()。
除此之外,在HTML DOM中还有一系列的方法用来操作table,这里不作详述,在自己现在设计的Web程序中已经没有使用了。
看来要用JavaScript玩转DOM Level 1不是件容易的事情,最主要的问题还是在不同浏览器的兼容性上,表现最为“突出”的是IE,现在IE7已经推出,但对于标准的兼容还是不尽如人意。经常在Java、C#、JavaScript各种不同语言中操作XML,一段时间过后就容易迷糊,我自己就是这样,上面将JavaScript相关的操作简单整理了一下,不是很详细,毕竟都是大家熟悉的东西,但是在使用的时候看看就知道具体该怎么处理了,实在不行就参考相关的书籍和电子文档吧。
写这些的时候办公室有人把电脑声音打开了看电视,还不停找话题和大家聊天,我戴上耳机也只能勉强用音乐挡住他放出的噪音,最鄙视这种人,和老板一个鼻孔出气,啥都不是但老板信任,没有办法,碰到这样的团队,不知道大家碰到这种情况是否和我一样戴上耳机?呵~
DOM(The Document Object Model)将HTML转换为XML文档格式来表达,为动态HTML编程提供了一种优雅的解决方案。DOM编程可以使用多种语言(Java中可以使用SAX进行XML编程),不论大家使用何种服务器端技术,JavaScript的DOM基础编程还是需要掌握的,最常见的莫过于getElementById(),引用Prototype.js使用最多的也是$(""),但是要做好Web客户端设计,我们需要了解更多更细。
当前各种主流浏览器对DOM Level 1标准支持的相对较好,我们就来看看在JavaScript中如何玩转DOM Level 1。
众所周知,对于XML所有的节点都是Node类型,整个XML文档的根节点是一个Document,通过document.documentElement来获取根节点,特殊的是在IE5.5中返回的是body元素。除此之外还有其他各式各样的节点类型,下面列举几个常见的:
DocumentType:代表DTD的引用
Element:代表XML中的各种标签,并且是整个文档中唯一可以拥有属性的节点
Attr:节点属性的键-值对
Text:开始标签和结束标签之间的文本值
Comment:代表XML的注释节点
JavaScript中定义了12个常量来分别代表12种不同的节点类型,通过这些常量可以判断当前变量中的节点类型,这些节点拥有一系列的属性和方法,具体可以参考相关资料。需要说明的是编程中用NodeList表示Node的集合,NamedNodeMap表示Attribute的集合,在获取了节点、属性之后可以将节点、属性保存在NodeList、NameNodeMap中,如何获取节点、属性值在下面会谈到。顺便说一下,虽然各种主流浏览器均支持DOM,但支持程度不一,Mozilla在这方面做的是最好的,它支持DOM Level 1和Level 2的所有标准,包括DOM Level 3部分标准,但是鉴于IE在市场中的主流地位,很多时候我们都需要做多种考虑。举个例子:
![None.gif](/Images/OutliningIndicators/None.gif)
![None.gif](/Images/OutliningIndicators/None.gif)
![None.gif](/Images/OutliningIndicators/None.gif)
![None.gif](/Images/OutliningIndicators/None.gif)
![None.gif](/Images/OutliningIndicators/None.gif)
![None.gif](/Images/OutliningIndicators/None.gif)
![None.gif](/Images/OutliningIndicators/None.gif)
获取属性
Element是所有节点中唯一拥有属性的节点,NamedNodeMap表示Node节点的属性,拥有以下方法:
getNamedItem(name)
removeNamedItem(name)
setNamedItem(node)
item(pos)
各种方法涉及的对象是属性节点名称,而不是属性值。另外,通过下列方法可以实现同样的功能:
getAttribute(name)
setAttribute(name, value)
removeAttribute(name)
获取节点
XML Node节点获取方式大家应该都非常熟悉了:
getElementsByTagName()
getElementsByName()
getElementsById()
getElementsByTagName("*")可以获取所有的Element,但是IE中,需要使用document.all来实现这个功能。IE6.0和Opera老版本的浏览器对于getElementsByName()的支持存在一些问题,一般不推荐使用。对于getElementsById("idVal"),如果Element的name和参数idVal匹配,会获得该Element。
创建和控制节点
create***一系列的方法以及appendChild()、removeChild()、replaceChild()、insertBefore()、createDocumentFragment(),提供了创建各种节点的功能,参考相关资料。
上面讨论是JavaScript对XML的操作,如果仅仅对HTML DOM进行操作,编程相对更为简单,如HTML元素的属性可以直接作为代码的属性:
![None.gif](/Images/OutliningIndicators/None.gif)
![None.gif](/Images/OutliningIndicators/None.gif)
![None.gif](/Images/OutliningIndicators/None.gif)
![None.gif](/Images/OutliningIndicators/None.gif)
![None.gif](/Images/OutliningIndicators/None.gif)
![None.gif](/Images/OutliningIndicators/None.gif)
![None.gif](/Images/OutliningIndicators/None.gif)
同样需要我们注意的是,IE对setAttribute()支持的并不是很好,在大多数情况下,应该避免使用setAttribute()。
除此之外,在HTML DOM中还有一系列的方法用来操作table,这里不作详述,在自己现在设计的Web程序中已经没有使用了。
看来要用JavaScript玩转DOM Level 1不是件容易的事情,最主要的问题还是在不同浏览器的兼容性上,表现最为“突出”的是IE,现在IE7已经推出,但对于标准的兼容还是不尽如人意。经常在Java、C#、JavaScript各种不同语言中操作XML,一段时间过后就容易迷糊,我自己就是这样,上面将JavaScript相关的操作简单整理了一下,不是很详细,毕竟都是大家熟悉的东西,但是在使用的时候看看就知道具体该怎么处理了,实在不行就参考相关的书籍和电子文档吧。
写这些的时候办公室有人把电脑声音打开了看电视,还不停找话题和大家聊天,我戴上耳机也只能勉强用音乐挡住他放出的噪音,最鄙视这种人,和老板一个鼻孔出气,啥都不是但老板信任,没有办法,碰到这样的团队,不知道大家碰到这种情况是否和我一样戴上耳机?呵~