JavaScript DOM基础

什么是DOM？

DOM(Document Object Model，文档对象模型)是HTML和XML文档的编程接口。它将网页表示为一个树状结构，其中每个节点都是文档的一部分，如元素、属性和文本等。通过JavaScript，我们可以访问和操作DOM，从而动态地更改网页的内容、结构和样式。

DOM的重要性

DOM是JavaScript与HTML页面交互的桥梁。通过DOM，你可以：

动态修改HTML元素内容
改变元素的CSS样式
对用户事件做出反应
创建新的HTML元素
移除现有元素

访问DOM元素

要操作DOM元素，首先需要访问它们。JavaScript提供了多种方法来获取DOM元素：

通过ID获取元素

javascript
const element = document.getElementById('myId');

通过类名获取元素

javascript
const elements = document.getElementsByClassName('myClass');

通过标签名获取元素

javascript
const elements = document.getElementsByTagName('p');

使用CSS选择器获取元素

javascript
// 获取第一个匹配的元素
const element = document.querySelector('.myClass');

// 获取所有匹配的元素
const elements = document.querySelectorAll('p.intro');

提示

querySelector和querySelectorAll在现代Web开发中使用更为广泛，因为它们支持复杂的CSS选择器。

修改DOM元素

一旦获取了DOM元素，就可以对其进行各种操作：

修改元素内容

javascript
// 修改元素的文本内容
element.textContent = '新文本内容';

// 修改元素的HTML内容
element.innerHTML = '<span>新的HTML内容</span>';

修改元素属性

javascript
// 获取属性
const src = element.getAttribute('src');

// 设置属性
element.setAttribute('href', 'https://example.com');

// 直接通过属性名设置
element.id = 'newId';
element.className = 'newClass';

修改元素样式

javascript
// 直接修改样式
element.style.color = 'red';
element.style.fontSize = '20px';
element.style.display = 'none';

// 添加或移除CSS类
element.classList.add('highlight');
element.classList.remove('old-class');
element.classList.toggle('active');
element.classList.contains('active'); // 检查是否包含某个类

创建和删除元素

创建新元素

javascript
// 创建新元素
const newElement = document.createElement('div');

// 设置元素内容和属性
newElement.textContent = '这是一个新创建的div元素';
newElement.className = 'new-class';

// 将新元素添加到DOM树
document.body.appendChild(newElement);

插入元素

javascript
// 在指定元素之前插入
parentElement.insertBefore(newElement, referenceElement);

// 使用更现代的方法
parentElement.prepend(newElement); // 在开头插入
parentElement.append(newElement);  // 在末尾插入
referenceElement.before(newElement); // 在参考元素之前插入
referenceElement.after(newElement);  // 在参考元素之后插入

删除元素

javascript
// 移除元素
element.remove();

// 旧方法：通过父元素移除
parentElement.removeChild(element);

DOM事件

DOM事件允许JavaScript对HTML元素的各种事件作出反应，如点击、鼠标移动、键盘输入等。

添加事件监听器

javascript
const button = document.getElementById('myButton');

// 方法1：使用addEventListener
button.addEventListener('click', function() {
  alert('按钮被点击了！');
});

// 方法2：使用on-event属性
button.onclick = function() {
  alert('按钮被点击了！');
};

常见事件类型

鼠标事件: click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout
键盘事件: keydown, keyup, keypress
表单事件: submit, change, focus, blur
窗口事件: load, resize, scroll, unload

事件对象

当事件被触发时，浏览器会创建一个事件对象，包含有关事件的信息：

javascript
button.addEventListener('click', function(event) {
  // 阻止默认行为
  event.preventDefault();
  
  // 阻止事件冒泡
  event.stopPropagation();
  
  // 获取触发事件的元素
  console.log(event.target);
  
  // 获取鼠标坐标
  console.log(event.clientX, event.clientY);
});

实际应用案例

案例1：动态表单验证

javascript
const form = document.getElementById('registrationForm');
const usernameInput = document.getElementById('username');
const usernameError = document.getElementById('usernameError');

usernameInput.addEventListener('blur', function() {
  if (usernameInput.value.length < 5) {
    usernameError.textContent = '用户名长度必须至少为5个字符';
    usernameInput.classList.add('error');
  } else {
    usernameError.textContent = '';
    usernameInput.classList.remove('error');
  }
});

