书本元素独立标题设置方法详解

• 传统写法：if (book.textContent === '') book.textContent = title;
• 现代推荐（ES2021+）：book.textContent ||= title;

  ||= 是逻辑或赋值运算符：仅当左侧操作数为falsy 值（如 ''、null、undefined）时，才执行赋值。对于已含文字的书本，该语句直接跳过，完美实现“首次有效赋值”。

? 完整优化实现

首先，确保 HTML 表单具有唯一 id（如 my-form），并改用 button 类型避免隐式提交干扰；同时，维护一个实时更新的书本 DOM 元素数组，便于精准操作：

<div id="bookshelf">
  <div id="shelf"></div>
</div>

<button id="add-book">+</button>

<form id="my-form">
  <label>Book Title</label><br>
  &lt;input type=&quot;text&quot; name=&quot;booktitle&quot; required&gt;<br>
  <button type="submit">Submit</button>
</form>

对应的 JavaScript 逻辑如下：

const shelf      = document.getElementById('shelf');
const addBookBtn = document.getElementById('add-book');
const myForm     = document.getElementById('my-form');
const BooksElms  = []; // 存储所有已创建的 .book 元素引用

// 添加新书本
addBookBtn.addEventListener('click', () => {
  const book = document.createElement('div');
  book.classList.add('book');
  shelf.appendChild(book);
  BooksElms.push(book); // 记录新元素，供后续标题绑定
});

// 提交表单：仅向尚未命名的书本添加标题
myForm.addEventListener('submit', (e) => {
  e.preventDefault();
  const title = myForm.booktitle.value.trim();

  if (!title) return; // 忽略空输入

  // 关键：遍历所有书本，仅对空内容者赋值
  BooksElms.forEach(book => {
    book.textContent ||= title;
  });

  // 可选：清空输入框，提升用户体验
  myForm.booktitle.value = '';
});

? 样式增强建议

为提升可读性，建议在 CSS 中添加垂直排版与内边距：

.book {
  border: 1px solid #000;
  height: 100px;
  width: 25px;
  display: inline-block;
  padding-top: 5px;       /* 避免文字紧贴顶部 */
  writing-mode: vertical-rl; /* 文字垂直显示，更符合书脊效果 */
  text-orientation: mixed;   /* 保持字母水平 */
  overflow: hidden;
  text-overflow: ellipsis;
}

⚠️ 注意事项与最佳实践

• 不要依赖 querySelectorAll('.book') 动态查询：每次调用返回的是快照，若 DOM 变化频繁易引发索引错位；而主动维护 BooksElms 数组能确保顺序与生命周期严格一致。
• 输入校验不可少：trim() 和 required 属性防止空格或空白提交。
• 避免重复提交：如需支持“为指定书本设名”，可扩展为点击书本后再提交（本文聚焦基础场景）。
• 兼容性考虑：||= 在现代浏览器（Chrome 85+, Firefox 79+, Safari 14+）中已广泛支持；若需兼容旧环境，回退至 if (book.textContent === '') { ... } 即可。

通过以上重构，你将获得一个健壮、可扩展的书本标题管理系统——每本书都拥有独立身份，新增不扰旧，交互清晰可控。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《书本元素独立标题设置方法详解》文章吧，也可关注golang学习网公众号了解相关技术文章。