JS中获取页面标签对象的常用方法

最新推荐文章于 2023-01-20 10:00:00 发布

╰(￣ω￣ｏ)沫儿

最新推荐文章于 2023-01-20 10:00:00 发布

阅读量1.1k

点赞数

分类专栏： JavaScript 文章标签： javascript js

本文链接：https://blog.csdn.net/qq_41135146/article/details/115394055

版权

JavaScript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

获取页面标签对象的常用方法

//根据id获取标签对象 获取到的是一个
document.getElementById()
//根据name属性 获取相应的标签 多个
document.getElementsByName()
//根据标签名字 获取相应的标签 多个
document.getElementsByTagName()
//根据类名获取相应的标签 多个
document.getElementsByClassName()
//根据选择器获取标签 1个
document.querySelector()
//根据选择器获取标签 全部
document.querySelectorAll()
//选取多个的时候默认储存在数组中

1.document.getElementById()

<body>
	<div id = "Test">Test</div>		
	<script type="text/javascript">
		//根据id获取标签对象 获取到的是一个
		var a = document.getElementById("Test")
		//控制台输出
		console.log(a);
	</script>
</body>

2.document.getElementsByName()

1.获取单个标签时

<body>
	<div name = "Test">Test</div>
	<script type="text/javascript">
		//根据name属性 获取相应的标签 多个
		var a = document.getElementsByName("Test")
		//控制台输出
		console.log(a);		
	</script>
</body

2.获取多个标签时

<body>
	<div name = "Test">Test</div>
	<div name = "Test">Test</div>
	<script type="text/javascript">
		//根据name属性 获取相应的标签 多个
		var a = document.getElementsByName("Test")
		//控制台输出	
		console.log(a);		
	</script>
</body>

3.document.getElementsByTagName()

1.获取单个标签时

<body>
	<div name = "Test">Test</div>

	<script type="text/javascript">
		//根据标签名字 获取相应的标签 多个
		var a = document.getElementsByTagName("div")
		//控制台输出
		console.log(a);	
	</script>
</body>

2.获取多个标签时

4.document.getElementsByClassName()

1.获取单个标签时

<body>
	<!-- <div class = "">Test</div> -->
	<div class = "Test">Test1</div>
	<!-- <div class = "Test">Test2</div> -->
	<script type="text/javascript">
		//根据类名获取相应的标签 多个	
		var a = document.getElementsByClassName("Test")
		//控制台输出
		console.log(a);		
	</script>
</body>

2.获取多个标签时

<body>
	<!-- <div class = "">Test</div> -->
	<div class = "Test">Test1</div>
	<div class = "Test">Test2</div>
	<script type="text/javascript">
		//根据类名获取相应的标签 多个	
		var a = document.getElementsByClassName("Test")
		//控制台输出
		console.log(a);			
	</script>
</body>

5.document.querySelector()

<body>
	<div class = "Test">Test1</div>
	<div class = "Test">Test2</div>
	<script type="text/javascript">
		//选择器 可以通过传递的参数 选择 标签名body id #id 类名 .Test
        //选择页面中的第一个
		var a = document.querySelector(".Test");
		//控制台输出	
		console.log(a);
	</script>
</body>

6.document.querySelectorAll()

<body>
	<div class = "Test">Test1</div>
	<div class = "Test">Test2</div>
	<script type="text/javascript">
		//选择器 可以通过传递的参数 选择 标签名body id #id 类名 .Test
		var a = document.querySelectorAll(".Test");
		//控制台输出	
		console.log(a);	
	</script>
</body>

╰(￣ω￣ｏ)沫儿

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS中获取页面标签对象的常用方法

获取页面标签对象的常用方法//根据id获取标签对象获取到的是一个document.getElementById()//根据name属性获取相应的标签多个document.getElementsByName()//根据标签名字获取相应的标签多个document.getElementsByTagName()//根据类名获取相应的标签多个document.getElementsByClassName()//根据选择器获取标签 1个document.querySelector()/
复制链接

扫一扫