javascript - 如何从 NodeList 中获取单个值
问题描述
帮助我从 NodeList 中的 Item 获取单个值。我想将两个 NodeList 映射到对象数组。我想创建一个将新书添加到图书馆的表单,该表单具有动态将新作者的名字和姓氏行放入表单的功能。但是无法理解如何将额外行的输入输入到 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)
});
}
解决方案
首先,您不应该在 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);
推荐阅读
- javascript - 由 history.pushState 破坏的锚菜单链接
- c# - 使用 C# Marshall.GetActiveObject 获取目标的特定实例
- cross-validation - XGBOOST/lLightgbm 过拟合,尽管交叉验证测试分数没有指示?
- php - 我如何使 PHP 只在 div 内回显?
- c# - 机器人框架.Net。在 Bot 上添加打字指示器
- java - Java - 如何按值初始化 HashMap 内部方法
- neo4j - 如何从 CYPHER 查询的 COLLECT() 子句中删除包含 NULL 的对象?
- android - 在 Android Studio 上的 JSON 对象列表上获取日期
- google-colaboratory - 函数末尾的 torch_xla 集合点导致“未能满足集合点”错误
- testing - 测试人员如何访问 Google Play 上的内部测试应用程序?