优化JavaScript中大量DOM元素的迭代与操作

// 为每个li元素添加transitionend监听器 files.forEach(file => {   const li = document.createElement('li');   li.textContent = file;   li.addEventListener("transitionend", transition_ended); // ❌ 每次创建都添加   fileList.appendChild(li); });

const fileList = document.getElementById('file_list'); fileList.addEventListener("transitionend", transition_ended); // ✅ 只添加一次

function transition_ended(event) {     let element = event.target.closest("li"); // 确保处理的是li元素     if (!element) return; // 如果事件不是从li或其子元素冒泡上来，则不处理      console.log(`Transition ended for ${element.tagName}#${element.id}, at this point className is ${element.className}`);      if (element.className.includes("flash_red") || element.className.includes("collapsed")) {         element.classlist.add("hidden"); // 使用classList.add         // element.checked = false; // 如果li没有checked属性，这行可能不必要     }      // 移除闪烁类，为下一次搜索做准备     element.classList.remove("flash_green", "flash_red"); }

function displayFiles(files) {   fileList.innerHTML = ''; // 清空   files.forEach(file => {     const li = document.createElement('li'); // ❌ 每次循环创建DOM节点     li.textContent = file;     li.addEventListener("transitionend", transition_ended);     fileList.appendChild(li); // ❌ 每次循环添加DOM节点   }); }

function displayFiles(files) {   // 构建HTML字符串，一次性更新innerHTML   fileList.innerHTML = files.map(file => `<li>${file}</li>`).join(""); // ✅ 一次性DOM更新 }

Gnomic智能体平台

国内首家无需魔法免费无限制使用的ChatGPT4.0，网站内设置了大量智能体供大家免费使用，还有五款语言大模型供大家免费使用~

47

查看详情

// 在handleSearch函数中 if (fileName.includes(searchString)) {   if (file.className == "hidden") {     file.className = "flash_green"; // ❌ 可能覆盖其他类   } } else {   if (file.className != "hidden") {     file.className = "flash_red"; // ❌ 可能覆盖其他类   } }

// 在handleSearch函数中 file.classList.toggle("flash_green", isVisible && fileName.includes(searchString)); file.classList.toggle("flash_red", isVisible && !fileName.includes(searchString)); file.classList.toggle("hidden", !isVisible);

function handleSearch() {   const searchString = searchInput.value.toLowerCase();   // 获取所有文件列表项   const files = fileList.querySelectorAll("li");    // 遍历每个文件列表项并更新其类   // 从后向前遍历可以避免在删除或隐藏元素时索引错乱，尽管这里只是改类名影响不大，但仍是好习惯   for (let i = files.length - 1; i >= 0; i--) {     const file = files[i];     const fileName = file.textContent.toLowerCase();     const isMatch = fileName.includes(searchString);      // 清空现有样式类，确保每次搜索都是干净的状态     file.classList = "";      if (searchString === "") { // 如果搜索字符串为空，显示所有文件       file.classList.remove("hidden");     } else {       if (isMatch) {         // 如果匹配，显示并添加闪烁绿色效果         file.classList.add("flash_green");         file.classList.remove("hidden"); // 确保匹配项是可见的       } else {         // 如果不匹配，添加闪烁红色效果并最终隐藏         file.classList.add("flash_red");         // 注意：flash_red的transitionend会将其最终设置为hidden       }     }   } }

const fileList = document.getElementById('file_list'); const searchInput = document.getElementById('search_input'); const numFilesInput = document.getElementById('num_files_input'); const regenerateButton = document.getElementById('regenerate_button');  // 为父元素添加事件委托 fileList.addEventListener("transitionend", transition_ended);  // 配置要检索的假文件数量 let numFiles = parseInt(numFilesInput.value); // 初始值  // 生成假文件 let files = generateFakeFiles(numFiles);  // 初次显示所有文件 displayFiles(files);  // 为搜索输入框添加事件监听器 searchInput.addEventListener('input', handleSearch);  // 为重新生成按钮添加事件监听器 regenerateButton.addEventListener('click', regenerateFiles);  // 函数：生成假文件 function generateFakeFiles(num) {   const files = [];   const extensions = ['.txt', '.doc', '.pdf', '.jpg', '.png']; // 可以添加更多扩展名   for (let i = 1; i <= num; i++) {     const fileName = `file${i}${extensions[Math.floor(Math.random() * extensions.length)]}`;     files.push(fileName);   }   return files; }  // 函数：重新生成文件 function regenerateFiles() {   numFiles = parseInt(numFilesInput.value);   files = generateFakeFiles(numFiles);   displayFiles(files); }  // 函数：显示文件 function displayFiles(files) {   // 使用innerHTML一次性更新DOM   fileList.innerHTML = files.map(file => `<li>${file}</li>`).join(""); }  // 函数：处理搜索 function handleSearch() {   const searchString = searchInput.value.toLowerCase();   // 获取所有文件列表项   const listItems = fileList.querySelectorAll("li");    for (let i = listItems.length - 1; i >= 0; i--) {     const item = listItems[i];     const fileName = item.textContent.toLowerCase();     const isMatch = fileName.includes(searchString);      // 清空现有样式类，确保每次搜索都是干净的状态     item.classList.remove("flash_green", "flash_red", "hidden");      if (searchString === "") {       // 如果搜索字符串为空，显示所有文件       item.classList.remove("hidden");     } else {       if (isMatch) {         // 如果匹配，添加闪烁绿色效果         item.classList.add("flash_green");       } else {         // 如果不匹配，添加闪烁红色效果         item.classList.add("flash_red");         // flash_red的transitionend会将其最终设置为hidden       }     }   } }  // 函数：处理过渡结束事件 function transition_ended(event) {     // 获取触发事件的li元素     let element = event.target.closest("li");     if (!element) return; // 如果事件不是从li或其子元素冒泡上来，则不处理      console.log(`Transition ended for ${element.tagName}#${element.id}, at this point className is ${element.className}`);      // 如果元素有flash_red类，表示它不匹配搜索，过渡结束后应隐藏     if (element.classList.contains("flash_red")) {         element.classList.add("hidden");         element.classList.remove("flash_red"); // 移除闪烁类     }     // 如果元素有flash_green类，表示它匹配搜索，过渡结束后应移除闪烁类     if (element.classList.contains("flash_green")) {         element.classList.remove("flash_green"); // 移除闪烁类     } }

ul#file_list {     list-style: none;     padding: 0;     display: flex;     flex-direction: row;     flex-wrap: wrap;     justify-content: space-around;     overflow: scroll;     max-width: 100rem;     max-height: 50rem;     border: 1px solid #ccc; /* 添加边框以便观察 */ }  #file_list li {     margin-bottom: 10px;     width: 33%;     box-sizing: border-box; /* 确保宽度计算包含padding和border */     padding: 5px;     border: 1px solid transparent; /* 默认透明边框 */     transition: background-color 0.5s, opacity 0.5s; /* 统一过渡属性 */ }  #file_list li.flash_red {   animation: flash_red 0.5s;   animation-iteration-count: 1;   opacity: 0; /* 动画结束后透明度变为0 */   transition: opacity 0.5s ease-out; /* 明确过渡效果 */ }  @keyframes flash_red {   0% {     background-color: red;     opacity: 1;   }   50% {     background-color: transparent;     opacity: 1;   }   100% {     background-color: red;     opacity: 1; /* 动画结束时背景色为红，但transition会将其opacity变为0 */   } }  #file_list li.flash_green {   animation: flash_green 0.5s;   animation-iteration-count: 1;   opacity: 1; /* 确保匹配项可见 */   transition: background-color 0.5s ease-out; }  @keyframes flash_green {   0% {     background-color: green;   }   50% {     background-color: transparent;   }   100% {     background-color: green;   } }  .hidden {   display: none !important; /* 强制隐藏 */ }

<!DOCTYPE html> <html>   <head>     <title>Optimized DOM Manipulation</title>     <link rel="stylesheet" type="text/css" href="style.css" />   </head>   <body>     <h4>文件列表</h4>     <input id="num_files_input" type="number" value="1000" min="1" />     <button id="regenerate_button">重新生成</button>     <br>     <input id="search_input" type="text" placeholder="搜索..." />     <ul id="file_list"></ul>      <script src="main.JS"></script>   </body> </html>

大家都在看：