当元素在Nodelist中时，如何获取元素的值？

Question

我目前正在为客户的调查表应用程序进行“导出到csv”，在该应用程序中，所有用户输入数据均被捕获并写入.csv文件。

由getElementsByTagName（）捕获的HTML集合中同时存在<input>和<select>元素。以下是我的HTML的摘要：

 <tr>
    <td><input type="text" id="person1" name="person1"></td>
    <td>
        <select name="person1_lang1_primary" id="person1_lang1_select">
            <option value=""></option>
            <option value="english">English</option>
            <option value="Spanish">Spanish</option>
            <option value="other1">Other1 - specify below</option>
            <option value="other2">Other2 - specify below</option>
            <option value="other3">Other3 - specify below</option>
            <option value="other4">Other4 - specify below</option>
        </select>
    </td>
 <tr>

全部起作用的功能是：

class TableCSVExporter {
constructor (table, includeHeaders = true) {

    this.table = table;
    this.rows = Array.from(table.querySelectorAll("tr"));

    if(!includeHeaders && this.rows[0].querySelectorAll("th").length) {
        this.rows.shift();
    }


}

convertToCSV() {
    const lines = [];
    const numCols = this._findLongestRowLength();

    for(const row of this.rows) {
        let line = "";

        for(let i = 0; i < numCols; i++) {
            if (row.children[i] !== undefined) {
                line += TableCSVExporter.parseCell(row.children[i]);
            }

            line += (i !== (numCols - 1)) ? "," : "";
        }

        lines.push(line);
        // console.log(row);
    }

    return lines.join("\n");
}

_findLongestRowLength() {
    return this.rows.reduce((l, row) => row.childElementCount > l ? row.childElementCount : l, 0);
}

static parseCell (tableCell) {

    let input_elements = tableCell.getElementsByTagName("input");
    let select_elements = tableCell.getElementsByTagName("select");

    let inputArray = Array.from(input_elements);
    let selectArray = Array.from(select_elements);

    let elementsArray = [...inputArray, ...selectArray];
    let parsedValue = [...elementsArray];





    // Replace all double quotes with two double quotes
    parsedValue = parsedValue.replace(/"/g, `""`);

    // If value contains comma, new-line or double-quote, enclose in double quotes
    parsedValue = /[", \n]/.test(parsedValue) ? `"${parsedValue}"` : parsedValue;



    inputArray.forEach(element => console.log(element.value));
    selectArray.forEach(element => console.log(element.value));

    elementsArray.forEach(element => console.log(element.value));


    return parsedValue;

}

}

HTML文件中还有一个<script>，其中包含以下内容：

<script>
    const primaryInputByPerson = document.getElementById("primaryInputByPerson");
    const btnExportCSV = document.getElementById("btnExportToCSV");


    btnExportCSV.addEventListener("click", () => {
        const exporter = new TableCSVExporter(primaryInputByPerson);
        const csvOutput = exporter.convertToCSV();
        const csvBlob = new Blob([csvOutput], {type: "text/csv" });
        const blobURL = URL.createObjectURL(csvBlob);

        const anchorElement = document.createElement("a");

        anchorElement.href = blobURL;
        // sets the name of the file the user will download
        anchorElement.download = "LEAT-data.csv";
        anchorElement.click();

        // reduces the amount of memory used by the browser
        setTimeout(() => {
            URL.revokeObjectURL(blobURL);
        }, 500);
    })

    // console.log(new TableCSVExporter(primaryInputByPerson).convertToCSV());



</script>

我已经知道可以从inputArray和selectArray记录每个元素的用户输入值了，尽管我似乎无法弄清楚如何获取parsedValue来保存值。我将tableCell转换成数组是因为我读到NodeLists和HTMLcollections不提供与常规数组相同的功能。我实质上是想像大多数DOM场景一样使用.value来获取值。

下载的.csv文件将显示undefined，null或[object HTMLInputElement] / [object HTMLSelectElement]，具体取决于我console.log()。

这是我在网站上的第一个问题。我想我可能会违反一些（或很多）约定，并欢迎将来提出任何更好的问题的反馈！

注意：我要感谢Domenic Corso和他的视频https://www.youtube.com/watch?v=cpHCv3gbPuk&t=713s，因为他提出了几乎所有上面的代码！

Answer 1

尤里卡！

我终于把这枪的太阳弄碎了。这是执行此操作的行：

elementsArray.forEach(element => parsedValue.push(element.value));

我因为这一行而来到这里：elementsArray.forEach(element => console.log(element.value));

[我发现我能够将要输入的文本输入到<input>和<select>字段中以打印到控制台，因此经过反复试验，我写了第一行来推送所有内容放入新数组parsedValue = []，返回parsedValue，并成功将其写入CSV文件！

如果阅读此书的任何人都想进一步澄清我对该项目到底在做什么，我很乐意提供它！