📄 掌握 ajax，第 5 部分 操纵 dom.htm
字号:
// After <head> is <body>
var bodyElement = headElement.nextSibling;
while (bodyElement.nodeName.toLowerCase() != "body") {
bodyElement = bodyElement.nextSibling;
}
// We found the <body> element...
// 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[i];
if (currentNode.nodeName.toLowerCase() == "img") {
bodyElement.removeChild(currentNode);
}
}
}
}
}
</script>
</head>
<body>
<p>JavaScript and DOM are a perfect match.
You can read more in <i>Head Rush Ajax</i>.</p>
<img src="http://www.headfirstlabs.com/Images/hraj_cover-150.jpg" />
<input type="button" value="Test me!" onClick="test();" />
</body>
</html>
</PRE></TD></TR></TBODY></TABLE><BR>
<P>将该页面加载到浏览器后，可以看到类似 <A
href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro5/#fig1">图
1</A> 所示的画面。</P><BR><BR><A name=fig1><B>图 1. 用按钮运行 JavaScript 的 HTML
页面</B></A><BR><IMG height=375 alt="用按钮运行 JavaScript 的 HTML 页面"
src="掌握 Ajax，第 5 部分 操纵 DOM.files/test-1.jpg" width=418> <BR>
<P>单击 <B>Test me!</B> 将看到 <A
href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro5/#fig2">图
2</A> 所示的警告框。</P><BR><BR><A name=fig2><B>图 2. 使用 nodeValue
显示元素名的警告框</B></A><BR><IMG height=375 alt="使用 nodeValue 显示元素名的警告框"
src="掌握 Ajax，第 5 部分 操纵 DOM.files/test-2.jpg" width=492> <BR>
<P>代码运行完成后，图片将从页面中实时删除，如 <A
href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro5/#fig3">图
3</A> 所示。</P><BR><BR><A name=fig3><B>图 3. 使用 JavaScript
实时删除图像</B></A><BR><IMG height=376 alt="使用 JavaScript 实时删除图像"
src="掌握 Ajax，第 5 部分 操纵 DOM.files/test-3.jpg" width=422> <BR><BR>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD><IMG height=1 alt=""
src="掌握 Ajax，第 5 部分 操纵 DOM.files/blue_rule.gif"
width="100%"><BR><IMG height=6 alt=""
src="掌握 Ajax，第 5 部分 操纵 DOM.files/c.gif" width=8
border=0></TD></TR></TBODY></TABLE>
<TABLE class=no-print cellSpacing=0 cellPadding=0 align=right>
<TBODY>
<TR align=right>
<TD><IMG height=4 alt=""
src="掌握 Ajax，第 5 部分 操纵 DOM.files/c.gif" width="100%"><BR>
<TABLE cellSpacing=0 cellPadding=0 border=0>
<TBODY>
<TR>
<TD vAlign=center><IMG height=16 alt=""
src="掌握 Ajax，第 5 部分 操纵 DOM.files/u_bold.gif" width=16
border=0><BR></TD>
<TD vAlign=top align=right><A class=fbox
href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro5/#main"><B>回页首</B></A></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE><BR><BR>
<P><A name=N102B6><SPAN class=atitle>API 设计问题</SPAN></A></P>
<P>再看一看各种节点提供的属性和方法。对于那些熟悉面向对象（OO）编程的人来说，它们说明了 DOM 的一个重要特点：DOM
并非完全面向对象的 API。首先，很多情况下要直接使用对象的属性而不是调用节点对象的方法。比方说，没有
<CODE>getNodeName()</CODE> 方法，而要直接使用 <CODE>nodeName</CODE>
属性。因此节点对象（以及其他 DOM 对象）通过属性而不是函数公开了大量数据。</P>
<P>其次，如果习惯于使用重载对象和面向对象的 API，特别是 Java 和 C++ 这样的语言，就会发现 DOM
中的对象和方法命名有点奇怪。DOM 必须能用于 C、Java 和 JavaScript（这只是其中的几种语言），因此 API
设计作了一些折衷。比如，<CODE>NamedNodeMap</CODE> 方法有两种不同的形式：</P>
<UL>
<LI><CODE>getNamedItem(String name)</CODE>
<LI><CODE>getNamedItemNS(Node node)</CODE> </LI></UL>
<P>对于 OO 程序员来说这看起来非常奇怪。两个方法目的相同，只不过一个使用 String 参数而另一个使用
<CODE>Node</CODE> 参数。多数 OO API
中对这两种版本都会使用相同的方法名。运行代码的虚拟机将根据传递给方法的对象类型决定运行哪个方法。</P>
<P>问题在于 JavaScript 不支持这种称为<I>方法重载</I> 的技术。换句话说，JavaScript
要求每个方法或函数使用不同的名称。因此，如果有了一个名为 <CODE>getNamedItem()</CODE>
的接受字符串参数的方法，就不能再有另一个方法或函数也命名为
<CODE>getNamedItem()</CODE>，即使这个方法的参数类型不同（或者完全不同的一组参数）。如果这样做，JavaScript
将报告错误，代码不会按照预期的方式执行。</P>
<P>从根本上说，DOM 有意识地避开了方法重载和其他 OO 编程技术。这是为了保证该 API 能够用于多种语言，包括那些不支持 OO
编程技术的语言。后果不过是要求您多记住一些方法名而已。好处是可以在任何语言中学习 DOM，比如
Java，并清楚同样的方法名和编码结构也能用于具有 DOM 实现的其他语言，如 JavaScript。</P>
<P><A name=N102F3><SPAN class=smalltitle>让程序员小心谨慎</SPAN></A></P>
<P>如果深入研究 API 设计或者仅仅非常关注 API 设计，您可能会问：“为何节点类型的属性不能适用于所有节点？”
这是一个很好的问题，答案和政治以及决策制定而非技术原因关系更密切。简单地说，答案就是，“谁知道！但有点令人恼火，不是吗？”</P>
<P>属性 <CODE>nodeName</CODE>
意味着允许每种类型的节点都有一个名字，但是很多情况下名字要么未定义，要么是对于程序员没有意义的内部名（比如在 Java
中，很多情况下文本节点的 <CODE>nodeName</CODE> 被报告为
“#text”）。从根本上说，必须假设您得自己来处理错误。直接访问 <CODE>myNode.nodeName</CODE>
然后使用该值是危险的，很多情况下这个值为空。因此与通常的编程一样，程序员要谨慎从事。</P><BR>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD><IMG height=1 alt=""
src="掌握 Ajax，第 5 部分 操纵 DOM.files/blue_rule.gif"
width="100%"><BR><IMG height=6 alt=""
src="掌握 Ajax，第 5 部分 操纵 DOM.files/c.gif" width=8
border=0></TD></TR></TBODY></TABLE>
<TABLE class=no-print cellSpacing=0 cellPadding=0 align=right>
<TBODY>
<TR align=right>
<TD><IMG height=4 alt=""
src="掌握 Ajax，第 5 部分 操纵 DOM.files/c.gif" width="100%"><BR>
<TABLE cellSpacing=0 cellPadding=0 border=0>
<TBODY>
<TR>
<TD vAlign=center><IMG height=16 alt=""
src="掌握 Ajax，第 5 部分 操纵 DOM.files/u_bold.gif" width=16
border=0><BR></TD>
<TD vAlign=top align=right><A class=fbox
href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro5/#main"><B>回页首</B></A></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE><BR><BR>
<P><A name=N1030B><SPAN class=atitle>通用节点类型</SPAN></A></P>
<P>现在已经介绍了 DOM 节点的一些特性和属性（以及一些奇特的地方），下面开始讲述您将用到的一些特殊节点类型。多数 Web
应用程序中只用到四种节点类型：</P>
<UL>
<LI><B>文档节点</B>表示整个 HTML 文档。
<LI><B>元素节点</B>表示 HTML 元素，如 <CODE>a</CODE> 或 <CODE>img</CODE>。
<LI><B>属性节点</B>表示 HTML 元素的属性，如 <CODE>href</CODE>（<CODE>a</CODE>
元素）或 <CODE>src</CODE>（<CODE>img</CODE> 元素）。
<LI><B>文本节点</B>表示 HTML 文档中的文本，如 “Click on the link below for a
complete set list”。这是出现在 <CODE>p</CODE>、<CODE>a</CODE> 或
<CODE>h2</CODE> 这些元素中的文字。 </LI></UL>
<P>处理 HTML 时，95% 的时间是跟这些节点类型打交道。因此本文的其余部分将详细讨论这些节点。（将来讨论 XML
的时候将介绍其他一些节点类型。） </P><BR>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD><IMG height=1 alt=""
src="掌握 Ajax，第 5 部分 操纵 DOM.files/blue_rule.gif"
width="100%"><BR><IMG height=6 alt=""
src="掌握 Ajax，第 5 部分 操纵 DOM.files/c.gif" width=8
border=0></TD></TR></TBODY></TABLE>
<TABLE class=no-print cellSpacing=0 cellPadding=0 align=right>
<TBODY>
<TR align=right>
<TD><IMG height=4 alt=""
src="掌握 Ajax，第 5 部分 操纵 DOM.files/c.gif" width="100%"><BR>
<TABLE cellSpacing=0 cellPadding=0 border=0>
<TBODY>
<TR>
<TD vAlign=center><IMG height=16 alt=""
src="掌握 Ajax，第 5 部分 操纵 DOM.files/u_bold.gif" width=16
border=0><BR></TD>
<TD vAlign=top align=right><A class=fbox
href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro5/#main"><B>回页首</B></A></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE><BR><BR>
<P><A name=N10352><SPAN class=atitle>文档节点</SPAN></A></P>
<P>基本上所有基于 DOM 的代码中都要用到的第一个节点类型是文档节点。<I>文档节点</I> 实际上并不是 HTML（或
XML）页面中的一个元素而是页面本身。因此在 HTML Web 页面中，文档节点就是整个 DOM 树。在 JavaScript
中，可以使用关键字 <CODE>document</CODE> 访问文档节点：</P>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD class=code-outline><PRE class=displaycode>// These first two lines get the DOM tree for the current Web page,
// and then the <html> element for that DOM tree
<SPAN class=boldcode>var myDocument = document</SPAN>;
var htmlElement = myDocument.documentElement;
</PRE></TD></TR></TBODY></TABLE><BR>
<P>JavaScript 中的 <CODE>document</CODE> 关键字返回当前网页的 DOM
树。从这里可以开始处理树中的所有节点。</P>
<P>也可使用 <CODE>document</CODE> 对象创建新节点，如下所示：</P>
<UL>
<LI><CODE>createElement(elementName)</CODE> 使用给定的名称创建一个元素。
<LI><CODE>createTextNode(text)</CODE> 使用提供的文本创建一个新的文本节点。
<LI><CODE>createAttribute(attributeName)</CODE> 用提供的名称创建一个新属性。
</LI></UL>
<P>这里的关键在于这些方法创建节点，但是并没有将其附加或者插入到特定的文档中。因此，必须使用前面所述的方法如
<CODE>insertBefore()</CODE> 或 <CODE>appendChild()</CODE>
来完成这一步。因此，可使用下面的代码创建新元素并将其添加到文档中：</P>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD class=code-outline><PRE class=displaycode>var pElement = myDocument.createElement("p");
var text = myDocument.createTextNode("Here's some text in a p element.");
pElement.appendChild(text);
bodyElement.appendChild(pElement);
</PRE></TD></TR></TBODY></TABLE><BR>
<P>一旦使用 <CODE>document</CODE> 元素获得对 Web 页面 DOM
树的访问，就可以直接使用元素、属性和文本了。</P><BR>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD><IMG height=1 alt=""
src="掌握 Ajax，第 5 部分 操⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -