- 项目一
- 的父节点，而
- 是
- 的子节点。
选择DOM元素
操作DOM的第一步是选择要操作的元素。JavaScript提供了多种选择元素的方法：
getElementById() 是最直接的方法，通过元素的id属性选择单个元素：
let header = document.getElementById('main-header');
getElementsByClassName() 通过类名选择元素，返回一个HTML集合：
let items = document.getElementsByClassName('list-item');
getElementsByTagName() 通过标签名选择元素：
let paragraphs = document.getElementsByTagName('p');
现代开发中更常用的是querySelector()和querySelectorAll()，它们使用CSS选择器语法，更加灵活强大：
// 选择第一个匹配的元素let container = document.querySelector('.container');// 选择所有匹配的元素let buttons = document.querySelectorAll('.btn');
操作元素内容与属性
选择元素后，我们可以修改其内容和属性。
innerHTML和textContent 是修改元素内容的两个常用属性：
let div = document.querySelector('#content');div.innerHTML = '新内容'; // 会解析HTML标签div.textContent = '纯文本内容'; // 不会解析HTML标签
*设置元素属性*可以使用setAttribute()方法或直接通过属性名：
let image = document.querySelector('#banner');image.setAttribute('src', 'new-image.jpg');// 等同于image.src = 'new-image.jpg';
classList属性提供了操作元素类名的高级方法：
let element = document.querySelector('#myElement');element.classList.add('active'); // 添加类element.classList.remove('old-class'); // 删除类element.classList.toggle('visible'); // 切换类
样式操作
通过JavaScript，我们可以动态修改元素的样式：
let box = document.querySelector('.box');box.style.color = 'blue'; // 设置文字颜色box.style.backgroundColor = '#f0f0f0'; // 设置背景颜色box.style.display = 'none'; // 隐藏元素
需要注意的是，通过style属性设置的样式是内联样式，具有较高的优先级。对于复杂的样式修改，更推荐通过添加或移除CSS类来实现。
创建、添加和删除元素
DOM操作不仅限于修改现有元素，还包括创建新元素并添加到页面中。
createElement() 用于创建新元素：
let newDiv = document.createElement('div');newDiv.textContent = '我是新创建的div元素';
创建元素后，需要将其添加到DOM树中才能显示在页面上。常用的添加方法有：
let container = document.querySelector('.container');container.appendChild(newDiv); // 作为最后一个子元素添加container.insertBefore(newDiv, container.firstChild); // 作为第一个子元素添加
删除元素同样简单，使用removeChild()或remove()方法：
// 通过父元素删除子元素container.removeChild(newDiv);// 直接删除元素自身newDiv.remove();
事件处理
DOM事件是用户与网页交互时触发的信号，如点击、鼠标移动、键盘输入等。事件处理是DOM操作中最具交互性的部分。
添加事件监听器的方法：
let button = document.querySelector('#myButton');button.addEventListener('click', function() {alert('按钮被点击了！');});
常见的事件类型包括：
click：鼠标点击mouseover/mouseout：鼠标移入/移出keydown/keyup：键盘按下/释放load：页面或资源加载完成submit：表单提交
DOM操作性能优化
频繁的DOM操作会影响页面性能，因此需要遵循一些优化原则：
减少重绘和回流是DOM性能优化的核心。重绘是元素外观改变但不影响布局，回流是布局改变导致重新计算。回流比重绘代价更高。
优化建议：
使用文档片段(document.createDocumentFragment())进行批量操作先隐藏元素，完成操作后再显示避免在循环中进行DOM操作使用事件委托减少事件监听器数量
事件委托是利用事件冒泡机制，将事件监听器添加到父元素而非每个子元素：
document.querySelector('#list').addEventListener('click', function(e) {if(e.target.tagName === 'LI') {// 处理列表项点击}});
实际应用示例
以下是一个简单的DOM操作示例，实现了一个待办事项列表：
// 获取DOM元素let taskInput = document.querySelector('#taskInput');let addButton = document.querySelector('#addButton');let taskList = document.querySelector('#taskList');// 添加任务函数function addTask() {let taskText = taskInput.value.trim();if(taskText !== '') {// 创建新列表项let newTask = document.createElement('li');newTask.textContent = taskText;// 添加删除按钮let deleteButton = document.createElement('button');deleteButton.textContent = '删除';deleteButton.addEventListener('click', function() {taskList.removeChild(newTask);});newTask.appendChild(deleteButton);taskList.appendChild(newTask);// 清空输入框taskInput.value = '';}}// 绑定事件addButton.addEventListener('click', addTask);taskInput.addEventListener('keypress', function(e) {if(e.key === 'Enter') {addTask();}});
掌握DOM操作是前端开发的基础，它使开发者能够创建响应式、交互性强的网页应用。通过理解DOM结构、熟练使用选择器和方法、合理处理事件以及优化性能，开发者可以大幅提升用户体验和页面性能。
DOM操作基础知识，掌握网页动态交互的核心技能
在当今的Web开发领域，动态网页交互已经成为用户体验不可或缺的一部分。而实现这些交互功能的核心技术，正是DOM操作。DOM（Document Object Model）即文档对象模型，是连接HTML文档与JavaScript的桥梁，使开发者能够创建、修改和删除网页内容，实现丰富的动态效果。
什么是DOM？
DOM是浏览器将HTML文档解析成的树状结构模型。在这个模型中，每个HTML标签、属性、文本都是树中的一个节点。通过DOM，编程语言（主要是JavaScript）可以访问和操作页面的内容、结构和样式。
理解DOM的关键在于将其视为一个由节点组成的家族树。文档本身是根节点，元素是文档的子节点，而
和则是的子节点，以此类推。这种层次结构使得我们可以精确地定位和操作特定元素。DOM节点类型与关系
在DOM树中，有多种节点类型，其中最常见的有：
元素节点：HTML标签，如
等文本节点：元素内的文本内容属性节点：元素的属性，如class、id等
节点之间存在多种关系：父子关系、兄弟关系等。例如，在代码
- 是