Document.getElementsByClassName 的长度为 0，但里面有元素

Question

[![Firefox Console][1]][1]在我的 Vue 应用程序中，我尝试使用 mdb-datatable，该表读取 data() 并相应地设置行。在使用 Ajax 加载数据后，我正在以编程方式设置行数据。在一个列中，我需要添加一个按钮，它需要调用一个函数。我正在尝试将 onclick 功能添加到具有“状态按钮”类的所有按钮，但发生了一些奇怪的事情。

当我打印 HtmlCollection 时，它里面有一个按钮，这是预期的，但我无法到达proceedButtons[0]，它是未定义的。 proceedButtons.length 也打印 0 长度，但我在控制台中看到了按钮。

我也尝试添加 onclick 函数，但可能“this”引用发生了变化，并且出现“proceedStatus 不是函数”之类的错误，它在外部范围内看不到任何内容。

<mdb-datatable
                :data="tableData"
                :searching="false"
                :pagination="false"
                :responsive="true"
                striped
                bordered/>

    export default {
        name: "Applications",
        mixins: [ServicesMixin, CommonsMixin],
        components: {
            Navbar,
            Multiselect,
            mdbDatatable
        },
        data () {
            return {
                statusFilter: null,
                searchedWord: '',
                jobRequirements: [],
                applications: [],
                options: ['Awaiting', 'Under review', 'Interview', 'Job Offer', 'Accepted'],
                tableData: {
                    columns: [
                        {
                            label: 'Name',
                            field: 'name',
                            sort: 'asc',
                        },
                        {
                            label: 'Date',
                            field: 'date',
                            sort: 'asc'
                        },
                        {
                            label: 'Compatibility',
                            field: 'compatibility',
                            sort: 'asc'
                        },
                        {
                            label: 'Status',
                            field: 'status',
                            sort: 'asc'
                        },
                        {
                            label: 'Proceed Application Status',
                            field: 'changeStatus',
                        }
                    ],
                        rows: []
                }
            }
        }

            fillTable(applications) {
                let statusButtonId = 0;

                applications.forEach(application => {
                    this.tableData.rows.push({
                        name: application.candidateLinkedIn.fullName,
                        date: this.parseDateFromDateObject(application.applicationDate),
                        compatibility: this.calculateJobCompatibility(application.candidateLinkedIn.linkedInSkillSet),
                        status: application.applicationStatus,
                        changeStatus: '<button type="button" class="btn-indigo btn-sm m-0 status-button"' +
                            ' style="margin-left: 1rem">' +
                            'Proceed Status</button>',
                        candidateSkillSet: application.candidateLinkedIn.linkedInSkillSet
                    });

                    statusButtonId++;
                });
            },
            addEventListenersToButtons() {
                let proceedButtons = document.getElementsByClassName("status-button")
                console.log(proceedButtons);
                console.log(proceedButtons[0])
                console.log(proceedButtons.item(0))
                /*
                proceedButtons.forEach(button => {
                    button.addEventListener("click",this.proceedStatus);
                });
                */
            },


  [1]: https://i.stack.imgur.com/zUplv.png

Answer 1

来自 MDN：

获取第一个具有'test'类的元素，如果没有匹配的元素，则为 undefined：

document.getElementsByClassName('test')[0]

所以 undefined 表示不匹配，即使长度为 0...

由于这不是一个数组，所以不会出现越界异常。

https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName

关于数组

您无法索引从getElementsByClassName 返回的列表。

你可以把它变成一个数组，然后索引它。

ES6

let proceedButtons = document.getElementsByClassName("status-button")
const arr = Array.from(proceedButtons);
console.log(arr[0]);

老派

const arr = []
Array.prototype.forEach.call(proceedButtons, function(el) {
    arr.push(el);
});
console.log(arr[0]);