如何使用Javascript选择提交类型的按钮？

Question

我有两个这样的按钮:

<button class="medium" id="register" type="button"
        onclick="location.href='/Account/Register'">Register</button>
<button class="medium default" id="login" type="submit">Login</button>

我的Javascript按ID选择按钮:

<script type="text/javascript">
    (function () {
        document.getElementsByClassName('form')[0]
            .addEventListener("submit", function (ev) {
                document.getElementById('login').innerHTML += '&nbsp;<i class="fa fa-spin fa-spinner" data-ng-show="fetching.length > 0"></i>';
            }, false);
    })();
</script>

如何改变这一点,以便javascripts选择具有"提交"类型的按钮或具有"提交"类的按钮,如果这不可能的话？

请注意,我想这样做是因为javascript被许多表单使用.我需要一种常用的方法来找到"提交"按钮.

Answer 1

您可以使用.querySelector()查找与CSS样式格式选择器匹配的第一个元素 - 它可以作为一种document搜索(显然)整个文档的方法,或者作为元素的方法来搜索该元素:

document.querySelector('button[type="submit"]').innerHTML += ' ...';
// OR
someElement.querySelector('button[type="submit"]').innerHTML += ' ...';

后者可能对你最有用,因为你想要找到一个可能在表单中的提交按钮,并且你已经有了对表单的引用:在addEventListener()你可以使用的表单附带的提交处理程序中this.querySelector(...).

演示:http://jsfiddle.net/h6uuN/

.querySelector()几乎所有现代浏览器都支持该方法,但(一如既往)关于IE的注释:从IE8开始支持.但是,因为你addEventListener()大概使用的是你无论如何都不关心旧的IE.

如果您确实需要支持旧版本的IE,您可以使用它.getElementsByTagName()来查找所有按钮元素,然后循环查找它们type="submit".

Answer 2

您可以使用querySelectorAll。它可以返回到 IE8。

document.querySelectorAll('[type=submit]')

JS 小提琴在这里http://jsfiddle.net/X2RLg/