JS获取元素的方式

最新推荐文章于 2024-01-24 16:27:32 发布

对明天心动.

最新推荐文章于 2024-01-24 16:27:32 发布

阅读量341

点赞数

文章标签： html html5 javascript

本文链接：https://blog.csdn.net/qq_52443764/article/details/120648501

版权

1、通过ID获取（getElementById）

根据指定的 id 属性值得到对象。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<h1>通过id查找HTML元素</h1>
		<div id="box"></div>
	</body>
	<script type="text/javascript">
		//获取id值为box的元素
		var box=document.getElementsByTagName("box");
		//给其添加内容
		box.innerHTML="我是div";
	</script>
</html>

2、通过标签名查找 HTML 元素（getElementsByTagName）

根据标签名得到对象。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<h1>通过标签名查找HTML元素</h1>
		<div></div>
	</body>
	<script type="text/javascript">
		//获取div标签
		var div=document.getElementsByTagName("div")[0];
		//在div标签里添加内容
		div.innerHTML="我是div";
	</script>
</html>

3、通过类名查找 HTML 元素（getElementsByClassName）

根据类名得到对象。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<h1>通过类名查找HTML元素</h1>
		<p class="text"></p>
	</body>
	<script type="text/javascript">
		//获取class值为text的元素
		var text=document.getElementsByClassName("text")[0];
		//给其添加内容
		text.innerHTML="我是p标签";
	</script>
</html>

4、通过name属性查找 HTML 元素（getElementsByName）

根据name属性得到对象。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<h1>通过name属性查找HTML元素</h1>
		<div name="text"></div>
	</body>
	<script type="text/javascript">
		//获取有name属性的元素
		var div=document.getElementsByName("text")[0];
		//将其打印出来
		console.log(div);
	</script>
</html>

5、通过选择器获取一个元素（querySelector）

根据css选择器得到对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<h1>通过CSS选择器查找HTML元素</h1>
		<div class="div"></div>
		<p id="p"></p>
	</body>
	<script type="text/javascript">
		//获取div标签
		var div=document.querySelector(".div");
		//获取p标签
		var p=document.querySelector("#p");
		//将其打印出来
		console.log(div);
		console.log(p);
	</script>
</html>

6、通过选择器获取一组元素（querySelectorAll）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>通过CSS选择器查找所有HTML元素</h1>
		<p class="text">我是p1</p>
		<p class="text">我是p2</p>
		<p class="text">我是p3</p>
	</body>
	<script>
			// 获取文档中所有 class="text" 的 <p> 元素
			var text = document.querySelectorAll(".text");
			// 设置 class="text" 的第一个 <p> 元素的背景颜色
			text[0].style.backgroundColor = "red";
	</script>
</html>

对明天心动.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS获取元素的方式

1、通过ID获取（getElementById）根据指定的 id 属性值得到对象。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <h1>通过id查找HTML元素</h1> <div id="box"></div>.
复制链接

扫一扫