Several common methods to obtain page element data

The reason why the page is dynamic is not only because it has the dynamic effect of js, but also because its data is dynamic, so the page will appear very active, but in many cases, obtaining data is a It's a disgusting thing. You can't get data at all times. As a front-end, in fact, a large part of the time is also processing data. Today, I will simply record several common methods of obtaining data. Use it directly, although it's simple to die, it's better to record it, maybe one day I'll forget it...

Source code:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--The first form level takes data-->
	<form name="test">
		<input type="text" name="ftest" value="I am the data from the form level"/><br />
	</form>	
	<!--dom operation name to get data -->		
	<input type="text" name="test_name" value="I am the data from the name of the operation dom"/><br />
	<!--dom operation id to get data -->
	<input type="text" id="test_id" value="I am the data extracted by the id of the DOM"/><br />
	<!--Jquery gets data according to class -->
	<input type="text" class="Jquery_class" value="I am the data extracted by jquery according to the class"/><br />
	<!--Jquery gets data by id-->
	<input type="text" id="Jquery_id" value="I am the data extracted by jquery based on id"/><br />
		
	</body>
	<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
	<script type="text/javascript">
		window.onload = function(){
			/*The first*/
		var test1 = document.test.ftest.value;
		console.log("The first data taken out is: "+test1);
		/*Secondary*/
		var test2 = document.getElementsByName("test_name");
		console.log("The second data taken out is: "+test2.length);
		/*The third kind*/
		var test3 = document.getElementById("test_id").value;
		console.log("The third type of data taken out is: "+test3);
		/*The fourth kind*/
		var test4 = $(".Jquery_class").val();
		console.log("The fourth type of data taken out is: "+test4);
		/*The fifth kind*/
		var test5 = $("#Jquery_id").val();
		console.log("The fifth type of data taken out is: "+test5);
		}
		
	</script>
</html>

PS: When the page operates the dom element, if the operation is the name, then the data cannot be obtained directly, because the page allows multiple name attributes, so the nana obtains the element, not the data, that is Say you can write a lot of names on a page, and finally get all the lengths.

Several common methods to obtain page element data

Guess you like