访问HTML元素
为了动态地修改HTML元素，必须能访问HTML元素，DOM提供了两种方式来访问HTML元素：
➢ 根据ID访问HTML元素。
➢ 利用节点关系访问HTML元素。
前一种方式简单易用，主要由document提供的getElementById()方法来完成；后一种方式则利用树节点之间的父子、兄弟关系来访问。
根据ID访问HTML元素
根据ID访问HTML元素由如下方法实现。
➢ document.getElementById(idVal)：返回文档中id属性值为idVal的HTML元素。
上面这个方法简单易用，只要被访问HTML元素具有唯一的id属性，那么JavaScript脚本就可以方便地访问到该元素。
在设计良好的HTML页面中，我们建议为页面中的每个HTML元素都设置唯一的id属性值；或者要求其他成员开发HTML页面时尽量为每个元素设置唯一的id属性值。早期的很多HTML页面并不是规范的HTML页面，而且早期的很多页面只是简单的静态页，不需要使用JavaScript动态修改页面内容，因此页面中可能有些HTML元素没有指定id属性值。但现在不同了，现在可能经常需要动态修改HTML页面内容，经常需要根据ID来访问HTML元素，因此建议为每个HTML元素指定唯一的id属性值。
例子
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> 根据ID访问HTML元素 </title>
<script type="text/javascript">
var accessById = function()
{
alert(document.getElementById("a").innerHTML + "\n"
+ document.getElementById("b").value);
}
</script>
</head>
<body>
<div id="a">疯狂Java讲义</div>
<textarea id="b" rows="3" cols='25'>轻量级Java EE企业应用实战
</textarea>
<input type="button" value="访问2个元素" onclick="accessById();"/>
</body>
</html>
程序中为了访问<div.../>元素和<textarea.../>元素的“内容”，为何一个用innerHTML属性，另一个用value属性呢？这是因为DOM模型扩展了HTML元素，为几乎所有的HTML元素都新增了innerHTML属性，该属性代表该元素的“内容”——当某个元素的开始标签、结束标签之间都是字符串内容时（不包含其他子元素），JavaScript子元素可通过它的innerHTML属性返回这些字符串内容。但<textarea.../>例外，因为它是一个表单控件，它的开始标签和结束标签之间的内容是它的值，因此只能通过value属性来访问。不仅如此，还有<input.../>元素所生成的表单控件，包括单行文本框、各种按钮等，它们的可视化文本都由value属性控制，因此也通过value来获取它们的“内容”。除此之外的其他HTML元素，包括列表框、下拉菜单的列表项、<label.../>表单域、<button.../>按钮，都应通过innerHTML来获取它们的“内容”。
利用节点关系访问HTML元素
一旦获取了某个HTML元素，由于该元素实际上与DOM树的某个节点对应，因此我们完全可以利用节点之间的父子、兄弟关系来访问HTML元素。
利用节点关系访问HTML元素的属性和方法如下。
➢ Node parentNode：返回当前节点的父节点。只读属性。
➢ Node previousSibling：返回当前节点的前一个兄弟节点。只读属性。
➢ Node nextSibling：返回当前节点的后一个兄弟节点。只读属性。
➢ Node[] childNodes：返回当前节点的所有子节点。只读属性。
➢ Node[] getElementsByTagName(tagName)：返回当前节点的具有指定标签名的所有子节点。
➢ Node firstChild：返回当前节点的第一个子节点。只读属性。
➢ Node lastChild：返回当前节点的最后一个子节点。只读属性。
例子
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> 根据节点关系访问HTML元素 </title>
<style type="text/css">
/* 定义改变背景色的CSS，表示被选中的项 */
.selected {
background-color:#66f
}
</style>
</head>
<body>
<ol id="books">
<li id="java">疯狂Java讲义</li>
<li id="ssh">轻量级Java EE企业应用实战</li>
<li id="ajax" class="selected">疯狂Ajax讲义</li>
<li id="xml">疯狂XML讲义</li>
<li id="ejb">经典Java EE企业应用实战</li>
<li id="workflow">疯狂Android讲义</li>
</ol>
<input type="button" value="父节点"
onclick="change(curTarget.parentNode);"/>
<input type="button" value="第一个"
onclick="change(curTarget.parentNode.firstChild.nextSibling);"/>
<input type="button" value="上一个"
onclick="change(curTarget.previousSibling.previousSibling);"/>
<input type="button" value="下一个"
onclick="change(curTarget.nextSibling.nextSibling);"/>
<input type="button" value="最后一个"
onclick="change(curTarget.parentNode.lastChild.previousSibling);"/>
<script type="text/javascript">
var curTarget = document.getElementById("ajax");
var change = function(target)
{
alert(target.innerHTML);
}
</script>
</body>
</html>
注意
需要指出的是，<ol.../>节点一共包含13个子节点，而不是6个子节点！因为在每两个<li.../>节点之间都有一片“空白”（换行和空格），每片“空白”也将被当成<ol.../>元素的子节点。因为在使用curTarget.previousSibling访问当前节点的上一个节点时，实际上得到一个“空白”节点；而我们需要访问上一个<li.../>节点，实际上是上两个节点。
对于HTML页面而言，浏览器会将页面中的“空白”也当成文本节点，在使用DOM模型访问HTML页面元素时必须小心处理。Internet Explorer 8没有把页面中的“空白”当成子元素！
访问表单控件
表单在DOM中由HTMLFormElement对象表示，该对象除了可调用前面介绍的基本属性和方法之外，还拥有如下几个常用属性。
➢ action：返回该表单的action属性值，该属性用于指定表单的提交地址。读写属性。
➢ elements：返回表单内全部表单控件所组成的数组。使用该数组可以访问该表单内的任何表单控件。只读属性。
➢ length：返回表单内表单域的个数，该属性等于elements.length的值。只读属性。
➢ method：返回该表单的method属性，该属性通常有POST和GET两个值，默认采用GET方式。该属性用于确定表单发送请求的方式。读写属性。
➢ target：用于确定提交表单时的结果窗口，可以是self、parent、top、blank等值。读写属性。
除此之外，Form对象还有如下两个常用方法。
➢ reset()：重设表单，将所有表单域的值设置为初始值。
➢ submit()：提交表单。
因为HTMLFormElement提供了elements属性返回表单内的全部表单控件，因此可通过该属性访问表单里的表单控件。
例子
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> 访问表单控件 </title>
</head>
<body>
<form id="d" action="" method="get">
<input name="user" type="text" /><br />
<input name="pass" type="text" /><br />
<select name="color">
<option value="red">红色</option>
<option value="blue">蓝色</option>
</select><br />
<input type="button" value="第一个" onclick=
"alert(document.getElementById('d').elements[0].value);" />
<input type="button" value="第二个" onclick=
"alert(document.getElementById('d').elements['pass'].value);" />
<input type="button" value="第三个" onclick=
"alert(document.getElementById('d').color.value);" />
</form>
</body>
</html>
根据上面代码不难看出，HTMLFormElement访问表单控件有如下3种语法。
➢ formObj.elements[index]：返回表单中第index个表单控件。
➢ formObj.elements['elementName']：返回表单中id或name为elementName的表单控件。
➢ formObj.elementName：返回表单中id或name为elementName的表单控件。
访问列表框、下拉菜单的选项
HTMLSelectElement代表一个列表框或下拉菜单，HTMLSelectElement对象除了可使用普通HTML元素的各种属性和方法外，还支持如下额外的属性。
➢ form：返回列表框、下拉菜单所在的表单对象。只读属性。
➢ length：返回列表框、下拉菜单的选项个数。该属性的值可通过增加或删除列表框的选项来改变。只读属性。
➢ options：返回列表框、下拉菜单里所有选项组成的数组。只读属性。
➢ selectedIndex：返回下拉列表中选中选项的索引，如果有多个选项被选中，则只返回第一个被选中选项的索引。读写属性。
➢ type：返回下拉列表的类型，即是否允许多选。如果允许多选，则返回select-multiple；如果不支持多选，则返回select-one。
HTMLSelectElement的options属性可直接访问列表框、下拉菜单的所有列表项，传入指定索引即可访问指定列表项，语法格式如下。
➢ select.options[index]：返回列表框、下拉菜单的第index+1个选项。
列表框、下拉菜单的选项由HTMLOptionElement对象表示，除了前面介绍的普通属性之外，该对象还提供了如下几个常用属性。
➢ form：返回包含该选项所处列表框、下拉菜单的表单对象。
➢ defaultSelected：返回该选项默认是否被选中。只读属性。
➢ index：返回该选项在列表框、下拉菜单中的索引。只读属性。当然也可以通过增加或删除列表框的选项来改变该选项的索引值。
➢ selected：返回该选项是否被选中，通过修改该属性可以动态改变该选项是否被选中。
➢ text：返回该选项呈现的文本，就是<option>和</option>之间的文本。对HTMLOptionElement而言，该属性与innerHTML属性相同。
➢ value：返回每个选项的value属性，可以通过设置该属性来改变选项的value值。
例子
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> 访问列表项 </title>
</head>
<body>
<select id="mySelect" name="mySelect" size="6">
<option value="java">疯狂Java讲义</option>
<option value="ssh">轻量级Java EE企业应用实战</option>
<option value="ajax" selected>疯狂Ajax讲义</option>
<option value="xml">疯狂XML讲义</option>
<option value="ejb">经典Java EE企业应用实战</option>
<option value="workflow">疯狂Android讲义</option>
</select><br />
<input type="button" value="第一个" onclick=
"change(curTarget.options[0]);" />
<input type="button" value="上一个" onclick=
"change(curTarget.options[curTarget.selectedIndex - 1]);" />
<input type="button" value="下一个" onclick=
"change(curTarget.options[curTarget.selectedIndex + 1]);" />
<input type="button" value="最后一个" onclick=
"change(curTarget.options[curTarget.length - 1]);" />
<script type="text/javascript">
var curTarget = document.getElementById("mySelect");
var change = function(target)
{
alert(target.text);
}
</script>
</body>
</html>
访问表格子元素
HTMLTableElement代表表格，HTMLTableElement对象除了可使用普通HTML元素的各种属性和方法外，还支持如下额外的属性。
➢ caption：返回该表格的标题对象。可通过修改该属性来改变表格标题。
➢ HTMLCollection rows：返回该表格里的所有表格行，该属性会返回<thead.../>、<tfoot.../>和<tbody.../>元素里的所有表格行。只读属性。
➢ HTMLCollection tBodies：返回该表格里所有<tbody.../>元素组成的数组。
➢ tFoot：返回该表格里的<tfoot.../>元素。
➢ tHead：返回该表格里的所有<thead.../>元素。
在获得一个表格之后，完全可以通过上面提供的一系列属性来访问表格“内容”，例如caption属性返回该表格标题，rows属性返回该表格的全部表格行……与前面介绍的完全相似，如果需要访问表格的指定表格行，只需要使用如下格式即可。
➢ table.rows[index]：返回该表格第index + 1行的表格行。
HTMLTableRowElement代表表格行，HTMLTableRowElement对象除了可使用普通HTML元素的各种属性和方法外，还支持如下额外的属性。
➢ cells：返回该表格行内所有的单元格组成的数组。只读属性。
➢ rowIndex：返回该表格行在表格内的索引值。只读属性。
➢ sectionRowIndex：返回该表格行在其所在元素（<tbody.../>、<thead.../>等元素）的索引值。只读属性。
HTMLTableCellElement代表单元格，HTMLTableCellElement对象除了可使用普通HTML元素的各种属性和方法外，还支持如下额外的属性。
➢ cellIndex：返回该单元格在该表格行内的索引值。只读属性。
例子
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> 访问表格元素 </title>
</head>
<body>
<table id="d" border="1">
<caption>疯狂Java体系</caption>
<tr>
<td>疯狂Java讲义</td>
<td>轻量级Java EE企业应用实战</td>
</tr>
<tr>
<td>疯狂Ajax讲义</td>
<td>经典Java EE企业应用实战</td>
</tr>
<tr>
<td>疯狂XML讲义</td>
<td>疯狂Android讲义</td>
</tr>
</table>
<input type="button" value="表格标题" onclick=
"alert(document.getElementById('d').caption.innerHTML);" />
<input type="button" value="第一行、第一格" onclick=
"alert(document.getElementById('d').rows[0].cells[0].innerHTML);" />
<input type="button" value="第二行、第二格" onclick=
"alert(document.getElementById('d').rows[1].cells[1].innerHTML);" />
<input type="button" value="第三行、第二格" onclick=
"alert(document.getElementById('d').rows[2].cells[1].innerHTML);" />
</body>
</html>
注：本博客内容节选自李刚编著的疯狂HTML 5/CSS 3/JavaScript讲义 ，详细内容请参阅书籍。