掌握 Ajax

lastwinner · 发表于 2006-7-2 23:08

代码运行完成后，图片将从页面中实时删除，如图 3 所示。
图 3. 使用 JavaScript 实时删除图像

lastwinner · 发表于 2006-7-2 23:08

API 设计问题
再看一看各种节点提供的属性和方法。对于那些熟悉面向对象（OO）编程的人来说，它们说明了 DOM 的一个重要特点：DOM 并非完全面向对象的 API。首先，很多情况下要直接使用对象的属性而不是调用节点对象的方法。比方说，没有 getNodeName() 方法，而要直接使用 nodeName 属性。因此节点对象（以及其他 DOM 对象）通过属性而不是函数公开了大量数据。
其次，如果习惯于使用重载对象和面向对象的 API，特别是 Java 和 C++ 这样的语言，就会发现 DOM 中的对象和方法命名有点奇怪。DOM 必须能用于 C、Java 和 JavaScript（这只是其中的几种语言），因此 API 设计作了一些折衷。比如，NamedNodeMap 方法有两种不同的形式：

getNamedItem(String name)
getNamedItemNS(Node node)

对于 OO 程序员来说这看起来非常奇怪。两个方法目的相同，只不过一个使用 String 参数而另一个使用 Node 参数。多数 OO API 中对这两种版本都会使用相同的方法名。运行代码的虚拟机将根据传递给方法的对象类型决定运行哪个方法。
问题在于 JavaScript 不支持这种称为方法重载 的技术。换句话说，JavaScript 要求每个方法或函数使用不同的名称。因此，如果有了一个名为 getNamedItem() 的接受字符串参数的方法，就不能再有另一个方法或函数也命名为 getNamedItem()，即使这个方法的参数类型不同（或者完全不同的一组参数）。如果这样做，JavaScript 将报告错误，代码不会按照预期的方式执行。
从根本上说，DOM 有意识地避开了方法重载和其他 OO 编程技术。这是为了保证该 API 能够用于多种语言，包括那些不支持 OO 编程技术的语言。后果不过是要求您多记住一些方法名而已。好处是可以在任何语言中学习 DOM，比如 Java，并清楚同样的方法名和编码结构也能用于具有 DOM 实现的其他语言，如 JavaScript。

lastwinner · 发表于 2006-7-2 23:09

让程序员小心谨慎

如果深入研究 API 设计或者仅仅非常关注 API 设计，您可能会问：“为何节点类型的属性不能适用于所有节点？” 这是一个很好的问题，问题的答案与政治及决策关系更密切，而非技术原因。简单地说，答案就是，“谁知道！但有点令人恼火，不是吗？”

属性 nodeName 意味着允许每种类型的节点都有一个名字，但是很多情况下名字要么未定义，要么是对于程序员没有意义的内部名（比如在 Java 中，很多情况下文本节点的 nodeName 被报告为 “#text”）。从根本上说，必须假设您得自己来处理错误。直接访问 myNode.nodeName 然后使用该值是危险的，很多情况下这个值为空。因此与通常的编程一样，程序员要谨慎从事。

lastwinner · 发表于 2006-7-2 23:10

通用节点类型
现在已经介绍了 DOM 节点的一些特性和属性（以及一些奇特的地方），下面开始讲述您将用到的一些特殊节点类型。多数 Web 应用程序中只用到四种节点类型：

文档节点表示整个 HTML 文档。
元素节点表示 HTML 元素，如 a 或 img。
属性节点表示 HTML 元素的属性，如 href（a 元素）或 src（img 元素）。
文本节点表示 HTML 文档中的文本，如 “Click on the link below for a complete set list”。这是出现在 p、a 或 h2 这些元素中的文字。

处理 HTML 时，95% 的时间是跟这些节点类型打交道。因此本文的其余部分将详细讨论这些节点。（将来讨论 XML 的时候将介绍其他一些节点类型。）

lastwinner · 发表于 2006-7-2 23:10

文档节点

