JavaScript入门：基础语法与DOM操作解析

"JavaScript 学习笔记，适合初学者，涵盖基本语法、ECMAScript、BOM和DOM等核心概念。" JavaScript 是一种广泛应用于网页和网络应用开发的脚本语言，尤其在前端开发中占据着重要地位。它是一种基于对象、事件驱动且具有安全性的语言，能够为网页增加动态功能。 ### ECMAScript (ES) ECMAScript 是JavaScript的核心，定义了语言的语法和基础特性。包括以下关键点： 1. **语法**：JavaScript 采用C风格的语法，支持变量声明、函数定义、条件语句（if...else）、循环（for, while）等。 2. **变量和数据类型**：JavaScript 支持动态类型，常见的数据类型有字符串（string）、数字（number）、布尔（boolean）、null、undefined、对象（object）以及后来引入的Symbol和BigInt。 3. **运算符**：包括算术运算符（+，-，*，/，%），比较运算符（==，===，!=，!==），逻辑运算符（&&，||，!）等。 4. **逻辑控制语句**：如if...else、switch、for、while、do...while等用于控制程序流程。 5. **关键字和保留字**：比如var、let、const、function、return、this、new等是JavaScript的关键字，不能用作变量名。 6. **对象**：JavaScript 中一切皆对象，包括内置对象（如Array、Date、Math）和自定义对象。 ### 浏览器对象模型 (BOM) BOM允许JavaScript与浏览器进行交互，主要对象包括： - **history**：管理浏览历史，如history.back()、history.forward()用于前进和后退。 - **location**：表示当前页面的URL，可以修改location.href改变页面地址。 通过BOM，开发者可以实现窗口操作、页面导航等功能。 ### 文档对象模型 (DOM) DOM 是HTML或XML文档的抽象表示，它将文档视为一个节点树。主要概念包括： - **节点**：每个HTML元素、文本、注释等都是一个节点，如document对象是整个页面的根节点。 - **兄弟节点**：同一层级的节点互为兄弟节点，如两个`<p>`元素。 - **父节点和子节点**：每个非根节点都有一个父节点和零个或多个子节点。 DOM 提供了一系列方法和属性来操作这些节点，如创建、查找、修改和删除节点。例如，`document.getElementById()`可获取ID为特定值的元素，`element.innerHTML`可改变元素内容。 ### 脚本插入方式 JavaScript 可以以以下三种方式插入HTML文档： 1. **内联脚本**：使用`<script>`标签直接在HTML中编写JavaScript代码。 2. **外部文件**：将JavaScript代码保存为.js文件，然后在HTML中通过`<script src="script.js"></script>`引用。 3. **事件处理**：将JavaScript函数直接绑定到HTML标签的事件属性上，如`<button onclick="myFunction()">点击我</button>`。 在早期，为了兼容不支持JavaScript的浏览器，常常使用`<!--`和`-->`来包围JavaScript代码，但现代浏览器一般不需要这种做法。`document.write()`用于在文档加载过程中向HTML流中写入内容，但在页面加载完成后使用会清空整个HTML文档。 JavaScript 的学习需要结合实际项目和不断实践，理解并熟练运用ECMAScript、BOM和DOM是成为合格前端开发者的基础。对于初学者来说，可以从理解这些基本概念开始，逐渐掌握更高级的特性，如Promise、Async/Await、模块化、框架（如React、Vue等）等。