[php]
// Remove all the top-level <img> elements in the body
var imgElements = bodyElement.getElementsByTagName("img";
for (i=0; i<imgElements.length; i++) {
var imgElement = imgElements.item;
// Print out some information about this element
var msg = "Found an img element!";
var atts = imgElement.attributes;
for (j=0; j<atts.length; j++) {
var att = atts.item(j);
msg = msg + "\n " + att.nodeName + ": '" + att.nodeValue + "'";
}
alert(msg);
对于 DOM 来说属性有一些特殊的地方。一方面，属性实际上并不像其他元素或文本那样是元素的孩子，换句话说，属性并不出现在元素 “之下”。同时，属性显然和元素有一定的关系，元素 “拥有” 属性。DOM 使用节点表示属性，并允许通过元素的专门列表来访问属性。因此属性是 DOM 树的一部分，但通常不出现在树中。有理由说，属性和 DOM 树结构其他部分之间的关系有点模糊。
——————————————————————————————
文本节点
需要考虑的最后一种节点是文本节点（至少在处理 HTML DOM 树的时候如此）。基本上通常用于处理文本节点的所有属性都属于节点对象。实际上，一般使用 nodeValue 属性来访问文本节点的文本，如下所示：
[php]
var pElements = bodyElement.getElementsByTagName("p";
for (i=0; i<pElements.length; i++) {
var pElement = pElements.item(i);
var text = pElement.firstChild.nodeValue;
alert(text);
}
......
[/php]
少数其他几种方法是专门用于文本节点的。这些方法用于增加或分解节点中的数据：
可使用 nodeType 属性比较节点和上述常量 —— 该属性定义在 DOM node 类型上因此可用于所有节点，如下所示：
[php]
var someNode = document.documentElement.firstChild;
if (someNode.nodeType == Node.ELEMENT_NODE) {
alert("We've found an element node named " + someNode.nodeName);
} else if (someNode.nodeType == Node.TEXT_NODE) {
alert("It's a text node; the text is " + someNode.nodeValue);
} else if (someNode.nodeType == Node.ATTRIBUTE_NODE) {
alert("It's an attribute named " + someNode.nodeName
+ " with a value of '" + someNode.nodeValue + "'";
}
...........
[/php]
这个例子非常简单，但说明了一个大问题：得到节点的类型非常 简单。更有挑战性的是知道节点的类型之后确定能做什么，只要掌握了节点、文本、属性和元素类型提供了什么属性和方法，就可以自己进行 DOM 编程了。
实践中的挫折
nodeType 属性似乎是使用节点的一个入场券 —— 允许确定要处理的节点类型然后编写处理该节点的代码。问题在于上述 Node 常量定义不能正确地用于 Internet Explorer。因此如果在代码中使用 Node.ELEMENT_NODE、Node.TEXT_NODE 或其他任何常量，Internet Explorer 都将返回如 图 4 所示的错误。 图 4. Internet Explorer 报告错误
任何时候在 JavaScript 中使用 Node 常量，Internet Explorer 都会报错。因为多数人仍然在使用 Internet Explorer，应该避免在代码中使用 Node.ELEMENT_NODE 或 Node.TEXT_NODE 这样的构造。尽管据说即将发布的新版本 Internet Explorer 7.0 将解决这个问题，但是在 Internet Explorer 6.x 退出舞台之前仍然要很多年。因此应避免使用 Node，要想让您的 DOM 代码（和 Ajax 应用程序）能用于所有主要浏览器，这一点很重要。
如果您准备了解甚至掌握 DOM，您就会成为最顶尖的 Web 编程人员。多数 Web 程序员知道如何使用 JavaScript 编写图像滚动或者从表单中提取值，有些甚至能够向服务器发送请求和接收响应（阅读本系列的前几篇文章之后您也能做到）。但胆小鬼或者没有经验的人不可能做到即时修改网页结构。
———————————————————————————— 结束语
在本系列的上几期文章中您已经学习了很多。现在，您不 应该再坐等下一篇文章期待我介绍各种聪明的 DOM 树用法。现在的家庭作业是看看如何使用 DOM 创造出富有想像力的效果或者漂亮的界面。利用近几期文章中所学的知识开始实验和练习。看看能否建立感觉更与桌面应用程序接近的网站，对象能够响应用户的动作在屏幕上移动。
最好在屏幕上为每个对象画一个边界，这样就能看到 DOM 树中的对象在何处，然后再移动对象。创建节点并将其添加到已有的孩子列表中，删除没有嵌套节点的空节点，改变节点的 CSS 样式，看看孩子节点是否会继承这些修改。可能性是无限的，每当尝试一些新东西时，就学到了一些新的知识。尽情地修改您的网页吧！
在 DOM 三部曲的最后一期文章中，我将 介绍如何把一些非常棒的有趣的 DOM 应用结合到编程中。我将不再是从概念上说教和解释 API，而会提供一些代码。在此之前先发挥您自己的聪明才智，看看能做些什么。
James Snell 撰写的 使用 AJAX 调用 SOAP Web 服务，第 1 部分: 构建 Web 服务客户机：这篇高级文章介绍了如何将 Ajax 与现有的基于 SOAP 的 Web 服务结合起来，说明了如何使用 Ajax 设计模式实现基于 Web 浏览器的 SOAP Web 服务客户机（developerWorks，2005 年 10 月）。
楼主: lastwinner
IP卡
狗仔卡
楼主
;
显身卡