通过标签名获取input节点对象竟额外多个一个

339+

已于 2022-10-23 15:27:30 修改

阅读量213

点赞数

分类专栏： JavaScript零基础文章标签： javascript 前端 css

于 2022-10-23 13:39:39 首次发布

本文链接：https://blog.csdn.net/m0_47743942/article/details/127473578

版权

JavaScript零基础专栏收录该内容

14 篇文章 0 订阅

订阅专栏

在JavaScript滚动事件处理中，发现通过getElementsByTagName获取的input元素数组比预期多一个，原因是浏览器自动添加了一个隐藏的input标签。这个隐藏的input类型为hidden，通常用于存储不可见的数据，如sessionkey。了解隐藏域在表单提交中的作用和应用场景，如区分用户提交方式、传递额外信息等。

摘要由CSDN通过智能技术生成

JavaScript基础问题

问题

使用Microsoft Edge在利用JS做滚动条必须滑动到底才能注册的练习时，发现使用document.getElementsByTagName("input");返回的一组元素节点对象竟然有3个，但在body中明明只定义了2个input标签，这导致代码中从类数组获取节点对象的索引必须改变。
在这里插入图片描述

下面是代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #info{
            width: 200px;
            height: 200px;
            overflow: auto;
        }
        #submit{
            width: 200px;
            height: 25px;
            background-color:bisque;
        }
    </style>
    <script>
        window.onload = function(){
            var input = document.getElementsByTagName("input");
            console.log(input.length);
            for(var i=0;i<input.length;i++){
                console.log(input[i].id);
            }
            var p = document.getElementById("info");
            p.onscroll = function(){
                if(p.scrollHeight - p.scrollTop == p.clientHeight){
                    input[1].disabled = false;
                    input[2].disabled = false;
                }
            }
        }
    </script>
</head>
<body>
    <h2> 欢迎用户注册! </h2>
    <p id="info">
        请仔细阅读以下协议,如果没有阅读完全则无法完成注册!
        请仔细阅读以下协议,如果没有阅读完全则无法完成注册!
        请仔细阅读以下协议,如果没有阅读完全则无法完成注册!
        请仔细阅读以下协议,如果没有阅读完全则无法完成注册!
        请仔细阅读以下协议,如果没有阅读完全则无法完成注册!
        请仔细阅读以下协议,如果没有阅读完全则无法完成注册!
    </p>
    <input id="checkbox" type="checkbox" disabled="disabled">我已阅读并同意服务协议
    <br>
    <input id="submit" type="submit" value="立即注册" disabled="disabled">

</body>
</html>

过程

可以看到中类数组中获取的索引为1和2，不然实现不了相关功能。即

input[1].disabled = false;
input[2].disabled = false;

于是我们给标签加上id并通过断点看看多余的一个元素节点是什么
在这里插入图片描述

可以看到长度确实为3，且多余的input标签且id为_w_simile

打开元素，我们可以看到在script标签下浏览器添加了input标签且id为_w_simile，不过该type为hidden

在这里插入图片描述

结论

type=“hidden”：表示隐藏域，不显示在页面上，但可随表单一起提交给后端

基本语法：

<input type="hidden" name="field＿name" value="value">

作用：

隐藏域在页面中对于用户是不可见的，在表单中插入隐藏域的目的在于收集或发送信息，以利于被处理表单的程序所使用。浏览者单击发送按钮发送表单的时候，隐藏域的信息也被一起发送到服务器
有些时候我们要给用户一信息，让他在提交表单时提交上来以确定用户身份，如sessionkey，等等．当然这些东西也能用cookie实现，但使用隐藏域就简单的多了．而且不会有浏览器不支持，用户禁用cookie的烦恼
可以利用隐藏域区分用户是按那一个按钮提交的表单
网页中有多个form，不能同时提交的，但这些form却相互作用，可以在form中添加隐藏域来使它们联系起来
JavaScript不支持全局变量，但有时我们必须用全局变量，可以把值先存在隐藏域里，这样值就不会丢失