为了动态的修改HTML元素，必须能访问HTML元素，DOM提供了两种方式来访问HTML元素：
- 根据ID访问HTML元素
- 根据CSS选择器访问HTML元素
- 利用节点关系访问HTML元素
前一种方式简单易用，主要有document提供的getElementById()方法来完成；后一种方式则利用树节点之间的父子、兄弟关系来访问。
根据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属性值。
下面的页面代码示范了如何根据ID来访问HTML元素。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html"/>
<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">test1</div>
<textarea id="b" row="3" cols="25">这是一首简单的小情歌</textarea>
<input type="button" value="访问两个元素" onclick="accessById()" />
</body>
</html>
演示效果：
上面的页面中定义了一个id为a的<div……> 元素、一个id为b的<textarea……>元素，页面中还定义了一个简单按钮，当用户单击该按钮时执行accessById()函数，该函数只是弹出一个警告提示框，该提示框输出<div……>元素的innerHTML属性和<textarea……>元素的value属性。
在浏览器中浏览该页面，并单击页面中的“访问两个元素”按钮，可以看到如上所示截图。
从图可以看出，该警告框的内容正好是<div……>元素和<textarea……>元素的“内容”，为何一个用innerHTML属性，另一个用value属性呢？
这是因为DOM模型扩展了HRML元素，为几乎所有的HTML元素都新增了innerHTML属性，该属性代表钙元素的内容----当某个元素的开始标签、技术标签之间都是字符串内容时（不含其它子元素），JavaScript子元素可通过它的innerHTML属性返回这些字符串内容。但<textarea……>例外，因为他是一个表单控件，它的开始标签和结束标签之间的内容是他的值，因此只能通过value属性来访问。
不仅如此，还有<input……>元素所生成的表单控件，包括单行文本框，各种按钮等。他们可视化文本都由value属性控制，因此也通过value获取它们的“内容”。
除此之外的其他HTML元素，包括列表框、下拉菜单的列表项、<label……>表单域、<button……>按钮，都应该通过innerHTML来获取他们的“内容”。