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

代码

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+'个元素');
        };
    script>
body>
html>

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

运行效果

响应式Web开发项目教程(HTML5+CSS3+Bootstrap)第2版 例5-2 JavaScript 获取HTML元素对象_第1张图片
单击“元素个数”按钮,触发其对应的单击事件,弹出框< input >元素的个数。
响应式Web开发项目教程(HTML5+CSS3+Bootstrap)第2版 例5-2 JavaScript 获取HTML元素对象_第2张图片
getElementsByName()方法是通过name属性来获取元素的,一般用于获取表单元素。name属性的值不要求必须是唯一的,多个元素也可以有同样的名字。它返回的是一个对象集合,使用索引获取元素。如果想取出第一个< input >标签的值可以使用“document.getElementsByName()[0];”。通常情况下,要获取单个元素的值建议使用“document.getElementById()”.

你可能感兴趣的:(前端,javascript,html)