面试题：JavaScript中如何高效地使用DOM操作实现一个可动态添加和删除列表项的无序列表

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>无序列表操作</title>
  <style>
    #list {
      list-style-type: none;
      padding: 0;
    }

    #list li {
      margin: 5px;
      padding: 5px;
      border: 1px solid #ccc;
    }

    button {
      margin: 5px;
    }
  </style>
</head>

<body>
  <ul id="list"></ul>
  <input type="text" id="newItemInput" placeholder="输入新列表项内容">
  <button onclick="addItem()">添加列表项</button>
  <button onclick="deleteSelectedItem()">删除选中列表项</button>

  <script>
    const list = document.getElementById('list');

    // 使用事件委托处理点击事件
    list.addEventListener('click', function (e) {
      if (e.target.tagName === 'LI') {
        // 切换选中状态
        e.target.classList.toggle('selected');
      }
    });

    function addItem() {
      const newItemInput = document.getElementById('newItemInput');
      const newItemText = newItemInput.value;
      if (newItemText) {
        const newItem = document.createElement('li');
        newItem.textContent = newItemText;
        list.appendChild(newItem);
        newItemInput.value = '';
      }
    }

    function deleteSelectedItem() {
      const selectedItems = document.querySelectorAll('#list li.selected');
      selectedItems.forEach(item => {
        item.remove();
      });
    }
  </script>
</body>

</html>

优化点说明：

事件委托：
- 对于列表项的点击事件（用于选中/取消选中），使用事件委托，将点击事件监听器添加到ul元素上。这样，无论有多少个li元素，都只需要一个事件监听器，而不是为每个li元素都添加一个监听器，大大减少了内存开销。
避免性能瓶颈：
- 在添加新列表项时，直接创建li元素并添加到ul中，操作简单直接。
- 删除选中列表项时，通过querySelectorAll获取所有选中的li元素，然后使用forEach遍历并删除，减少了不必要的DOM查询和操作次数。同时，每次删除操作都是直接对DOM进行修改，而不是多次重新渲染整个列表。

面试题：JavaScript中如何高效地使用DOM操作实现一个可动态添加和删除列表项的无序列表

知识考点

面试题答案

优化点说明：