如何从 NodeList 获取单个值

Question

帮我从NodeList中获取Item的单个值。我想将两个 NodeLists 映射到对象数组。我想创建一个将新书添加到图书馆的表单，该表单具有动态地将新作者的名字和姓氏行添加到表单的功能。但是无法理解如何将其他行的输入输入到 JSON 对象。我只找到了这个解决方案，但无法理解如何从 querySelectorAll NodeList 获取单个值，然后创建作者对象。我想拿这样的对象：

    const newBook = {
        title: 'title',
        year: '2000',
        authors: [{
               firstName: 'Name',
               lastName: 'LastName'
}]
    };

我想拿一个像这样的对象：

function Author(firstName, lastName) {
    this.firstname = firstName;
    this.lastname = lastName;
}
const authors = Object.create(null);
const $author = document.querySelector('#formAuthor');
const firstName = [$author.querySelectorAll("#firstName")];
const lastName = [$author.querySelectorAll('#lastName')];
for (let i = 0; i < firstName; i++) {
   let author = new Author(firstName[i], lastName[i]); //here

    authors.push(author);

这里是HTML

<div id="createForm" class="modal modal-fixed-footer">
    <div class="modal-content">
        <h4>Add new book</h4>
        <div class="row">
            <form class="col s12">
                <div class="row">
                    <div class="input-field col s6">
                        <input placeholder="title" id="formTitle" type="text" class="validate">
                        <label for="formTitle">title</label>
                    </div>
                    <div class="input-field col s6">
                        <input id="formYear" type="text" class="validate">
                        <label for="formYear">year</label>
                    </div>
                    <div class="input-field col s6 author" id="formAuthor">
                    </div>
                    <div class="input-field col s6 genre" id="formGenre">
                    </div>
                </div>
            </form>
        </div>
    </div>
    <div class="modal-footer">
        <div class="valign-wrapper leftBottom">
        <a class="waves-effect waves-light btn-small" id="createBook">Save</a>
        </div>
            <div class="fixed-action-btn">
            <a class="btn-floating btn-large red">
                <i class="large material-icons">mode_edit</i>
            </a>
            <ul>
                <li><a class="btn-floating blue" id="addAuthor"><i class="material-icons">person_add</i></a></li>
                <li><a class="btn-floating yellow darken-1" id="addGenre"><i class="material-icons">library_books</i></a></li>
            </ul>
        </div>
    </div>
</div>

添加额外的行

function onCreateBookAddAuthorRow() {
    let $authorRow = document.createElement('div');
    let count = $author.childElementCount;
    $authorRow.className = 'authorRow';
    $authorRow.innerHTML = `<div class="row" id="authorRow-${count}">
        <div class="input-field col s6">
          <input id="firstName" type="text" class="validate">
          <label for="firstName">First Name</label>
        </div>
        <div class="input-field col s6">
          <input id="lastName" type="text" class="validate">
          <label for="lastName">Last Name</label>
        </div>
        <a class="waves-effect waves-teal btn-flat" id="deleteAuthor-${count}">delete</a>
      </div>`;
    $author.appendChild($authorRow);

    document.querySelector('#deleteAuthor-' + count).addEventListener('click', function () {
        $author.removeChild($author.lastChild)
    });
}

Answer 1

首先，HTML

中不应有多个具有相同 ID 的元素

您可以使用 Array.from() 或扩展运算符 ... 将 NodeList 转换为 Array，如下所示

// consider converting the ID to a class like so,
const firstName = Array.from($author.querySelectorAll(".firstName"));
const lastName = Array.from($author.querySelectorAll('.lastName'));

// now if it div you might want to take the innerText or innerHTML to get the values. For input types use .value

for (let i = 0; i < firstName; i++) {
   let author = new Author(firstName[i].innerText, lastName[i].innerText);

如何从 NodeList 获取单个值

How to get single value from NodeList

javascript

selectors-api

nodelist