如何从节点列表单值

Question

帮助我获得项目从节点列表单个值。我想映射表的NodeLists对象的数组。我想创建一个表格，增加了新的书图书馆与动态第一把新的作者的名和姓排至形式的函数。但无法理解如何采取输入从其他行至JSON对象。我发现只有这个解决方案，但无法理解热从querySelectorAll节点列表获取单个值，然后创建一个作家的对象。我想借此对象是这样的：

    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()或蔓延运营商...到节点列表转换为数组，如下图所示

// 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);