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

<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>

运行结果如下：

KevinYang-凯

发布了37 篇原创文章 · 获赞 22 · 访问量 2万+

私信关注

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

猜你喜欢