tagName的過濾元素

Question

Example Fiddle。

我需要添加條件，以便我的代碼支持輸入（1個按鈕需要生成整個Json）。

我試着過濾：

elements.tagName 

但它給了我一個未定義的，我想這是因爲

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

返回一個節點列表。如何過濾或修改我的代碼，以便相同的功能支持輸入？

我需要將選定的項目存儲在列表中，而輸入中的字符串只需一個按鈕。

Answer 1

elements是您從getElementsByClassName獲得的元素數組。相反，您應該在循環內檢查elements[index]的tagName。

添加輸入（具有更好的類取代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>小號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>