节点是……
用最简单的话说，DOM 树中的任何事物都是节点 。之所以用 “事物” 这个模糊的字眼，是因为只能明确到这个程度。比如 HTML 中的元素（如 img）和 HTML 中的文本片段（如 “Scroll down for more details”）没有多少明显的相似之处。但这是因为您考虑的可能是每种类型的功能，关注的是它们的不同点。
但是如果从另一个角度观察，DOM 树中的每个元素和每段文本都有一个父亲，这个父节点可能是另一个元素（比如嵌套在 p 元素中的 img）的孩子，或者 DOM 树中的顶层元素（这是每个文档中都出现一次的特殊情况，即使用 html 元素的地方）。另外，元素和文本都有一个类型。显然，元素的类型就是元素，文本的类型就是文本。每个节点还有某种定义明确的结构：下面还有节点（如子元素）吗？有兄弟节点（与元素或文本 “相邻的” 节点）吗？每个节点属于哪个文档？
显然，大部分内容听起来很抽象。实际上，说一个元素的类型是元素似乎有点冒傻气。但是要真正认识到将节点作为通用对象类型的价值，必须抽象一点来思考。
DOM 代码中最常用的任务就是在页面的 DOM 树中导航。比方说，可以通过其 “id” 属性定位一个 form，然后开始处理那个 form 中内嵌的元素和文本。其中可能包含文字说明、输入字段的标签、真正的 input 元素，以及其他 HTML 元素（如 img）和链接（a 元素）。如果元素和文本是完全不同的类型，就必须为每种类型编写完全不同的代码。
如果使用一种通用节点类型情况就不同了。这时候只需要从一个节点移动到另一个节点，只有当需要对元素或文本作某种特殊处理时才需要考虑节点的类型。如果仅仅在 DOM 树中移动，就可以与其他节点类型一样用同样的操作移动到元素的父节点或者子节点。只有当需要某种节点类型的特殊性质时，如元素的属性，才需要对节点类型作专门处理。将 DOM 树中的所有对象都看作节点可以简化操作。记住这一点之后，接下来我们将具体看看 DOM 节点构造应该提供什么，首先从属性和方法开始。
// 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...
// We'll do more when we know some methods on the nodes.
}
清单 2 在 清单 1 的基础上增加了方法使用。 清单 2. 使用 DOM 中的节点方法
[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;
// 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 (bodyElement.hasChildNodes()) {
for (i=0; i<bodyElement.childNodes.length; i++) {
var currentNode = bodyElement.childNodes;
if (currentNode.nodeName.toLowerCase() == "img" {
bodyElement.removeChild(currentNode);
}
}
}
}
..............
[/php]
测试一下！
目前虽然只看到了两个例子，清单 1 和 2，不过通过这两个例子您应该能够了解使用 DOM 树能够做什么。如果要尝试一下这些代码，只需要将 清单 3 拖入一个 HTML 文件并保存，然后用 Web 浏览器打开。 清单 3. 包含使用 DOM 的 JavaScript 代码的 HTML 文件
[php]
<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 + "'";
}
// 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;
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>
...............
[/php]
楼主: lastwinner
IP卡
狗仔卡
楼主
显身卡
[0];