2

这个 J 小提琴利用 getElementsByClassName

http://jsfiddle.net/YZTpn/

这个 j 小提琴使用 getElementByID

http://jsfiddle.net/9Fa89/

<script>

当我打印出 var "x".... 的长度时，类和 id 版本的长度是不同的。id 版本实际上吐出正确的值，即 4... 而不是 1.... 哪个类吐出。

4

4 回答 4

3

document.getElementsByClassName

返回一组具有所有给定类名的元素。在文档对象上调用时，将搜索完整的文档，包括根节点。您也可以在任何元素上调用 getElementsByClassName；它将仅返回具有给定类名的指定根元素的后代元素。

阅读更多..

document.getElementById

通过其 ID 返回对元素的引用。

阅读更多

元素长度

length 返回 NodeList 中的项目数。

阅读更多

现在在你的jsfiddles..

document.getElementsByClassName("mySelect" ).length是 1.. 为什么？document.getElementsByClassName .. 返回一组元素.. 即一个数组.. 由于只有一个类名为“mySelect”的元素，数组的长度将为 1

document.getElementById("mySelect" ).length是 4. 为什么？document.getElementById 返回对元素的引用，并且由于元素的节点列表中有四个元素..（在您的情况下为 4<option>秒）所以 Element.length 将返回 4..

于 2013-10-17T05:41:22.910 回答
3

GetElementsByClassName 返回一个长度为 1 的集合，因此您需要获取集合的第一个元素并询问其长度。

GetElementById 直接给你元素，然后你问它的长度，它给你孩子的数量。

于 2013-10-17T05:35:50.083 回答
0

也许你可以试试这个：

<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-17T06:01:40.957 回答
0

不同之处在于，当您执行时getElementByID，您将返回一个具有该 ID 的单个 DOM 元素。当您执行getElementsByClassName时，您将返回一个NodeList包含分配了该类名的任何 DOM 元素。所以，当你在做 x.length 时，getElementsByClassName你实际上是在做 NodeList.length ，它是 1。

我认为你真正想要的是var x = document.getElementsByClassName("mySelect")[0].length;或者它的一些变体。

于 2013-10-17T05:35:12.760 回答