几种常见的获取页面元素数据的方法

页面之所以是动态的,其实不仅仅是因为他是具有js的动态效果的,还有一部分是因为他的数据是动态的,所以页面才会显得很有活性,但是很多的时候获取数据是一个很恶心的事情,动不动就拿不到数据,作为一个前端,其实很大一部分时间也都是在处理数据,今天简单的将常见的几种获取数据的办法记录一下,不为别的,以后可以直接用,虽然简单的要死,但是还是记录一下比较好,说不定哪天脑子抽风忘记了....

源码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--第一种 form层级取数据 -->
	<form name="test">
		<input type="text" name="ftest" value="我是form层级取出来的数据"/><br />
	</form>	
	<!--dom操作name取数据-->		
	<input type="text" name="test_name" value="我是操作dom的name取出来的数据"/><br />
	<!--dom操作id取数据-->
	<input type="text" id="test_id" value="我是操作dom的id取出来的数据"/><br />
	<!--Jquery根据class获取数据-->
	<input type="text" class="Jquery_class" value="我是jquery根据class取出来的数据"/><br />
	<!--Jquery根据id获取数据-->
	<input type="text" id="Jquery_id" value="我是jquery根据id取出来的数据"/><br />
		
	</body>
	<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
	<script type="text/javascript">
		window.onload = function(){
			/*第一种*/
		var test1 = document.test.ftest.value;
		console.log("第一种取出来的数据是:"+test1);
		/*第二种*/
		var test2 = document.getElementsByName("test_name");
		console.log("第二种取出来的数据是:"+test2.length);
		/*第三种*/
		var test3 = document.getElementById("test_id").value;
		console.log("第三种取出来的数据是:"+test3);
		/*第四种*/
		var test4 = $(".Jquery_class").val();
		console.log("第四种取出来的数据是:"+test4);
		/*第五种*/
		var test5 = $("#Jquery_id").val();
		console.log("第五种取出来的数据是:"+test5);
		}
		
	</script>
</html>
PS:页面操作dom元素的时候,如果是操作的是name,那么是不可以直接拿到数据的,是因为页面上是允许多个name属性的,所以nana取得其实是元素,不是数据,也就是说您可以在一个页面上面写很多的name,最后获取的是所有的长度。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

是悟能了

阅读就是对我最大的支持,感谢

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值