DOM - 根据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属性值。

下面的页面代码示范了如何根据ID来访问HTML元素

 
 
 
 
 
 
HELLO
  world
 
 
 <script type="text/javascript">
 var accessById=function()
 {
 alert(document.getElementById("a").innerHTML+"\n"+document.getElementById("b").value);
 }
 </script>
 

上面的页面中定义了一个id为a的元素、一个id为b的元素，页面中还定义了一个简单按钮，当用户单击该按钮时执行accessById()函数，该函数只是弹出一个警告提示框，该提示框输出元素的innderHTML属性和元素的value属性。

在浏览器中浏览该页面，并单击页面中的“访问2个元素”按钮，可以看到如图所示警告框

可以看出，该警告框的内容正好是元素和元素的“内容”。由此可以可见，使用document.getElementById()方法来访问HTML元素非常简单。

可能有读者感到奇怪，程序中为了访问元素和元素的“内容”，为何一个用innerHTML属性，另一个用value呢？这是因为DOM模型扩展了HTML元素，为几乎所有的HTML元素都新增了innerHTML属性，该属性代表该元素的“内容”，当某个元素的开始标签、结束标签之间都是字符串内容时（不包含其他子元素），javaScript子元素可通过它的innerHTML属性返回这些字符串内容。但例外，因为它是一个表单控件，它的开始标签和结束标签之间的内容是它的值，因此只能通过value属性来访问。不仅如此，还有元素所生成的表单控件，包括单行文本框、各种按钮等，它们的可视化文本都由value属性控制，因此也通过value来获取它们的“内容”。除此之外的其他HTML元素，包括列表框、下拉菜单的列表项、表单域、按钮，都应通过innerHTML来获取它们的“内容”。