Question

给出以下HTML页面提取。

<form>
    <select id="select">
    <option></option>
    <option></option>
    <option></option>           
    </select>
</form>

console.log();使用$("#select").length返回1和document.getElementById("select").length的结果返回3.有没有人对此为何有任何见解？我正在寻找使用返回值运行循环，但我不明白为什么它不同。难道他们都不应该返回3？谢谢！

Answer 1

$(...)返回一个jQuery对象，它是一个类似于数组的对象，具有零个或多个元素其length返回对象中的元素数。

document.getElementById()返回单个DOM对象，而不是任何数组（与getElement s ByClassName等复数版本相反）。
巧合的是，<select>元素具有length属性，可返回<select>中的项目数。
这就是你所看到的。

Answer 2

对于jquery案例，请使用：$("#select").get(0).length

这将为您提供jquery对象的数组列表中第一个也是唯一的选择DOM元素。这与您使用document.getElementById("select")调用获得的DOM元素相同。

更新：要回答评论，select DOM元素上的.length调用将返回select元素选项列表中的选项数。 jquery列表中的.length返回与提供的选择器匹配的元素数。 $("#select").get(0)与document.getElementById("select")是同一个对象。 $("#select")不是同一个对象 - 它是jquery对象的列表，而不是DOM元素。

jquery selectors vs vanilla JS选择器，.length返回不同的结果

2 个答案: