document对象查找HTML元素

最新推荐文章于 2024-04-12 08:57:44 发布

Program Debug

最新推荐文章于 2024-04-12 08:57:44 发布

阅读量2k

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/weixin_46990454/article/details/111242660

版权

JavaScript 专栏收录该内容

28 篇文章 3 订阅

订阅专栏

通过id查找
使用document.getElementById(“id”)的方法可以通过id获取HTML页面的元素。其中参数id为必填项，是字符串类型。返回值类为对象，如果没有符合条件的对象，则返回null。

<body>
	<p id="text">hello world</p>
	<script type="text/javascript">
		var obj = document.getElementById("text");
		alert(obj.value);
	</script>
</body>

通过name查找
使用document.getElementsByName(“name”)的方法可以通过name获取页面元素，其中参数name为必填项，是字符串类型。返回值为数组对象，如果无符合条件的对象，则返回空数组。

	<body>
		<input name="checkbox" id="check" type="checkbox"/>box1
		<input name="checkbox" type="checkbox" />box2
		<input name="checkbox" type="checkbox" />box3
		<script type="text/javascript">
			var obj = document.getElementById("check");
			obj.onclick = judge;
			var inputArray = document.getElementsByName("checkbox");
			function judge(){
				var tem = obj.checked;
				for(var i = 0; i < inputArray.length; i++){
					if(tem){
						inputArray[i].checked = true;
					}else{
						inputArray[i].checked = false;
					}
				}
			}
		</script>
	</body>

通过标签名查找HTML元素
使用document.getElementsByTagName(“tagname”)方法可以通过标签名访问页面元素，参数tagname为必填项，为字符串类型。当返回值是指定标签名的对象集合，如果无符合条件的对象，则返回空数组。

<body>
	<p>这是第一个</p>
	<p>这是第二个</p>
	<p>这是第三个</p>
	<script type="text/javascript">
		var arrayLen = document.getElementsByTagName("p").length;
		alert(arrayLen);
	</script>
</body>

通过类名查找HTML元素
使用document.getElementsByClassName(“classname”)方法可以通过类名访问元素。参数classname为必填项，是字符串类型。当返回值是指定类名的对象集合，如果无符合条件的对象，则返回空数组。

<body>
	<p class="test">第一个</p>
	<p class="test">第二个</p>
	<p class="test">第三个</p>
	<input id="click" type="button" value="更改第一个p标签中的内容为：hello world" />
	<script type="text/javascript">
		document.getElementById("click").onclick = change;
		function change(){
			var classArray = document.getElementsByClassName("test");
			classArray[0].innerHTML = "hello world";
		}
	</script>
</body>

Program Debug

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
document对象查找HTML元素

通过id查找使用document.getElementById(“id”)的方法可以通过id获取HTML页面的元素。其中参数id为必填项，是字符串类型。返回值类为对象，如果没有符合条件的对象，则返回null。<body> <p id="text">hello world</p> <script type="text/javascript"> var obj = document.getElementById("text"); alert(obj
复制链接

扫一扫