差分對象

這Ĵ撥弄利用getElementsByClassName方法差分對象

這Ĵ撥弄使用的getElementById

<script>

當打印出的長度var「x」....長度對於class和id版本是不同的。 id版本實際上吐出了正確的值，即4 ......而不是1 ......哪一類吐出來的。

來源

2013-10-17 user2800382

爲的getElementById後的長度，它看起來是給長的它的孩子。對於getElementbyClassName實際上是給出匹配元素的集合，所以使用它的長度給出了匹配項的長度。 – HungryCoder

誰認爲這是一個好主意？還是downvote？這是一個很好的問題！ – djna

好懷疑。我很欣賞這個... – KarSho

document.getElementsByClassName

返回一組具有所有給定的類名的元素。當調用文檔對象時，搜索完整文檔，包括根節點在內的。你也可以在的任何元素上調用getElementsByClassName;它將只返回具有給定類名的指定根元素的後代的元素。

的document.getElementById

返回其ID到元素的引用。

Element.length

長度返回一個節點列表項的數量。

現在

在jsfiddles ..

document.getElementsByClassName("mySelect").length爲1 ..爲什麼呢？ document.getElementsByClassName ..返回一組元素..即數組..和，因爲只有與類名「mySelect」數組的長度的一個元件時便會1

document.getElementById("mySelect").length是4。爲什麼？的document.getElementById返回refrence的元素和有在元素的節點列表四種元素。（在你的案件4個<option> S）這樣Element.length將返回4 ..

來源

2013-10-17 05:41:22

區別在於，當您執行getElementByID時，系統會返回一個具有該ID的DOM元素。當您執行getElementsByClassName時，您將返回一個NodeList，其中包含具有分配給它的該類名稱的任何DOM元素。所以，當你在做x.length與getElementsByClassName你實際上在做NodeList.length這是1.

我認爲你實際上想要的是var x = document.getElementsByClassName("mySelect")[0].length;或其中的一些變化。

來源

2013-10-17 05:35:12 pjdanfor

GetElementsByClassName返回一組長度1，因此您需要獲取該集合的第一個元素並詢問其長度。

GetElementById直接給出了你的元素，然後你詢問它的長度，這給你的孩子的數量。

來源

2013-10-17 05:35:50 djna

maybey你可以試試這個而不是：

<script> 
function displayResult() 
{ 
var x=document.getElementsByName('Select'); 
alert(x.length); 
} 
</script> 
</head> 
<body> 

<form> 
Select your favorite fruit: 
<select Class="mySelect"> 
    <option value="apple" name="Select">Apple</option> 
    <option value="orange" name="Select">Orange</option> 
    <option value="pineapple" name="Select">Pineapple</option> 
    <option value="banana" name="Select">Banana</option> 
</select>

顯示值

來源

2013-10-17 06:01:40 Mindfull

回答

相關問題