一个编辑功能所引发的一场知识探索学习之旅（JavaScript、HTML）

在这里插入图片描述

1. 一个编辑功能案例

HTML：

	<div class="modal active" id="rulesModal"><div class="modal-content"><div class="modal-header"><h3>智能分类规则配置</h3><button class="close-modal" id="closeRulesModal">×</button></div><div class="modal-body"><div class="form-group"><label>添加新规则</label><div style="display: flex; gap: 15px;"><input type="text" class="form-control" id="newRuleKeyword" placeholder="关键词"><select class="form-control" id="newRuleCategory"><option value="" disabled="" hidden="">--- 请选择 ---</option><option value="IT学习">IT学习</option><option value="英语学习">英语学习</option><option value="考试备考">考试备考</option></select><button class="btn" id="addRuleBtn" style="min-width: 100px;"><i class="fas fa-plus"></i> 添加</button></div></div><div class="rules-list" id="rulesList"><div class="rule-item"><div class="rule-keyword">IT</div><div class="rule-category">IT学习</div><div class="rule-actions"><div class="rule-action edit-rule" data-index="0"><i class="fas fa-edit"></i></div><div class="rule-action delete-rule" data-index="0"><i class="fas fa-trash"></i></div></div></div><div class="rule-item"><div class="rule-keyword">英语</div><div class="rule-category">英语学习</div><div class="rule-actions"><div class="rule-action edit-rule" data-index="1"><i class="fas fa-edit"></i></div><div class="rule-action delete-rule" data-index="1"><i class="fas fa-trash"></i></div></div></div><div class="rule-item"><div class="rule-keyword">考试</div><div class="rule-category">考试备考</div><div class="rule-actions"><div class="rule-action edit-rule" data-index="2"><i class="fas fa-edit"></i></div><div class="rule-action delete-rule" data-index="2"><i class="fas fa-trash"></i></div></div></div></div></div><div class="modal-footer"><button class="btn btn-outline" id="cancelRulesBtn">取消</button><button class="btn" id="saveRulesBtn">保存规则</button></div></div></div>

JavaScript：

        let rules = [];rules.push({keyword:"IT",category:"IT学习"},{keyword:"英语",category:"英语学习"},{keyword:"考试",category:"考试备考"});// 编辑规则function editRule(index) {const rule = rules[index];const rulesList = document.getElementById('rulesList');//const editButton = rulesList.querySelector(`[data-index="${index}"]`)// 原代码（依赖DOM层级结构）//const editButton = rulesList.querySelector(`[class~="edit-rule"][data-index="${index}"]`);//const ruleItem = editButton.parentElement.parentElement;// 优化后（结构无关更健壮）const editButton = rulesList.querySelector(`.edit-rule[data-index="${index}"]`);const ruleItem = editButton?.closest('.rule-item'); // 可选链操作符 ?. 防止空值报错ruleItem.querySelector(".rule-keyword").innerHTML=`<input type="text" class="form-control" style="max-width: 80%;" value="${rule.keyword}">`ruleItem.querySelector(".rule-category").innerHTML=`<select class="form-control" style="max-width: 80%;">${document.getElementById('newRuleCategory').innerHTML}</select>`// 原代码（查询多次）//ruleItem.querySelector(".rule-category .form-control").querySelector(`[value="${rule.category}"]`).selected = true// 优化后（查询一次，更简洁）ruleItem.querySelector(".rule-category .form-control").value=rule.category; //为下拉框默认赋值//const categoryDropdown = document.getElementById('newRuleCategory').innerHTML;// 监听事件：获取输入框填写的值ruleItem.querySelector(".rule-keyword .form-control").addEventListener('input', function() {rule.keyword = this.value.trim();console.log(rule.keyword);//rules.splice(index, 1, {keyword:rule.keyword,category:rule.category});});// 监听事件：获取下拉框选中的值ruleItem.querySelector(".rule-category .form-control").addEventListener('change', function() {rule.category = this.value;console.log(rule.category);//rules.splice(index, 1, {keyword:rule.keyword,category:rule.category});});	}

2. 知识点探索学习

知识补充：

closest 函数的用法示例：

本文涉及知识点：

在 JavaScript 中，使用反引号（`）来创建模板字符串。有了模板字面量，就可以通过使用占位符 ${expression} 嵌入待替换的表达式，从而避免串联运算符，并提高代码的可读性。
querySelector 函数的使用。
closest 函数的使用
可选链操作符 ?. 防止空值报错
为输入框、下拉框赋默认值。
监听事件：获取输入框填写的值、获取下拉框选中的值。