DOM CSS

在 web 前端开发中，DOM（Document Object Model）和 CSS（Cascading Style Sheets）是两个非常重要的概念。DOM 是用来操作网页文档结构的 API，而 CSS 则是用来控制网页样式的样式表语言。在本章节中，我们将深入探讨如何使用 JavaScript 操作 DOM 和 CSS。

操作 DOM

在 JavaScript 中，可以通过 DOM API 来操作 HTML 元素。常见的 DOM 操作包括查找元素、修改元素属性、添加/删除元素等。以下是一些常用的 DOM 操作方法：

查找元素

可以使用 document.querySelector() 和 document.querySelectorAll() 方法来查找页面上的元素。document.querySelector() 会返回第一个匹配的元素，而 document.querySelectorAll() 则会返回所有匹配的元素。

// 查找 id 为 "myElement" 的元素
const myElement = document.querySelector('#myElement');

// 查找所有 class 为 "myClass" 的元素
const myElements = document.querySelectorAll('.myClass');

修改元素属性

可以使用 element.setAttribute() 和 element.style 属性来修改元素的属性和样式。

// 修改元素的 id 属性
myElement.setAttribute('id', 'newId');

// 修改元素的背景颜色
myElement.style.backgroundColor = 'red';

添加/删除元素

可以使用 document.createElement() 和 element.appendChild() 方法来添加新元素，使用 element.remove() 方法来删除元素。

// 创建一个新的 div 元素
const newDiv = document.createElement('div');

// 将新元素添加到页面中
document.body.appendChild(newDiv);

// 删除元素
myElement.remove();

控制 CSS

除了通过 DOM API 直接操作元素样式外，还可以通过 CSS 样式表来控制网页的外观。以下是一些常见的 CSS 操作方法：

添加样式

可以使用 element.classList.add() 方法来添加样式类。

// 添加一个名为 "newStyle" 的样式类
myElement.classList.add('newStyle');

移除样式

可以使用 element.classList.remove() 方法来移除样式类。

// 移除名为 "oldStyle" 的样式类
myElement.classList.remove('oldStyle');

切换样式

可以使用 element.classList.toggle() 方法来切换样式类的状态。

// 切换名为 "active" 的样式类
myElement.classList.toggle('active');

通过以上的介绍，我们了解了如何使用 JavaScript 操作 DOM 和 CSS，这对于构建交互性强的网页非常重要。在实际开发中，我们可以灵活运用这些技巧，打造出符合用户期待的网页界面。