Фильтрующие элементы по tagName

Question

Example Fiddle.

Мне нужно добавить условия, поэтому мои входы поддержки кода (1 кнопка должна генерировать весь Json).

Я попытался фильтрации с помощью:

elements.tagName 

Но это дает мне неопределенное, я полагаю, это потому, что

var elements = document.getElementsByClassName('selectVal'); 

Возвращает нодлист. Как я могу фильтровать или адаптировать мой код, чтобы одна и та же функция поддерживала входные данные?

Мне нужно сохранить выбранный элемент в списке и строки в входах только одной кнопкой.

Answer 1

elements - это массив элементов, которые вы получаете от getElementsByClassName. Вы должны проверить tagName на elements[index] внутри цикла.

Добавить вход (заменить selectVal с лучшим классом для всех объектов формы, хотя):

<input id="textbox" class="selectVal" value="text value"> 

Вы можете изменить внутреннюю часть петли, чтобы искать метки

... 
var strSel = ''; 
if (element.tagName == 'SELECT') 
    strSel = element.options[element.selectedIndex].text; 
else if (element.tagName == 'INPUT') 
    strSel = element.value; 
... 

Answer 2

Я не знаю элегантный способ фильтрации списка, кроме использования чего-то вроде jQuery. Возможно, вы застряли со старым раствором школы:

var elements = document.getElementsByClassName('selectVal'); 
for (var i = 0; i < elements.length; ++i) { 
    var element = elements[i]; 
    if (i.tagName == 'DIV') { 
     // whatever 
    } 
} 

Это говорит, это будет вам найти все <div> S класса selectVal:

var elements = document.querySelectorAll('div.selectVal'); 

Это может быть достаточно в зависимости от вашего использования.

Answer 3

Как упоминалось в вышеупомянутом комментарии @adeneo, вы можете использовать querySelectorAll с несколькими селекторами, разделенными запятой , Чтобы получить значения .selectVal и input:

document.querySelectorAll('.selectVal, input'); 

Надеюсь, это поможет.

function getSelectedItems(){ 
 
    var elements = document.querySelectorAll('.selectVal, input') 
 

 
    for (var i = 0; i < elements.length; i++) { 
 
    var element = elements[i]; 
 

 
    if (element.tagName==='SELECT') 
 
     console.log(element.options[element.selectedIndex].text); 
 
    else 
 
     console.log(element.value); 
 
    } 
 
}

<select id="Sobre" class="selectVal"> 
 
    <option value="1" selected>fasfaf</option> 
 
    <option value="2">afsaf</option> 
 
    <option value="3">Fraasfsafe</option> 
 
</select> 
 

 
<select id="asdafa" class="selectVal"> 
 
    <option value="1">fassad</option> 
 
    <option value="2" selected>fasfsa</option> 
 
    <option value="3">asdasf</option> 
 
</select> 
 

 
<select id="asdf" class="selectVal"> 
 
    <option value="1">fdsa</option> 
 
    <option value="2">asdfg</option> 
 
    <option value="3" selected>dsaf</option> 
 
</select> 
 

 
<input name="test" value='input value' /> 
 
<button onClick="getSelectedItems()">Añadir</button>