通过id,class获取对应的值

最新推荐文章于 2022-09-06 21:33:32 发布

后端菜鸟001

最新推荐文章于 2022-09-06 21:33:32 发布

阅读量809

点赞数

文章标签： javascript html5 html

本文链接：https://blog.csdn.net/QWEmy/article/details/119898025

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function  name(){
				const c=document.getElementsByClassName("a");
				console.log(c[0]);
				console.log(c[1]);
				
			};
			function  ids(){
				const d=document.getElementById("b");
				console.log(d);
			}
			
			
		</script>
	</head>
	<body>
		<p onclick="name()">点击我,获取值</p>
		<div  class="a">你们好</div>
		<div  class="a">早晨好</div>
		<div>大家好，才是真的好！</div>
		<p  onclick="ids()">获取另一个值</p>
		<div id="b">通过class调用</div>
		<div class="b">通过calss搞事情</div>
		
	</body>
</html>

通过类名调用，通过id调用获取对应的属性值。

同名的id只能设置一个，class可以有多个，以数组的形式调用它，根据数组的下标获取并且修改对应的值，如：c[1].innerHTML="大咖们好",就可以修改对应的值。

另一种方法调用：window.document.getElementById("b");

也可以通过 window.document.write('hello js');直接在网页显示出来。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JS 对象</title>
		<script>
			<!-- Window对象 -->
			//当整个网页都加载完,才会被执行的功能
			// window.onload = function(){
			// 	console.log(typeof 100); 
			// }
			// //弹出框
			// window.alert(100);
			// //确认框
			// window.confirm("你说对吗?");
			// //输入框
			// var a = window.prompt("请输入数字");
			// console.log(typeof a); //string
			// //string类型的数字转成number类型的数字
			// var b = parseInt(a);
			// console.log(typeof b); //number
			
			//window.document返回document对象,代表整个网页文件.
			/**
			 * window.document.getElementsByName();
			 *  1.document.getELementById（“id”）；根据id找，最多找一个。

　           　 var a=document.getELementById（“id”）；把找到的元素放在变量a中。

　　            2.getElementsByClassName()根据class找，找出来的是数组。

　　            3.getElementsByName()根据name找，找出来的是数组。

　           　 4.getElementsByTagName()根据标签名找，找出来的是数组。
			 */
			// window.document.write('hello js');
			// window.document.getElementById("a");
			// window.document.getElementsByTagName();
			 //window.document.getElementsByClassName();
			 function  getElements(){
				 
				 
			const x=document.getElementsByTagName("div");
			console.log(x.length);
			console.log(x[1].innerHTML);
			
			
			// const c= window.document.getElementsByName("c");
			// alert(c.length);
			// console.log(c);
			// console.log(c[1].innerHTML);
			// c[0].innerHTML="666";
			 }
			
			
		</script>
	</head>
	<body>
		<div  id="a">大家好</div>
		<div class="b">这是第一个class</div>
		<div class="b">这是第二个class</div>
		<div name="c">name1</div>
		<div name="c">name2</div>
		<br />
		1<input name="d"  type="text"  size="18" value="18"/><br />
		2<input name="d"  type="text"  size="18"  value="66"/><br />
		3<input name="d"  type="text"  size="18"  value="98"/><br />
		<input type="button" onclick="getElements()"
		value="猜猜我是谁？" />
	</body>
</html>

其他的属性值都是通过数组的形式获取，和上面的测试方法一样。

后端菜鸟001

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
通过id,class获取对应的值

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>测试 DOM解析网页文件</title> <script> function fun(){ // 1. 通过id的值,获取元素 var x = document.getElementById("a"); console.log(x);//打印了元素 co.
复制链接

扫一扫