📄 掌握 ajax，第 5 部分 操纵 dom.htm
字号:
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=N10117><SPAN class=atitle>节点的属性</SPAN></A></P>
<P>使用 DOM 节点时需要一些属性和方法，因此我们首先来讨论节点的属性和方法。DOM 节点的属性主要有：</P>
<UL>
<LI><CODE>nodeName</CODE> 报告节点的名称（详见下述）。
<LI><CODE>nodeValue</CODE> 提供节点的 “值”（详见后述）。
<LI><CODE>parentNode</CODE> 返回节点的父节点。记住，每个元素、属性和文本都有一个父节点。
<LI><CODE>childNodes</CODE> 是节点的孩子节点列表。对于
HTML，该列表仅对元素有意义，文本节点和属性节点都没有孩子。
<LI><CODE>firstChild</CODE> 仅仅是 <CODE>childNodes</CODE>
列表中第一个节点的快捷方式。
<LI><CODE>lastChild</CODE> 是另一种快捷方式，表示 <CODE>childNodes</CODE>
列表中的最后一个节点。
<LI><CODE>previousSibling</CODE> 返回当前节点<I>之前</I>
的节点。换句话说，它返回当前节点的父节点的 <CODE>childNodes</CODE>
列表中位于该节点前面的那个节点（如果感到迷惑，重新读前面一句）。
<LI><CODE>nextSibling</CODE> 类似于 <CODE>previousSibling</CODE>
属性，返回父节点的 <CODE>childNodes</CODE> 列表中的下一个节点。
<LI><CODE>attributes</CODE> 仅用于元素节点，返回元素的属性列表。 </LI></UL>
<P>其他少数几种属性实际上仅用于更一般的 XML 文档，在处理基于 HTML 的网页时没有多少用处。</P>
<P><A name=N10173><SPAN class=smalltitle>不常用的属性</SPAN></A></P>
<P>上述大部分属性的意义都很明确，除了 <CODE>nodeName</CODE> 和 <CODE>nodeValue</CODE>
属性以外。我们不是简单地解释这两个属性，而是提出两个奇怪的问题：<I>文本节点的 <CODE>nodeName</CODE>
应该是什么</I>？类似地，<I>元素的 <CODE>nodeValue</CODE> 应该是什么</I>？</P>
<P>如果这些问题难住了您，那么您就已经了解了这些属性固有的含糊性。<CODE>nodeName</CODE> 和
<CODE>nodeValue</CODE> 实际上并非适用于<I>所有</I>
节点类型（节点的其他少数几个属性也是如此）。这就说明了一个重要概念：任何这些属性都可能返回空值（有时候在 JavaScript 中称为
“未定义”）。比方说，文本节点的 <CODE>nodeName</CODE> 属性是空值（或者在一些浏览器中称为
“未定义”），因为文本节点没有名称。如您所料，<CODE>nodeValue</CODE> 返回节点的文本。</P>
<P>类似地，元素有 <CODE>nodeName</CODE>，即元素名，但元素的 <CODE>nodeValue</CODE>
属性值总是空。属性同时具有 <CODE>nodeName</CODE> 和
<CODE>nodeValue</CODE>。下一节我还将讨论这些单独的类型，但是因为这些属性是每个节点的一部分，因此在这里有必要提一提。</P>
<P>现在看看 <A
href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro5/#code1">清单
1</A>，它用到了一些节点属性。</P><BR><BR><A name=code1><B>清单 1. 使用 DOM
中的节点属性</B></A><BR>
<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
var myDocument = document;
var htmlElement = myDocument.documentElement;
// What's the name of the <html> element? "html"
alert("The root element of the page is " + <SPAN class=boldcode>htmlElement.nodeName</SPAN>);
// Look for the <head> element
var headElement = htmlElement.getElementsByTagName("head")[0];
if (headElement != null) {
alert("We found the head element, named " + <SPAN class=boldcode>headElement.nodeName</SPAN>);
// Print out the title of the page
var titleElement = headElement.getElementsByTagName("title")[0];
if (titleElement != null) {
// The text will be the first child node of the <title> element
var titleText = titleElement.firstChild;
// We can get the text of the text node with nodeValue
alert("The page title is '" + <SPAN class=boldcode>titleText.nodeValue</SPAN> + "'");
}
// After <head> is <body>
var bodyElement = <SPAN class=boldcode>headElement.nextSibling</SPAN>;
while (<SPAN class=boldcode>bodyElement.nodeName</SPAN>.toLowerCase() != "body") {
bodyElement = <SPAN class=boldcode>bodyElement.nextSibling</SPAN>;
}
// We found the <body> element...
<SPAN class=boldcode>// We'll do more when we know some methods on the nodes.</SPAN>
}
</PRE></TD></TR></TBODY></TABLE><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=N101E2><SPAN class=atitle>节点方法 </SPAN></A></P>
<P>接下来看看所有节点都具有的方法（与节点属性一样，我省略了实际上不适用于多数 HTML DOM 操作的少数方法）：</P>
<UL>
<LI><CODE>insertBefore(newChild, referenceNode)</CODE> 将
<CODE>newChild</CODE> 节点插入到 <CODE>referenceNode</CODE> 之前。记住，应该对
<CODE>newChild</CODE> 的目标父节点调用该方法。
<LI><CODE>replaceChild(newChild, oldChild)</CODE> 用
<CODE>newChild</CODE> 节点替换 <CODE>oldChild</CODE> 节点。
<LI><CODE>removeChild(oldChild)</CODE> 从运行该方法的节点中删除
<CODE>oldChild</CODE> 节点。
<LI><CODE>appendChild(newChild)</CODE> 将 <CODE>newChild</CODE>
添加到运行该函数的节点之中。<CODE>newChild</CODE> 被添加到目标节点孩子列表中的<I>末端</I>。
<LI><CODE>hasChildNodes()</CODE> 在调用该方法的节点有孩子时则返回 true，否则返回 false。
<LI><CODE>hasAttributes()</CODE> 在调用该方法的节点有属性时则返回 true，否则返回 false。
</LI></UL>
<P>注意，大部分情况下所有这些方法处理的都是节点的孩子。这是它们的主要用途。如果仅仅想获取文本节点值或者元素名，则不需要调用这些方法，使用节点属性就可以了。<A
href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro5/#code2">清单
2</A> 在 <A
href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro5/#code1">清单
1</A> 的基础上增加了方法使用。</P><BR><BR><A name=code2><B>清单 2. 使用 DOM
中的节点方法</B></A><BR>
<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
var myDocument = document;
var htmlElement = myDocument.documentElement;
// What's the name of the <html> element? "html"
alert("The root element of the page is " + htmlElement.nodeName);
// Look for the <head> element
var headElement = htmlElement.getElementsByTagName("head")[0];
if (headElement != null) {
alert("We found the head element, named " + headElement.nodeName);
// Print out the title of the page
var titleElement = headElement.getElementsByTagName("title")[0];
if (titleElement != null) {
// The text will be the first child node of the <title> element
var titleText = titleElement.firstChild;
// We can get the text of the text node with nodeValue
alert("The page title is '" + titleText.nodeValue + "'");
}
// 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 (<SPAN class=boldcode>bodyElement.hasChildNodes()</SPAN>) {
for (i=0; i<bodyElement.childNodes.length; i++) {
var currentNode = bodyElement.childNodes[i];
if (currentNode.nodeName.toLowerCase() == "img") {
<SPAN class=boldcode>bodyElement.removeChild(currentNode)</SPAN>;
}
}
}
}
</PRE></TD></TR></TBODY></TABLE><BR>
<P><A name=N10251><SPAN class=smalltitle>测试一下！</SPAN></A></P>
<P>目前虽然只看到了两个例子，清单 <A
href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro5/#code1">1</A>
和 <A
href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro5/#code2">2</A>，不过通过这两个例子您应该能够了解使用
DOM 树能够做什么。如果要尝试一下这些代码，只需要将 <A
href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro5/#code3">清单
3</A> 拖入一个 HTML 文件并保存，然后用 Web 浏览器打开。</P><BR><BR><A name=code3><B>清单
3. 包含使用 DOM 的 JavaScript 代码的 HTML 文件</B></A><BR>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD class=code-outline><PRE class=displaycode>
<html>
<head>
<title>JavaScript and the DOM</title>
<script language="JavaScript">
function test() {
// 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;
// What's the name of the <html> element? "html"
alert("The root element of the page is " + htmlElement.nodeName);
// Look for the <head> element
var headElement = htmlElement.getElementsByTagName("head")[0];
if (headElement != null) {
alert("We found the head element, named " + headElement.nodeName);
// Print out the title of the page
var titleElement = headElement.getElementsByTagName("title")[0];
if (titleElement != null) {
// The text will be the first child node of the <title> element
var titleText = titleElement.firstChild;
// We can get the text of the text node with nodeValue
alert("The page title is '" + titleText.nodeValue + "'");
}
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -