用CSS和JavaScript 操作 DOM 节点：创意无限，轻松上手

在网页开发中，DOM（文档对象模型）操作是必不可少的技能。通过操作 DOM 节点，我们可以轻松操控网页元素，实现各种炫酷的效果。本文将使用 CSS 和 JavaScript 两种方式，带您领略 DOM 操作的魅力，让您轻松上手，成为 DOM 操作高手。

CSS 操作 DOM 节点

CSS 是网页开发中不可或缺的语言，它可以用来改变网页元素的外观和布局。通过 CSS，我们可以轻松地更改元素的样式，比如颜色、字体、背景等。

选择器

在 CSS 中，选择器用于选中要操作的元素。选择器的种类有很多，比如标签选择器、类选择器、ID 选择器等。

/* 标签选择器 */
p {
  color: red;
}

/* 类选择器 */
.my-class {
  background-color: blue;
}

/* ID 选择器 */
#my-id {
  font-size: 20px;
}

样式属性

选择器之后，就是样式属性。样式属性用于指定元素的样式。每个样式属性都有一个值，值可以是颜色、字体、长度等。

/* 颜色 */
color: red;

/* 字体 */
font-family: Arial;

/* 背景颜色 */
background-color: blue;

/* 字体大小 */
font-size: 20px;

JavaScript 操作 DOM 节点

JavaScript 是一种脚本语言，它可以用来操作网页元素。通过 JavaScript，我们可以动态地改变元素的内容、样式和行为。

获取元素

在 JavaScript 中，我们可以使用多种方法来获取元素。最常用的方法是通过 document.querySelector() 和 document.querySelectorAll() 方法。

/* 获取第一个符合选择器的元素 */
const element = document.querySelector('p');

/* 获取所有符合选择器的元素 */
const elements = document.querySelectorAll('p');

操作元素

获取元素之后，我们就可以对它们进行操作了。我们可以使用各种方法来操作元素，比如 innerHTML、style、classList 等。

/* 改变元素的文本内容 */
element.innerHTML = 'Hello World!';

/* 改变元素的样式 */
element.style.color = 'red';

/* 添加类名 */
element.classList.add('my-class');

/* 移除类名 */
element.classList.remove('my-class');

结语

通过 CSS 和 JavaScript 操作 DOM 节点，我们可以轻松地操控网页元素，实现各种炫酷的效果。希望本文能够帮助您更好地理解 DOM 操作，让您在网页开发中如鱼得水。