好的，以下是一份以DOM CSS为主题的学习笔记：

DOM CSS 学习笔记

DOM

什么是 DOM？

DOM 全称 Document Object Model（文档对象模型），是浏览器将网页解析后生成的一个树状结构，它把网页中的每个元素（如 HTML 标签、文本等）都看作是一个对象，并且这些对象是相互嵌套、继承关系的。

DOM 操作

我们可以通过 DOM 操作来改变网页中的内容和样式。DOM 操作主要有以下几种：

获取元素

我们可以通过以下方法获取网页中的元素：

document.getElementById(id)：获取指定 id 的元素。
document.getElementsByTagName(name)：获取指定标签名的所有元素。
document.getElementsByClassName(name)：获取指定类名的所有元素。
document.querySelector(selector)：通过 CSS 选择器获取第一个符合条件的元素。
document.querySelectorAll(selector)：通过 CSS 选择器获取所有符合条件的元素。

修改元素

我们可以通过以下方法修改网页中的元素：

element.innerHTML = newContent：修改元素的内容。
element.style.property = value：修改元素的样式。

添加/删除元素

我们可以通过以下方法添加或删除元素：

document.createElement(element)：创建新的元素。
parentElement.appendChild(element)：将一个新元素添加到指定元素的最后一个子节点。
parentElement.insertBefore(newElement, existingElement)：在指定元素的前面添加一个新元素。
parentElement.removeChild(element)：删除指定的元素。

实例

以下是一个实例，通过 DOM 操作改变网页中某个元素的样式：

htmlCopy Code
<!DOCTYPE html>
<html>
<body>

<h1>DOM CSS 学习笔记</h1>

<p id="demo">DOM 操作示例。</p>

<button onclick="changeStyle()">改变样式</button>

<script>
function changeStyle() {
  var x = document.getElementById("demo");
  x.style.fontSize = "25px";
  x.style.color = "red";
}
</script>

</body>
</html>

CSS

什么是 CSS？

CSS 全称 Cascading Style Sheets（层叠样式表），是一种样式语言，用于描述网页中各个元素的外观和排版。通过 CSS，我们可以改变元素的大小、颜色、字体等样式。

CSS 语法

CSS 由选择器和声明块组成。选择器表示要修改哪些元素，声明块表示要修改哪些样式。

选择器

选择器指示需要应用样式的 HTML 元素。以下是常见的选择器类型：

元素选择器：选择 HTML 元素标签。
类选择器：选择使用相同类名称的 HTML 元素。
ID 选择器：选择具有特定 ID 的 HTML 元素。
属性选择器：选择具有特定属性或属性值的 HTML 元素。
伪类选择器：选择处于特定状态的元素。

声明块

声明块由一组属性-值对组成，用分号分隔。以下是声明块的示例：

cssCopy Code
p {
  color: red;
  font-size: 20px;
}

实例

以下是一个实例，通过 CSS 修改网页中某个元素的样式：

htmlCopy Code
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  color: blue;
  font-family: Arial, sans-serif;
}
</style>
</head>
<body>

<h1>DOM CSS 学习笔记</h1>

<p>CSS 操作示例。</p>

</body>
</html>

以上就是本次学习笔记的内容，希望对您有所帮助。