JavaScript的DOM操作是什么？如何动态修改页面？

JavaScript的DOM操作是通过代码动态修改HTML文档内容、样式和结构的技术，无需刷新页面即可实现交互效果。其核心是通过DOM API选择节点并执行增删改查操作，结合事件监听实现动态响应。

1. 选择元素

   ID选择：document.getElementById('id')（唯一且高效）

   CSS选择器：

   document.querySelector('selector')（返回第一个匹配元素）

   document.querySelectorAll('selector')（返回所有匹配元素的NodeList）

   类名/标签名：

   getElementsByClassName('class')（返回动态HTMLCollection）

   getElementsByTagName('tag')（返回动态HTMLCollection）

   

2. 修改内容

   纯文本：element.textContent = '新内容'（安全，避免XSS）

   HTML内容：element.innerHTML = '<strong>加粗文本</strong>'（需防范XSS攻击）

3. 修改样式

   内联样式：element.style.color = 'red'（直接修改样式属性）

   CSS类操作：

   element.classList.add('new-class')（添加类）

   element.classList.remove('old-class')（移除类）

   element.classList.toggle('active')（切换类）

   

4. 增删元素

   创建元素：document.createElement('div')

   添加元素：parentNode.appendChild(newElement)

   删除元素：parentNode.removeChild(childElement)

   批量操作优化：使用DocumentFragment减少重排重绘：const fragment = document.createDocumentFragment();for (let i = 0; i < 100; i++) { const item = document.createElement('li'); item.textContent = `列表项 ${i}`; fragment.appendChild(item);}document.getElementById('myList').appendChild(fragment);

   

1. 选择目标元素：通过ID、类名或CSS选择器定位节点。
2. 修改内容/样式：根据需求调整文本、HTML或CSS。
3. 更新结构：动态添加、删除或替换元素。
4. 绑定事件：通过事件监听实现交互响应。

示例：点击按钮添加段落

1. 性能优化

   批量操作：使用DocumentFragment合并DOM修改。

   事件委托：将事件监听绑定到父元素，通过event.target判断子元素：document.getElementById('parentList').addEventListener('click', function(event) { if (event.target.tagName === 'LI') { console.log('点击了列表项:', event.target.textContent); }});

   避免频繁样式修改：优先通过classList切换CSS类而非直接操作style。

2. 安全实践

   防范XSS攻击：避免使用innerHTML处理不可信内容，优先使用textContent。

   验证用户输入：对动态插入的内容进行转义或过滤。

1. 事件绑定

   使用addEventListener(eventType, handler, options)支持多监听器和捕获/冒泡控制。

   示例：在捕获阶段阻止事件传播：element.addEventListener('click', handler, { capture: true });

2. 事件流控制

   捕获阶段：事件从window向下传播到目标元素。

   冒泡阶段：事件从目标元素向上传播到window（默认行为）。

   阻止默认行为：event.preventDefault()（如表单提交、链接跳转）。

   停止传播：event.stopPropagation()（避免父元素事件触发）。

3. 事件对象属性

   event.target：实际触发事件的元素。

   event.currentTarget：当前处理事件的元素（可能因委托与target不同）。

1. 动态列表渲染

   结合Array.map()和DocumentFragment高效生成列表：const data = ['苹果', '香蕉', '橙子'];const fragment = document.createDocumentFragment();data.forEach(item => { const li = document.createElement('li'); li.textContent = item; fragment.appendChild(li);});document.getElementById('fruitList').appendChild(fragment);

2. 主题切换

   通过修改classList切换CSS变量或类：document.getElementById('themeToggle').addEventListener('click', function() { document.body.classList.toggle('dark-theme');});

3. 表单动态验证

   实时监听输入事件并反馈错误：document.getElementById('username').addEventListener('input', function(event) { if (event.target.value.length < 6) { event.target.classList.add('error'); } else { event.target.classList.remove('error'); }});

总结：DOM操作是前端开发的核心技能，通过合理选择元素、优化修改策略、控制事件流，可实现高效、安全的动态页面交互。掌握DocumentFragment、事件委托和CSS类操作等技巧，能显著提升性能与代码可维护性。