如何遍历页面源中的所有文本框元素并找到所有这些文本框的名称？答案

【问题标题】：How to loop through all text box elements in a page source and find the names of all those text boxes?如何遍历页面源中的所有文本框元素并找到所有这些文本框的名称？
【发布时间】：2016-04-20 14:52:39
【问题描述】：

我正在编写一个程序，如果将源页面作为输入，它将输出网页中 GUI 元素的数量，并且它还应该输出所有文本框的名称。

我写的代码是：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>My App</title>
    <link rel="icon" type="image/x-icon" href="favicon.ico" />
</head>
<body>
<textarea id="TextArea1"></textarea>
        <br />
        <input id="Submit1" type="submit" value="submit" /></div>

    <script>
            var $textarea = $('#TextArea1'), $submit = $('#Submit1');
            $submit.click(function (e) {
                e.preventDefault();
                sourceCode = $textarea.val();
                var $searchObject = $('<div id="Searching"></div>');
                $searchObject.append($(sourceCode));


                //Search Tags


                $(function () {
                    var values = $('input[type=text]').map(function () {
                        return this.name
                    }).get()
                    alert(values);
                })

                alert("Name of text field = " + $searchObject.find('[type=text]').attr('name'));
                alert("Number of text boxes = " + $searchObject.find('[type=text]').length);
                alert("Number of Submit Buttons = " + $searchObject.find('[type=submit]').length);
                alert("Number of Telephone entry fields = " + $searchObject.find('[type=tel]').length);
                alert("Number of Password boxes = " + $searchObject.find('[type=password]').length);
                alert("Number of check boxes = " + $searchObject.find('[type=checkbox]').length);
                alert("Number of Radio buttons on page = " + $searchObject.find('[type=radio]').length);
                alert("Number of drop down lists = " + $searchObject.find('select').length);
                alert("Number of Images on page = " + $searchObject.find('img').length);
                alert("Number of Hyperlinks on page = " + $searchObject.find('a[href]').length);
                alert("Number of Buttons     = " + $searchObject.find('[type=button]').length);
                alert("Number of Date entry fields= " + $searchObject.find('[type=date]').length);
    });
        </script>
</body>
</html>

当我运行此代码时，我得到的结果总是“域”：

$(function () {
                    var values = $('input[type=text]').map(function () {
                        return this.name
                    }).get()
                    alert(values);
              })

我提供 Google 注册页面的源代码作为输入。谁能帮我编写一个循环遍历所有文本框并列出他们名字的代码？

【问题讨论】：

return this.name 如果你想得到name 道具！
哦，对不起，这是我的错误。我现在更新问题。 tnx
应用较早的建议后什么不起作用？
我总是将文本框的名称设为“域”，而文本框的真实名称是“名字”。我给了谷歌注册页面的源代码作为输入
下面提供的答案没有什么特别之处，因为他们也在使用 DOM api，而 jQuery 只是他们在核心 JS 中实现的扩展......祝你好运！

标签： javascript jquery html asp.net ajax

【解决方案1】：

这里是最简单最有效的：

document.addEventListener('DOMContentLoaded',()=>{
    var names = document.querySelectorAll('input[type=text]').map((o)=>o.name);
    console.log(names);
});
//PROTOTYPE MODIFICATIONS
NodeList.prototype.map = HTMLCollection.prototype.map = Array.prototype.map;

【讨论】：

为什么？ OP提供的代码有什么问题？您的代码与 OP 提供的代码有何不同？
@RayonDabre 现在它已经更新了，它看起来确实是一样的，但它仍然会在几毫秒内更高效:) 因为它是速记而不是通过 jQ 运行。
它是如何回答这个问题的？我猜问题不是关于“性能”！
@RayonDabre 你在说什么......我引用了一句，“谁能帮我编写一个循环遍历所有文本框并列出他们名字的代码？”
我的意思是，为什么$(function () { var values = $('input[type=text]').map(function () { return this.name }).get() alert(values); }) 不起作用？有什么猜测吗？

【解决方案2】：

要获取所有输入文本类型元素的名称，您需要遍历所有文本类型元素：

$searchObject.find('[type=text]').each(function() {
     alert($(this).attr("name"));
});

这将为您提供所有文本类型输入元素的名称。

【讨论】：

为什么？ OP 提供的代码有什么问题？您的代码与 OP 提供的代码有何不同？

【解决方案3】：

var textBoxList={}; //object
var textBoxListARR=[] //array

$.each($("input[type='text']"),function(i,e){
    textBoxListARR.push(e.name); //create array
    textBoxList[e.id]=e.name; //create object
});

//resutls
console.log(textBoxList);
console.log(textBoxListARR);

【讨论】：

欢迎来到 Stack Overflow！请添加一些解释为什么此代码有助于 OP。这将有助于为未来的观众提供一个可以学习的答案。请参阅How to Answer 了解更多信息。

【解决方案4】：

$('body').find("input[type='text']").each(function (index) {
   //get name or anything whatever you want.

});

这里的body是父元素

【讨论】：