网页上的DOM元素是构成网页内容的基本单元，它们通过树形结构组织，每个元素代表HTML文档中的一个部分。以下是常见的DOM元素分类及说明：

---

‌一、基础内容元素‌

1. ‌文本容器‌

• <p>：段落文本

• <span>：行内文本容器

• <div>：块级容器（默认占满整行）

• <pre>：保留格式的文本块

2. ‌多媒体元素‌

• <img>：图片

• <video>：视频（支持播放控制）

• <audio>：音频

• <canvas>：绘图画布

3. ‌表单元素‌

• <input>：输入框（类型包括文本、密码、按钮等）

• <textarea>：多行文本输入

• <select>：下拉选择框

• <button>：可点击按钮

---

‌二、结构化元素‌

1. ‌语义化标签‌（HTML5新增）

• <header>：页眉/区块头部

• <nav>：导航栏

• <article>：独立内容区块

• <section>：文档分节

• <footer>：页脚

2. ‌列表元素‌

• <ul>：无序列表

• <ol>：有序列表

• <li>：列表项

---

‌三、交互元素‌

1. ‌链接与锚点‌

• <a>：超链接（通过href属性指定目标）

• <iframe>：内嵌其他网页

2. ‌动态内容‌

• <script>：嵌入JavaScript代码

• <style>：嵌入CSS样式

---

‌四、特殊元素‌

1. ‌Shadow DOM‌

• 用于Web Components的封装，如自定义标签<my-component>，其内部结构对外部不可见‌

2. ‌BOM相关元素‌

• <meta>：定义页面元信息（如字符集、视口配置）

• <title>：浏览器标签页标题

---

‌DOM操作示例‌

// 获取元素并修改内容
const pElement = document.querySelector('p');
pElement.textContent = '新文本内容';  // 修改文本
pElement.style.color = 'red';         // 修改样式