ECMAScript、DOM和BOM是个啥（通俗地来讲）

1. ECMAScript（基础语法）

比喻：就像学汉语要先学拼音、汉字、造句规则一样，ECMAScript 是 JavaScript 的“语法课本”。

例子：

• 你要学 变量（存数据的盒子）：

  javascript复制代码

  let 名字 = "小明"; // 把“小明”存进变量“名字”里

• 学 函数（能重复用的工具）：

  javascript复制代码

  function 加法(a, b) {
    return a + b; // 输入两个数，输出它们的和
  }

• 学 if判断、循环（逻辑控制）：

  javascript复制代码

  if (今天下雨) {
    带伞();
  } else {
    不带伞();
  }

作用：写代码的基础规则，和网页、浏览器无关，纯粹是逻辑。

2. DOM（操作网页）

比喻：网页像一堆积木，DOM 是让你用 JavaScript 指挥这些积木的工具。

例子：

• 点击按钮时修改文字：

  javascript复制代码

  // 找到网页上的按钮和段落
  const 按钮 = document.querySelector("#按钮");
  const 段落 = document.querySelector("#段落");
  
  // 点击按钮时，把段落文字变红
  按钮.addEventListener("click", () => {
    段落.style.color = "red";
  });

• 动态添加图片到网页：

  javascript复制代码

  const 图片 = document.createElement("img");
  图片.src = "猫猫.jpg";
  document.body.appendChild(图片); // 把图片塞进网页里

作用：通过 document 对象，让 JavaScript 能增删改查网页内容。

3. BOM（操作浏览器）

比喻：浏览器是一台机器，BOM 是让你用 JavaScript 按机器上的按钮（比如刷新、缩放窗口）。

例子：

• 弹出新窗口：

  javascript复制代码

  window.open("https://www.example.com"); // 新开一个浏览器窗口

• 获取屏幕分辨率：

  javascript复制代码

  const 屏幕宽度 = window.screen.width; // 比如 1920

• 后退/前进页面（像浏览器的← →按钮）：

  javascript复制代码

  window.history.back();  // 后退
  window.history.forward(); // 前进

作用：通过 window 对象，让 JavaScript 能控制浏览器行为（和网页无关）。

一句话总结：

• ECMAScript：学写代码的语法（变量、函数、循环）。
• DOM：用代码改网页内容（比如删掉一张图、加个按钮）。
• BOM：用代码指挥浏览器（比如弹窗、跳转页面）。