Accessing elements by type in JavaScript

A while ago I was making some test in JavaScript, and played with a code to get the text of all elements with a certain class.

Now I was trying to make something like this but obtain all elements by a certain type, for example all elements type="text"

Is there any way to do this in JavaScript or should I use jQuery?

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

4 Answers

If you are lucky and need to care only for recent browsers, you can use:

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

"recent" means not IE6 and IE7

In plain-old JavaScript you can do this:

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

In jQuery, you would just do:

// select all inputs of type 'text' on the page $("input:text") // hide all text inputs which are descendants of div $("div.foo input:text").hide(); 

The sizzle selector engine (what powers JQuery) is perfectly geared up for this:

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

Or

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

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; }());