JavaScript文档对象模型document对象查找Html元素(2)

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

积沙成塔——

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

阅读量847

点赞数 2

分类专栏： JavaScript基础文章标签： javascript html 前端

本文链接：https://blog.csdn.net/qq_45308912/article/details/121194038

版权

JavaScript基础专栏收录该内容

78 篇文章 0 订阅

订阅专栏

1.document对象查找Html元素

以下表格是获取Html元素的常用方法：在这里插入图片描述
（1.）getElementById方法：返回值是元素对象，如果没有符合的条件对象，则返回为null；

（2.）getElementsByTagName: 返回值是数组对象，如果没有符合条件的对象，则返回为空数组

（3.）getElementsByName: 返回的是指定标签名的元素对象集合，如果无符合条件的对象，则返回为空数组。

（4.）getElementsByClassName: 返回值为指定类名的元素集合，元素集合中的顺序以其中在代码中出现的次序排序，可通过下标方式来访问指定的元素 （索引号从0开始）

2.Html新增的获取元素方法

在这里插入图片描述

以下代码作为案例复习：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div class="box">盒子1</div>
		<div class="box">盒子2</div>
		<ul>
			<li>1111</li>
			<li>2222</li>
		</ul>
		
		<script>
			//使用getElementsByClassName方法返回指定类名元素集合
			var obj = document.getElementsByClassName('box');
			console.log(obj);
			
			//使用querySelector方法返回指定选择器第一个元素对象 
			// 切记 里面的选择器需要加符号，这样开发工具和网站会自动识别 如.box #box 
			var obj2 = document.querySelector('.box');
			console.log(obj2);   //返回的是盒子1元素对象
			
			//使用querySelectorAll方法返回指定选择器元素对象集合
			var obj3 = document.querySelectorAll('li');
			console.log(obj3);
		</script>
	</body>
</html>

积沙成塔——

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
JavaScript文档对象模型document对象查找Html元素(2)

1.document对象查找Html元素以下表格是获取Html元素的常用方法：（1.）getElementById方法：返回值是元素对象，如果没有符合的条件对象，则返回为null；（2.）getElementsByTagName: 返回值是数组对象，如果没有符合条件的对象，则返回为空数组（3.）getElementsByName: 返回的是指定标签名的元素对象集合，如果无符合条件的对象，则返回为空数组。（4.）getElementsByClassName: 返回值为指定类名的元素集合，元素集合中
复制链接

扫一扫

专栏目录