当前位置：首页 > news >正文

响应式Web开发项目教程（HTML5+CSS3+Bootstrap）第2版例5-2 JavaScript 获取HTML元素对象

news 2025/6/22 20:26:07

代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript 获取 HTML 元素对象</title>
</head><body>
<input type="text" value="admin" />
<br>
<input type="password" value="123456" />
<br>
<input type="text" value="157****9089" />
<br>
<input type="button" value="元素个数" id="iptNum" />
<script>var Oiptnum = document.getElementById('iptNum');var Oipts = document.getElementsByTagName('input');Oiptnum.onclick = function (){alert('有'+Oipts.length+'个<input>元素');};</script>
</body>
</html>

上述代码中:
第9~15行代码定义了4个< input >标签。第15行代码给元素设置id为iptNum，并在第17行代码中使用getElementById()方法获取该元素对象Oiptnum；然后在第14行代码中使用getElementsByTagName()方法返回所有< input >标签对象的集合，赋值给变量Oipts。第19 ~ 21行代码给Opitnum绑定鼠标单击事件，使用alert弹出< input >标签的个数。

运行效果

在这里插入图片描述
单击“元素个数”按钮，触发其对应的单击事件，弹出框< input >元素的个数。

getElementsByName()方法是通过name属性来获取元素的，一般用于获取表单元素。name属性的值不要求必须是唯一的，多个元素也可以有同样的名字。它返回的是一个对象集合，使用索引获取元素。如果想取出第一个< input >标签的值可以使用“document.getElementsByName()[0]；”。通常情况下，要获取单个元素的值建议使用“document.getElementById()”.