基本上所有基于 DOM 的代码中都要用到的第一个节点类型是文档节点。文档节点实际上并不是 HTML（或 XML）页面中的一个元素而是页面本身。因此在 HTML Web 页面中，文档节点就是整个 DOM 树。在 JavaScript 中，可以使用关键字 document 访问文档节点：

[php]
// These first two lines get the DOM tree for the current Web page,
// and then the <html> element for that DOM tree
var myDocument = document;
var htmlElement = myDocument.documentElement;
........
[/php]

JavaScript 中的 document 关键字返回当前网页的 DOM 树。从这里可以开始处理树中的所有节点。

lastwinner · 发表于 2006-7-2 23:11

也可使用 document 对象创建新节点，如下所示：

createElement(elementName) 使用给定的名称创建一个元素。
createTextNode(text) 使用提供的文本创建一个新的文本节点。
createAttribute(attributeName) 用提供的名称创建一个新属性。

这里的关键在于这些方法创建节点，但是并没有将其附加或者插入到特定的文档中。因此，必须使用前面所述的方法如 insertBefore() 或 appendChild() 来完成这一步。因此，可使用下面的代码创建新元素并将其添加到文档中：
[php]
var pElement = myDocument.createElement("p"

;
var text = myDocument.createTextNode("Here's some text in a p element."

;
pElement.appendChild(text);
bodyElement.appendChild(pElement);
..........
[/php]
一旦使用 document 元素获得对 Web 页面 DOM 树的访问，就可以直接使用元素、属性和文本了。

lastwinner · 发表于 2006-7-2 23:11

元素节点
虽然会大量使用元素节点，但很多需要对元素执行的操作都是所有节点共有的方法和属性，而不是元素特有的方法和属性。元素只有两组专有的方法：

1. 与属性处理有关的方法：

getAttribute(name) 返回名为 name 的属性值。
removeAttribute(name) 删除名为 name 的属性。
setAttribute(name, value) 创建一个名为 name 的属性并将其值设为 value。
getAttributeNode(name) 返回名为 name 的属性节点（属性节点在下一节介绍）。
removeAttributeNode(node) 删除与指定节点匹配的属性节点。

2.与查找嵌套元素有关的方法：

getElementsByTagName(elementName) 返回具有指定名称的元素节点列表。

这些方法意义都很清楚，但还是来看几个例子吧。

lastwinner · 发表于 2006-7-2 23:14

处理属性

处理元素很简单，比如可用 document 对象和上述方法创建一个新的 img 元素：
[php]
var imgElement = document.createElement("img"

;
imgElement.setAttribute("src", "http://www.headfirstlabs.com/Images/hraj_cover-150.jpg"

;
imgElement.setAttribute("width", "130"

;
imgElement.setAttribute("height", "150"

;
bodyElement.appendChild(imgElement);
.......
[/php]
现在看起来应该非常简单了。实际上，只要理解了节点的概念并知道有哪些方法可用，就会发现在 Web 页面和 JavaScript 代码中处理 DOM 非常简单。在上述代码中，JavaScript 创建了一个新的 img 元素，设置了一些属性然后添加到 HTML 页面的 body 元素中。

lastwinner · 发表于 2006-7-2 23:14

查找嵌套元素

发现嵌套的元素很容易。比如，下面的代码用于发现和删除清单 3 所示 HTML 页面中的所有 img 元素：

[php]
   // Remove all the top-level <img> elements in the body
   if (bodyElement.hasChildNodes()) {
      for (i=0; i<bodyElement.childNodes.length; i++) {
      var currentNode = bodyElement.childNodes;
      if (currentNode.nodeName.toLowerCase() == "img" {
         bodyElement.removeChild(currentNode);
      }
      }
   }
.........
[/php]

lastwinner · 发表于 2006-7-2 23:15

也可以使用 getElementsByTagName() 完成类似的功能：

[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;
      bodyElement.removeChild(imgElement);
   }

.....
[/php]

[转载] 掌握 Ajax