在 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() 则会返回所有匹配的元素。
-- -- -- - ----------- --- ----- --------- - ------------------------------------- -- ---- ----- - --------- --- ----- ---------- - --------------------------------------
修改元素属性
可以使用 element.setAttribute() 和 element.style 属性来修改元素的属性和样式。
-- ----- -- -- ---------------------------- --------- -- --------- ------------------------------- - ------
添加/删除元素
可以使用 document.createElement() 和 element.appendChild() 方法来添加新元素，使用 element.remove() 方法来删除元素。
-- ------ --- -- ----- ------ - ------------------------------ -- ---------- ---------------------------------- -- ---- -------------------
控制 CSS
除了通过 DOM API 直接操作元素样式外，还可以通过 CSS 样式表来控制网页的外观。以下是一些常见的 CSS 操作方法：
添加样式
可以使用 element.classList.add() 方法来添加样式类。
-- ------ ---------- ---- ------------------------------------
移除样式
可以使用 element.classList.remove() 方法来移除样式类。
-- ---- ---------- ---- ---------------------------------------
切换样式
可以使用 element.classList.toggle() 方法来切换样式类的状态。
-- ---- -------- ---- -------------------------------------
通过以上的介绍，我们了解了如何使用 JavaScript 操作 DOM 和 CSS，这对于构建交互性强的网页非常重要。在实际开发中，我们可以灵活运用这些技巧，打造出符合用户期待的网页界面。