004-根据ID访问HTML元素

最新推荐文章于 2024-10-07 00:04:50 发布

编码的三叔

最新推荐文章于 2024-10-07 00:04:50 发布

阅读量831

点赞数

分类专栏： DOM详解 DOM详解文章标签： id访问html innerhtml value

本文链接：https://blog.csdn.net/ppwwp/article/details/88219581

版权

DOM详解同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

DOM详解

16 篇文章 0 订阅

订阅专栏

为了动态的修改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来获取他们的“内容”。