一个很基础的DOM例子
JS应用DOM入门［１］
DOM的对象属性
DOM提供了一套属性用于导航、访问和更新文档内容，其中包括只读类型的属性和可读写类型的属性。
下表是只读类型的属性：
DOM对象属性 返 回 值
FirstChild 返回一个对象（Object），表示第一个孩子节点（child node）。
LastChild 返回一个对象（Object），表示最后一个孩子节点（child node）。
NextSibling 返回一个对象（Object），表示下一个相邻的兄弟节点。
NodeName 返回节点对应的HTML标记。比如 ，Script。对应文本项节点，返回#text。
nodeType 返回节点的类型，
1表示此节点是标记（tag），
2表示属性（attribute），
3表示文本项。
parentNode 返回一个对象（Object），表示当前节点的双亲节点（parent node）。
previousSibling 返回一个对象（Object），表示前一个相邻的兄弟节点。
specified 返回一个布尔型变量（Boolean），表示是否设置了属性值（attribute）。
下表是可读写类型的属性：
DOM对象属性 返 回 值
data 返回一个字符串，表示文本项节点的值。如果是其他类型节点，返回undefined。
nodeValue 返回一个字符串，表示文本项节点的值。如果是其他类型节点，返回null。
下表是DOM中相关属性集合：
DOM对象属性 返 回 值
attributes 表示节点的属性集合，通过id来访问，比如attributes.id。
childNodes 表示节点的孩子节点集合，通过数组索引方式访问，比如：childNodes[2]。
<HTML>
<HEAD>
<TITLE> Simple DOM Demo </title>
<STYLE>TYPE="text/css">
<!--
FORM.tb {display:inline;}
.twidth{width:100%}
.include{ font-size: 75%; font-family: verdana, arial, helvetica;}
.includebig{font-family: verdana, arial, helvetica;}
.includebig A:link { color: blue; }
.includebig A:visited { color: purple; }
.include A:link { color: blue; }
.include A:visited { color: purple; }
.submitter { font-size: 75%; font-family: verdana, arial, helvetica; }
pre.code {color: #660099; margin-left:5%}
address {text-align: right}
body {background:#FFFFFF; margin-left: 5%; margin-right: 5%}
-->
</STYLE>
</HEAD>
<BODY ID="bodyNode">
<P ID = "p1Node">This is paragraph 1.</P>
This is the document body
<P ID = "p2Node"></P>
<P ID = "p3Node"></P>
<SCRIPT LANGUAGE="JavaScript">
alert(
"bodyNode.firstChild.nodeName = " + bodyNode.firstChild.nodeName + "\n" +
"bodyNode.firstChild.data = " + bodyNode.firstChild.data + "\n" +
"bodyNode.childNodes[0].nodeName = " + bodyNode.childNodes[0].nodeName + "\n" +
"bodyNode.childNodes[1].nodeName = " + bodyNode.childNodes[1].nodeName + "\n" +
"bodyNode.childNodes[1].data = " + bodyNode.childNodes[1].data + "\n" +
"bodyNode.childNodes[3].nodeName = " + bodyNode.childNodes[3].nodeName + "\n" +
"bodyNode.childNodes[4].nodeName = " + bodyNode.childNodes[4].nodeName + "\n" +
"p1Node.nextSibling.nodeName = " + p1Node.nextSibling.nodeName + "\n" +
"p1Node.nextSibling.nextSibling.nodeName = " + p1Node.nextSibling.nextSibling.nodeName + "\n" +
"p1Node.nextSibling.nextSibling.nextSibling.nodeName = " + p1Node.nextSibling.nextSibling.nextSibling.nodeName+ "\n" +
"p3Node.previousSibling.previousSibling.previousSibling.childNodes[0].nodeName = " +
p3Node.previousSibling.previousSibling.previousSibling.childNodes[0].nodeName + "\n" +
"p1Node.parentNode.nodeName = " + p1Node.parentNode.nodeName + "\n" +
"p2Node.parentNode.nodeName = " + p2Node.parentNode.nodeName + "\n" +
"p3Node.parentNode.nodeName = " + p3Node.parentNode.nodeName + "\n" +
"bodyNode.firstChild.firstChild.parentNode.parentNode.nodeName = " +
bodyNode.firstChild.firstChild.parentNode.parentNode.nodeName + "\n"
);
</SCRIPT>
</BODY>
</HTML>
DOM的对象属性
DOM提供了一套属性用于导航、访问和更新文档内容，其中包括只读类型的属性和可读写类型的属性。
下表是只读类型的属性：
DOM对象属性 返 回 值
FirstChild 返回一个对象（Object），表示第一个孩子节点（child node）。
LastChild 返回一个对象（Object），表示最后一个孩子节点（child node）。
NextSibling 返回一个对象（Object），表示下一个相邻的兄弟节点。
NodeName 返回节点对应的HTML标记。比如 ，Script。对应文本项节点，返回#text。
nodeType 返回节点的类型，
1表示此节点是标记（tag），
2表示属性（attribute），
3表示文本项。
parentNode 返回一个对象（Object），表示当前节点的双亲节点（parent node）。
previousSibling 返回一个对象（Object），表示前一个相邻的兄弟节点。
specified 返回一个布尔型变量（Boolean），表示是否设置了属性值（attribute）。
下表是可读写类型的属性：
DOM对象属性 返 回 值
data 返回一个字符串，表示文本项节点的值。如果是其他类型节点，返回undefined。
nodeValue 返回一个字符串，表示文本项节点的值。如果是其他类型节点，返回null。
下表是DOM中相关属性集合：
DOM对象属性 返 回 值
attributes 表示节点的属性集合，通过id来访问，比如attributes.id。
childNodes 表示节点的孩子节点集合，通过数组索引方式访问，比如：childNodes[2]。
<HTML>
<HEAD>
<TITLE> Simple DOM Demo </title>
<STYLE>TYPE="text/css">
<!--
FORM.tb {display:inline;}
.twidth{width:100%}
.include{ font-size: 75%; font-family: verdana, arial, helvetica;}
.includebig{font-family: verdana, arial, helvetica;}
.includebig A:link { color: blue; }
.includebig A:visited { color: purple; }
.include A:link { color: blue; }
.include A:visited { color: purple; }
.submitter { font-size: 75%; font-family: verdana, arial, helvetica; }
pre.code {color: #660099; margin-left:5%}
address {text-align: right}
body {background:#FFFFFF; margin-left: 5%; margin-right: 5%}
-->
</STYLE>
</HEAD>
<BODY ID="bodyNode">
<P ID = "p1Node">This is paragraph 1.</P>
This is the document body
<P ID = "p2Node"></P>
<P ID = "p3Node"></P>
<SCRIPT LANGUAGE="JavaScript">
alert(
"bodyNode.firstChild.nodeName = " + bodyNode.firstChild.nodeName + "\n" +
"bodyNode.firstChild.data = " + bodyNode.firstChild.data + "\n" +
"bodyNode.childNodes[0].nodeName = " + bodyNode.childNodes[0].nodeName + "\n" +
"bodyNode.childNodes[1].nodeName = " + bodyNode.childNodes[1].nodeName + "\n" +
"bodyNode.childNodes[1].data = " + bodyNode.childNodes[1].data + "\n" +
"bodyNode.childNodes[3].nodeName = " + bodyNode.childNodes[3].nodeName + "\n" +
"bodyNode.childNodes[4].nodeName = " + bodyNode.childNodes[4].nodeName + "\n" +
"p1Node.nextSibling.nodeName = " + p1Node.nextSibling.nodeName + "\n" +
"p1Node.nextSibling.nextSibling.nodeName = " + p1Node.nextSibling.nextSibling.nodeName + "\n" +
"p1Node.nextSibling.nextSibling.nextSibling.nodeName = " + p1Node.nextSibling.nextSibling.nextSibling.nodeName+ "\n" +
"p3Node.previousSibling.previousSibling.previousSibling.childNodes[0].nodeName = " +
p3Node.previousSibling.previousSibling.previousSibling.childNodes[0].nodeName + "\n" +
"p1Node.parentNode.nodeName = " + p1Node.parentNode.nodeName + "\n" +
"p2Node.parentNode.nodeName = " + p2Node.parentNode.nodeName + "\n" +
"p3Node.parentNode.nodeName = " + p3Node.parentNode.nodeName + "\n" +
"bodyNode.firstChild.firstChild.parentNode.parentNode.nodeName = " +
bodyNode.firstChild.firstChild.parentNode.parentNode.nodeName + "\n"
);
</SCRIPT>
</BODY>
</HTML>