form.addEventListener('submit', function(event) {
  if (usernameInput.value.length < 5) {
    event.preventDefault();
    alert('请修正表单错误后再提交');
  }
});

案例2：创建动态导航菜单

javascript
const menuItems = [
  { text: '首页', url: 'index.html' },
  { text: '关于我们', url: 'about.html' },
  { text: '服务', url: 'services.html' },
  { text: '联系我们', url: 'contact.html' }
];

const navElement = document.getElementById('mainNav');
const ul = document.createElement('ul');

menuItems.forEach(item => {
  const li = document.createElement('li');
  const a = document.createElement('a');
  
  a.textContent = item.text;
  a.href = item.url;
  
  // 检查当前页面是否为活动页面
  if (window.location.href.includes(item.url)) {
    a.classList.add('active');
  }
  
  li.appendChild(a);
  ul.appendChild(li);
});

navElement.appendChild(ul);

案例3：实现图片轮播

javascript
const images = ['image1.jpg', 'image2.jpg', 'image3.jpg'];
const sliderImage = document.getElementById('sliderImage');
const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('nextBtn');
let currentIndex = 0;

// 显示当前图片
function showImage(index) {
  sliderImage.src = images[index];
}

// 下一张图片
nextBtn.addEventListener('click', function() {
  currentIndex = (currentIndex + 1) % images.length;
  showImage(currentIndex);
});

// 上一张图片
prevBtn.addEventListener('click', function() {
  currentIndex = (currentIndex - 1 + images.length) % images.length;
  showImage(currentIndex);
});

// 初始显示第一张图片
showImage(currentIndex);

// 自动轮播
setInterval(function() {
  currentIndex = (currentIndex + 1) % images.length;
  showImage(currentIndex);
}, 3000);

DOM操作的性能考虑

当进行大量DOM操作时，需要注意性能问题：

减少重排和重绘：每次修改DOM可能导致浏览器重新计算页面布局，影响性能。
使用文档片段：当需要添加多个元素时，使用DocumentFragment可以减少页面重绘次数：

javascript
const fragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
  const newElement = document.createElement('div');
  newElement.textContent = `Item ${i}`;
  fragment.appendChild(newElement);
}
document.body.appendChild(fragment);

事件委托：利用事件冒泡，在父元素上设置一个事件处理函数，而不是为每个子元素单独设置：

javascript
// 不好的做法：为每个按钮添加点击事件
document.querySelectorAll('.button').forEach(button => {
  button.addEventListener('click', handleClick);
});

// 好的做法：利用事件委托
document.querySelector('.button-container').addEventListener('click', function(event) {
  if (event.target.classList.contains('button')) {
    handleClick(event);
  }
});

总结

JavaScript DOM是前端开发的基础，通过它我们可以：

访问HTML元素
修改元素内容和属性
添加和删除元素
响应用户事件
动态改变网页内容和样式

掌握DOM操作技能是成为一名高效前端开发者的关键。随着你的技能提升，还可以探索更高级的DOM操作技术和框架，如React、Vue等。

练习

为了巩固所学知识，尝试完成以下练习：

创建一个简单的待办事项列表，允许用户添加新项目、标记项目为已完成和删除项目。
实现一个简单的表单验证，验证电子邮件格式是否正确。
创建一个图片库，点击缩略图时在主视图中显示大图。
实现一个简单的手风琴菜单，点击标题时展开或折叠内容。

其他资源

要深入学习DOM，可以参考以下资源：

警告

在操作DOM时，始终记得考虑跨浏览器兼容性问题，尤其是当你需要支持旧版浏览器时。

什么是DOM？​

DOM的重要性​

访问DOM元素​

通过ID获取元素​

通过类名获取元素​

通过标签名获取元素​

使用CSS选择器获取元素​

修改DOM元素​

修改元素内容​

修改元素属性​

修改元素样式​

创建和删除元素​

创建新元素​

插入元素​

删除元素​

DOM事件​

添加事件监听器​

常见事件类型​

事件对象​

实际应用案例​

案例1：动态表单验证​

案例2：创建动态导航菜单​

案例3：实现图片轮播​

DOM操作的性能考虑​

总结​

练习​

其他资源​