如何按类型访问 DOM 元素？ （类似于 getElementsByName()）

Question

不久前，我在JavaScript中进行了一些测试， 并使用代码播放，以获取具有某个类别的所有元素的文本。

现在，我试图做出这样的事情，但通过某种类型获得所有元素，例如所有元素type =“ text”

是否有任何方法可以在JavaScript中执行此操作，或者我应该使用jQuery？

var xx = document.getElementsByClassName("class");
for (i=0;i<xx.length;i++){
    var str=xx[i].innerHTML;
            alert(str);
}

Answer 1

在纯老式的JavaScript中，您可以做到这一点：

var inputs = document.getElementsByTagName('input');

for(var i = 0; i < inputs.length; i++) {
    if(inputs[i].type.toLowerCase() == 'text') {
        alert(inputs[i].value);
    }
}

在JQuery中，您只会做：

// select all inputs of type 'text' on the page
$("input:text")

// hide all text inputs which are descendants of div class="foo"
$("div.foo input:text").hide();

Answer 2

Sizzle Selector Engine（什么功能JQuery）完美地为此做好了准备：

var elements = $('input[type=text]');

或

var elements = $('input:text');

Answer 3

var inputs = document.querySelectorAll("input[type=text]") ||
(function() {
    var ret=[], elems = document.getElementsByTagName('input'), i=0,l=elems.length;
    for (;i<l;i++) {
        if (elems[i].type.toLowerCase() === "text") {
            ret.push(elems[i]);
        }
    }

    return ret;
}());

Answer 4

如果你很幸运并且只需要关心最近的浏览器，你可以使用：

document.querySelectorAll('input[type=text]')

“recent”表示不是 IE6 和 IE7