Question

这个J小提琴使用getElementsByClassName

这个小提琴使用getElementByID

<script>

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

Answer 1

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

GetElementById会直接为您提供元素，然后您会询问它的长度，从而为您提供子项数。

Answer 2

document.getElementsByClassName

返回一组包含所有给定类名的元素。什么时候调用文档对象，搜索完整的文档，包括根节点。您也可以调用getElementsByClassName 任何元素;它只会返回作为后代的元素指定具有给定类名的根元素。

现在在你的jsfiddles ..

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

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

Answer 3

不同之处在于，当您执行getElementByID时，您将返回一个具有该ID的DOM元素。当您执行getElementsByClassName时，将返回一个NodeList，其中包含分配了该类名的任何DOM元素。因此，当您使用getElementsByClassName执行x.length时，实际上您正在执行NodeList.length，即1。

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

Answer 4

也许你可以试试这个：

<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>

显示值

id和class对象的长度之间的差异

4 个答案: