下载首页 | 资讯中心 | 下载分类 | 最近更新 | 排 行 榜 | 国产软件 | 国外软件 | 汉化补丁 |
文章搜索: 分类 关键字 收藏本站设为首页
您的位置:首页网页设计ASP程序 → XML 问题: 超越DOM(轻松使用 DOM 的技巧和诀窍)__教程
XML 问题: 超越DOM(轻松使用 DOM 的技巧和诀窍)__教程
日期:2007-5-9 18:51:29 人气:174     [ ]
上一页 [1] [2] [3] [4] [5] 下一页
  

Dethe Elza (delza@livingcode.org), 高级技术架构师, Blast Radius


    文档对象模型(Document Object Model,DOM)是用于操纵 XML 和 HTML 数据的最常用工具之一,然而它的潜力却很少被充分挖掘出来。通过利用 DOM 的优势,并使它更加易用,您将获得一款应用于 XML 应用程序(包括动态 Web 应用程序)的强大工具。

    本期文章介绍了一位客串的专栏作家,同时也是我的朋友和同事 Dethe Elza。Dethe 在利用 XML 进行 Web 应用程序开发方面经验丰富,在此,我要感谢他对我在介绍使用 DOM 和 ECMAScript 进行 XML 编程这一方面的帮助。请密切关注本专栏,以了解 Dethe 的更多专栏文章。
 —— David Mertz

    DOM 是处理 XML 和 HTML 的标准 API 之一。由于它占用内存大、速度慢,并且冗长,所以经常受到人们的指责。尽管如此,对于很多应用程序来说,它仍然是最佳选择,而且比 XML 的另一个主要 API —— SAX 无疑要简单得多。DOM 正逐渐出现在一些工具中,比如 Web 浏览器、SVG 浏览器、OpenOffice,等等。

    DOM 很好,因为它是一种标准,并且被广泛地实现,同时也内置到其他标准中。作为标准,它对数据的处理与编程语言无关(这可能是优点,也可能是缺点,但至少使我们处理数据的方式变得一致)。DOM 现在不仅内置于 Web 浏览器,而且也成为许多基于 XML 的规范的一部分。既然它已经成为您的工具的一部分,并且或许您偶尔还会使用它,我想现在应该充分利用它给我们带来的功能了。

    在使用 DOM 一段时间后,您会看到形成了一些模式 —— 您想要反复做的事情。快捷方式可以帮助您处理冗长的 DOM,并创建自解释的、优雅的代码。这里收集了一些我经常使用的技巧和诀窍,还有一些 javascript 示例。

insertAfter 和 prependChild

    第一个诀窍就是“没有诀窍”。DOM 有两种方法将孩子节点添加到容器节点(常常是一个 Element,也可能是一个 Document 或 Document Fragment):appendChild(node) 和 insertBefore(node, referenceNode)。看起来似乎缺少了什么。假如我想在一个参考节点后面插入或者由前新增(prepend)一个子节点(使新节点位于列表中的第一位),我该怎么做呢?很多年以来,我的解决方法是编写下列函数:

清单 1. 插入和由前新增的错误方法
function insertAfter(parent, node, referenceNode) {
    if(referenceNode.nextSibling) {
        parent.insertBefore(node, referenceNode.nextSibling);
    } else {
        parent.appendChild(node);
    }
}
function prependChild(parent, node) {
    if (parent.firstChild) {
        parent.insertBefore(node, parent.firstChild);
    } else {
        parent.appendChild(node);
    }
}
 
    实际上,像清单 1 一样,insertBefore() 函数已经被定义为,在参考节点为空时返回到 appendChild()。因此,您可以不使用上面的方法,而使用 清单 2 中的方法,或者跳过它们仅使用内置函数:

清单 2. 插入和由前新增的正确方法
function insertAfter(parent, node, referenceNode) {
    parent.insertBefore(node, referenceNode.nextSibling);
}
function prependChild(parent, node) {
    parent.insertBefore(node, parent.firstChild);
}
 
    如果您刚刚接触 DOM 编程,有必要指出的是,虽然您可以使多个指针指向一个节点,但该节点只能存在于 DOM 树中的一个位置。因此,如果您想将它插入到树中,没必要先将它从树中移除,因为它会自动被移除。当重新将节点排序时,这种机制很方便,仅需将节点插入到新位置即可。

    根据这种机制,若想交换两个相邻节点(称为 node1 和 node2)的位置,可以使用下列方案之一:

node1.parentNode.insertBefore(node2, node1);

node1.parentNode.insertBefore(node1.nextSibling, node1);

    还可以使用 DOM 做什么?

    Web 页面中大量应用了 DOM。若访问 bookmarklets 站点(参阅 参考资料),您会发现很多有创意的简短脚本,它们可以重新编排页面,提取链接,隐藏图片或 Flash 广告,等等。

出处:本站原创 作者:佚名
 阅读排行
01.精美qq空间横幅代码
02.最酷qq个性女生网名
03.最新又有免费QQ秀啦《..
04.巧用透明FlaSh扮靓你的..
05.花之神匠代码(最新代码..
06.最新QQ空间免费导航
07.最新免费个人形象设置..
08.最新qq空间flash代码m..
09.CSS技术结合图像实现动..
10.Photoshop光影魔术师:..
11.QQ音速种子狂刷
12.最新QQ空间透明代码
13.PS实例教程:教你制作结..
14.Photoshop光影魔术师:..
15.制作背景图__教程
16.用Photoshop制作漂亮的..
17.如何获得QQ音速种子
18.≤QQ空间代码≥在日志..
19.网页浮动广告的制作代..
20.用Photoshop制作大红灯..
21.常用CSS
22.Photoshop给靓丽美女打..
 推荐文章
·Photoshop 表现技法之..
·快速将你的相片矢量化..
·PHOTOSHOP制作炽热的太..
·用Photoshop制作美丽的..
·流行杀手的娃娃工厂__..
·打造8号台球__教程
·PHOTOSHOP制作待机MM图..
·用Photoshop帮MM做纹身..
·PHOTOSHOP美眉着色绝招..
·PHOTOSHOP花露的制作_..
·PHOTOSHOP渐变工具的巧..
·PHOTOSHOP手绘奥兰多-..
·高难度抠图两种方法__..
·Photoshop高尔夫球的制..
·Photoshop打造精美玉佩..
Eqxia_COM下载站 版权所有 Copyright© 2001-2005 Www.eqxia.COM, All Rights Reserved.