JavaScript获取标签的六种方式

1.使用document.getElementById(‘id名’)；

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
    <div id="mId"></div>
    <script type="text/javascript">
	var div = document.getElementById('mId');
    </script>	
</body>
</html>

2.利用document.getElementsByName(‘name名’);

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div name="mName"></div>
	<script type="text/javascript">
		var div = document.getElementsByName('mName')[0];
                //获取到了div
	</script>
</body>
</html>

3.利用document.getElementsByTagName(‘标签名’);

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<script type="text/javascript">
		var div = document.getElementsByTagName('div')[0];
                //获取到了div 
                //element加了s表示是集合 获取的是一组元素 是伪数组
                //可以在获取元素后面加[写你想要的那个元素 数字表示 下标是0]; 
	</script>
</body>
</html>

4.利用document.getElementsByClassName(‘class名’); 有兼容性 ie9之前的不能用

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div class = "mClass">1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<script type="text/javascript">
		var div = document.getElementsByClassName('mClass')[0];
	</script>
</body>
</html>

5.利用document.querrySelector(‘可以写任何选择器只能选择一个’); 兼容性 ie8以后都能适用

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div class = "mClass">1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<script type="text/javascript">
		var div = document.querySelector('.mClass')[0];
		//获取class 要加 .
		//获取id    要加#
	</script>
</body>
</html>

6.利用document.querrySelectorAll(‘可以写任何选择器，可以选择多个’); 兼容性 ie8以后都能适用

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div class = "mClass">1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<script type="text/javascript">
		var div = document.querySelectorAll('.mClass')[0];
		//是个集合可以选择多个
	</script>
</body>
</html>

雪芽蓝域zzs

发布了28 篇原创文章 · 获赞 38 · 访问量 2万+

私信关注

JavaScript获取标签的六种方式

1.使用document.getElementById(‘id名’)；

2.利用document.getElementsByName(‘name名’);

3.利用document.getElementsByTagName(‘标签名’);

4.利用document.getElementsByClassName(‘class名’); 有兼容性 ie9之前的不能用

5.利用document.querrySelector(‘可以写任何选择器 只能选择一个’); 兼容性 ie8以后都能适用

6.利用document.querrySelectorAll(‘可以写任何选择器，可以选择多个’); 兼容性 ie8以后都能适用

猜你喜欢

5.利用document.querrySelector(‘可以写任何选择器只能选择一个’); 兼容性 ie8以后都能适用