为什么我在使用 jQuery 和 JavaScript 时得到不同的结果

Question

这是我的html代码

<table id="example" class="display" style="width:100%">
    <tbody>
        <tr class="data">
            <td>1</td>
        </tr>
        <tr class="data">
            <td>2</td>
        </tr>
        <tr class="data">
            <td>3</td>
        </tr>
        <tr class="data">
            <td>4</td>
        </tr>
        <tr class="data">
            <td>5</td>
        </tr>
        <tr class="data">
            <td>6</td>
        </tr>
        <tr class="data">
            <td>7</td>
        </tr>
    </tbody>
</table>

我使用带有 jQ​​uery 脚本的 jQuery 数据表

$('#example').DataTable({
    "lengthMenu": [[5, 25, 50, -1], [5, 25, 50, "All"]],
    "columnDefs": [
            { type: "num", targets: 0 },
     ]
});

我不明白为什么我在下面使用这段代码会显示 2 个不同的结果

list= document.getElementsByClassName("data");
console.log(list.length); // 7
$('button').on('click', function() {
    console.log(list.length); //5
});

感谢您的帮助。

Answer 1

您的第一个console.log(list.length); 将在$('#example').DataTable 之前执行，它将返回7，因为有7 行具有类data。

那是因为一旦你应用了$('#example').DataTable，它只会渲染（显示）5 rows，所以当你使用list.length时，它会返回5。

---

仅供参考 - 当您编写 list = document.getElementsByClassName("data"); 时，Document.getElementsByClassName() 不会将 cache 生成 list 对象。这意味着当您在click 中使用list.length 时，它将执行document.getElementsByClassName("data").length。每次您使用list 时，它都会一次又一次地扫描整个文档。

参考 - Document.getElementsByClassName()

警告：这是直播HTMLCollection。 DOM 中的更改将在更改发生时反映在数组中。如果此数组选择的元素不再符合选择器的条件，它将自动被删除。出于迭代目的，请注意这一点。