本文档是一份关于JavaScript个人学习笔记，主要聚焦于与文档对象模型（DOM）相关的知识点。DOM是W3C推荐的处理HTML的标准编程接口，它允许开发者动态地操作网页内容、结构和样式。以下是主要内容的详细阐述：
1. **DOM的目标**：
- 理解DOM的基本概念：DOM是一个树状结构，每个节点代表HTML或XML文档中的元素，包括元素、属性和文本。
2. **获取页面元素的方法**：
- `getElementById()`：根据元素的id查找。
- `getElementsByClassName()`：通过类名选择元素。
- `getElementsByTagName()`：通过标签名获取元素。
- `querySelector()`和`querySelectorAll()`：在H5中，提供更灵活的选择器功能，可以获取指定条件下的第一个或所有元素。
- `document.getElementById()`和`document.body`：分别用于获取特定id的元素和整个文档的body。
3. **事件基础**：
- 了解事件源：事件通常由元素触发，可以通过`event.target`获取。
- 注册和编写事件处理程序：JavaScript使用`addEventListener()`方法来注册事件处理器。
4. **操作DOM元素**：
- 内容操作：`innerText`和`innerHTML`用于设置和获取元素内的文本，`innerHTML`虽然方便但可能导致内存消耗，应避免直接创建大量元素。
- 常见元素属性操作：如src、title、alt等。
- 表单属性：如type、value、checked状态、select和disabled属性。
- 样式操作：包括行内样式（`element.style`）和类名样式（`element.className`）。
- 属性设置与获取：`setAttribute()`和`getAttribute()`用于添加和读取自定义属性。
- 移除属性：`removeAttribute()`。
5. **节点操作**：
- 节点关系：理解节点的父节点（`parentNode`）、子节点（`childNodes`、`children`、`firstChild`、`nextSibling`），以及兄弟节点的概念。
这份笔记提供了基础且实用的DOM操作技巧，适合初学者巩固JavaScript与DOM交互的能力，对于实际开发中动态网页构建和用户交互具有重要意义。通过理解和掌握这些知识，开发者可以更自如地控制HTML页面内容，实现页面行为的动态调整。
我的内容管理
展开
