JSDOM入门：DOM操作与事件处理的JavaScript笔记

本文档是一份关于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页面内容，实现页面行为的动态调整。