Javascript (vanilla) - Как указать тип элемента при использовании querySelectorAll?

Question

Как я могу указать тип элемента при использовании querySelecterAll()? Например, я хочу выбрать все поля ввода, где type = text в форме. Не для стилизации, а для функциональности.

Это то, что я прямо сейчас:

var inputGroup = document.getElementById('contactForm'); 

var inputs = inputGroup.querySelectorAll("input"); 

for (var i = 0; i < inputs.length; i++) { 
    inputs[i].addEventListener("blur", checkInput); 
} 

function checkInput() { 
    this.value === "" ? this.className = "error" : this.className = "valid"; 
} 

Сейчас я также присматривается входы, где тип установлен представить, радио и т.д. Но я просто хочу, чтобы предназначаться входные элементы, где тип установлен в текст.

Answer 1

Вы можете использовать attribute selector syntax непосредственно в вызове querySelectorAll:

var inputs = inputGroup.querySelectorAll('input[type="text"]'); 

Это, однако, может пропустить <input> теги, которые не имеют атрибут type, указанный на всех. Вы можете обойти это также подбирая <input> теги без него в вашем селекторе:

var inputs = inputGroup.querySelectorAll('input[type="text"],input:not([type])');