自定义HTML组件内元素更新问题：获取输入值生成笔记

核心问题分析 #

你之前用getElementById失败的关键原因是：id属性在页面中是全局唯一的，当多个同className的组件里存在相同id的元素时，document.getElementById只会返回第一个匹配的元素，无法对应到当前操作的组件。正确的做法是基于每个组件本身的上下文来查找内部元素，而不是全局查找。

正确实现方案 #

假设你的组件结构如下（用class标识内部元素，避免重复id）：

<div class="custom-component">
  <input type="text" class="note-input" placeholder="输入笔记内容">
  <button class="add-note">添加笔记</button>
  <div class="notes-list"></div>
</div>
<div class="custom-component">
  <input type="text" class="note-input" placeholder="输入笔记内容">
  <button class="add-note">添加笔记</button>
  <div class="notes-list"></div>
</div>

方法1：事件委托（推荐，性能更优）

通过父元素监听点击事件，动态定位当前操作的组件：

// 监听全局点击事件，委托处理按钮点击
document.addEventListener('click', function(e) {
  // 判断点击的是添加笔记按钮
  if (!e.target.classList.contains('add-note')) return;

  // 获取当前按钮所属的组件
  const currentComponent = e.target.closest('.custom-component');
  // 在组件内部查找输入框和笔记容器
  const input = currentComponent.querySelector('.note-input');
  const notesContainer = currentComponent.querySelector('.notes-list');

  const noteContent = input.value.trim();
  if (!noteContent) return;

  // 创建笔记元素并追加到当前组件
  const noteItem = document.createElement('div');
  noteItem.className = 'note-item';
  noteItem.textContent = noteContent;
  notesContainer.appendChild(noteItem);

  // 清空输入框
  input.value = '';
});

方法2：逐个绑定事件

遍历所有组件，为每个组件的按钮单独绑定事件：

const components = document.getElementsByClassName('custom-component');

// 遍历每个组件
for (const comp of components) {
  const addBtn = comp.querySelector('.add-note');
  addBtn.addEventListener('click', function() {
    const input = comp.querySelector('.note-input');
    const notesContainer = comp.querySelector('.notes-list');
    const noteContent = input.value.trim();

    if (noteContent) {
      const noteItem = document.createElement('div');
      noteItem.className = 'note-item';
      noteItem.textContent = noteContent;
      notesContainer.appendChild(noteItem);
      input.value = '';
    }
  });
}

关键注意事项 #

• 组件内部的元素不要用重复id，统一用class标识，避免全局冲突
• 始终基于当前组件的上下文（currentComponent或comp）调用querySelector，确保只操作当前组件内的元素
• 优先用createElement创建元素，比innerHTML更安全（避免XSS）且更易维护

内容的提问来源于stack exchange，提问作者Zack