JavaScript 前端开发基础入门与 DOM 操作详解

引言

在当今数字化时代，互联网已然成为人们生活不可或缺的一部分，而网页作为互联网的主要载体，其用户体验的优劣直接关乎着信息的有效传递与用户的留存。JavaScript，这门在前端开发领域占据核心地位的编程语言，犹如一位神奇的魔法师，为静态的网页注入灵动的生命力，使之蜕变成为交互性强、功能丰富的精彩世界。

不妨回想一下，当我们浏览那些热门网站时，诸多令人惊艳的交互效果扑面而来。鼠标轻轻悬停于导航栏，下拉菜单如丝般顺滑地展开，各类选项一目了然，仿佛在热情指引我们探索网站的深层内容；点击图片，它竟能优雅地放大，细节之处尽显无遗，让我们不错过任何精彩；填写表单时，一旦输入有误，即时的错误提示便会贴心出现，引导我们快速修正。这些看似平常却又极大提升体验的交互细节，背后皆是 JavaScript 在默默施展魔力。它能够精准捕捉用户的每一次点击、滚动、输入等操作，并以毫秒级的响应速度触发相应的功能，为用户带来流畅、自然且愉悦的浏览之旅。

接下来，让我们一同深入 JavaScript 的奇妙世界，揭开其在前端开发中的神秘面纱，探寻那些让网页焕发生机的神奇代码。

变量与数据类型

在 JavaScript 中，变量犹如一个个神奇的盒子，用于存储各类数据，而声明变量的方式有 var、let、const 三种，它们各自有着独特的性格与适用场景。

var，作为元老级的变量声明方式，自 JavaScript 诞生之初便已存在。它具有函数作用域，这意味着在一个函数内部声明的 var 变量，在整个函数体内都如同拥有了通行证，随处可见且可被访问。不过，var 变量存在变量提升的特性，就好像变量被偷偷地提到了函数顶部进行了预声明，即便你在函数底部才正式声明它，在顶部也能访问，只不过此时它的值是 undefined，犹如一个空盒子等待被填满。例如：

function varTest() {
  console.log(x); // 输出 undefined，因为变量提升，此时 x 已声明但未赋值
  var x = 10;
  console.log(x); // 输出 10，x 已被赋值为 10
}
varTest();

并且，var 允许在同一作用域内重复声明同一个变量，后续的声明会悄无声息地覆盖前面的声明，如同在同一个盒子里不断更换物品。

let 则是 ES6 引入的新贵，它带来了块级作用域的概念，让变量的作用范围更加精准可控。在一个由花括号{}包裹的代码块中，如 if 语句、for 循环内部，使用 let 声明的变量就像是被限定在了这个小天地里，外界无法轻易窥探。而且，它不存在变量提升，坚决杜绝了在变量未声明就使用的乱象，若你试图在声明前访问，JavaScript 会毫不留情地抛出引用错误，就像未被允许进入的禁地，强行闯入就会触发警报。例如：

function letTest() {
  if (true) {
    let y = 20;
    console.log(y); // 输出 20，y 在 if 块级作用域内有效
  }
  console.log(y); // 抛出 ReferenceError，y 在 if 块外不可见
}
letTest();

const，同样来自 ES6 家族，主要用于声明常量。它和 let 一样具有块级作用域，一旦被赋予初始值，就如同被刻上了不可更改的印记，后续任何试图重新赋值的操作都会引发 TypeError 错误。不过，若是 const 声明的是复杂数据类型，如对象或数组，虽然不能重新赋值整个变量，但可以修改其内部的属性或元素，因为 const 保证的是变量所指向的内存地址不变，而复杂数据类型内部结构的改变并不影响这个地址。例如：