js获取元素方式总结_js根据属性值获取元素

作者：不正经 | 2024-02-19 07:29:42

踩

js根据属性值获取元素

一、
根据id属性的值获取元素,返回来的是一个元素对象

document.getElementById(“id属性的值”);
根据标签名字获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象
document.getElementsByTagName(“标签名字”);
下面的需要ie9以上支持,新增h5特性
根据name属性的值获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象
document.getElementsByName(“name属性的值”)
根据类样式的名字来获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象
document.getElementsByClassName(“类样式的名字”)
根据选择器获取元素,返回来的是一个元素对象
document.querySelector(“选择器的名字”);
根据选择器获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象
document.querySelectorAll(“选择器的名字”)
案例

<body>
		<p>这是*************</p>
		<p class="cls"> 111111111111111111</p>
		<span>2222222222222222222</span>
		<div> 4444444444444444444444</div>
		<div class="cls">454545454545454</div>
		
	<input type="button" id="btn" value="显示效果" />
	<script>
			function my(id){
				return document.getElementById(id);
			}
		
		my("btn").onclick=function(){
			//通过name属性获取value值
		var inputs=	document.getElementsByClassName("cls");
		for (var i = 0; i < inputs.length; i++) {
			inputs[i].style.backgroundColor="red";
		}
		}
	</script>
	</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/不正经/article/detail/113382