javascript之获取对象几种方式比较

最新推荐文章于 2023-09-13 13:05:24 发布

stormkai

最新推荐文章于 2023-09-13 13:05:24 发布

阅读量507

点赞数

分类专栏： HTML/JavaScript/CSS/JQuery 文章标签： document.getElementB

本文链接：https://blog.csdn.net/stormkai/article/details/52216097

版权

HTML/JavaScript/CSS/JQuery 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<span style="font-family: Arial, Helvetica, sans-serif;">1.document.getElementById()：返回拥有指定id的第一个对象的引用
</span>

<span style="font-family: Arial, Helvetica, sans-serif;">
</span>

<span style="font-family: Arial, Helvetica, sans-serif;"><!DOCTYPE html></span>

<html>
	<head>
		<meta charset="UTF-8">
		<title>js获得对象的三种方式比较</title>
		<script>
			window.οnlοad=function(){
				var dom = document.getElementById("costNumber");
				console.info(dom);
			}
			
		</script>
	</head>
	<body>
		
		<input type="text" id="costNumber" value="成本1" /><br /><br />
		<input type="text" id="costNumber" value="成本2" /><br /><br />
		<input type="text" id="costNumber" value="成本3" /><br /><br />
	</body>
</html>

运行后结果如下：

<input type="text" id="costNumber" value="成本1">

2.document.getElementsByName()：返回的是带有指定名称对象的集合

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>js获得对象的三种方式比较</title>
		<script>
			window.οnlοad=function(){
				var doms = document.getElementsByName("costNumber");
				console.info(doms);
				for(var i=0; i<doms.length; i++){
					console.info(doms[i]);
				}
			}
			
		</script>
	</head>
	<body>
		
		<input type="text" name="costNumber" value="成本1" /><br /><br />
		<input type="text" name="costNumber" value="成本2" /><br /><br />
		<input type="text" name="costNumber" value="成本3" /><br /><br />
	</body>
</html>

运行结果如下：

3.document.getElementByTagName()：返回相同标签内文本框的内容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>js获得对象的三种方式比较</title>
		<script>
			window.οnlοad=function(){
				var doms = document.getElementsByTagName("input");
				console.info(doms);
				for(var i=0; i<doms.length; i++){
					console.info(doms[i]);
				}
			}
			
		</script>
	</head>
	<body>
		
		<input type="text" name="costNumber" value="成本1" /><br /><br />
		<input type="text" name="costNumber" value="成本2" /><br /><br />
		<input type="text" name="costNumber" value="成本3" /><br /><br />
	</body>
</html>

运行结果如下：

stormkai

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript之获取对象几种方式比较

1.document.getElementById()：返回拥有指定id的第一个对象的引用 js获得对象的三种方式比较 window.onload=function(){ var dom = document.getElementById("costNumber"); console.info(dom); }
复制链接

扫一扫

专栏目录