内置对象与DOM 部分知识点介绍（Day11 2/3）

本页对应 Day11_BOM&DOM，共 7 段视频，约 1 小时 58 分。

学习目标

能够说明 BOM 与 DOM 的全称、作用范围及区别，并举例指出 window、document 分别属于哪类对象。
能够使用 eval、encodeURI、decodeURI 完成字符串执行与 URL 中文编解码，并解释编码结果和返回值。
能够使用 document.getElementById 获取元素，通过 style、innerHTML 修改元素样式与内容，并为元素绑定点击事件回调函数。
能够调用 alert、confirm、prompt，根据其返回值分别处理确定/取消、用户输入及取消输入等不同分支。
能够使用 window.open 打开空白窗口、指定地址窗口、指定 iframe 子窗口及指定尺寸窗口，并能说明 window.close 的关闭限制。
能够使用 scrollTo、scrollBy 实现页面定位滚动和相对滚动，并使用 setInterval、clearInterval 编写可启动、停止和倒计时归零的定时器程序。

知识点

一、Global 与三个全局方法

为什么需要： JavaScript 里有些能力不属于某个具体对象，而是全局可直接使用，例如 Infinity、isNaN，以及本节要补的 eval、encodeURI、decodeURI。它们都定义在全局对象上，浏览器里可理解为 window 的一部分。

怎么想： 先分清“字符串”与“代码”。字符串只是数据，不会自动执行；eval 的作用是把字符串当代码执行。URL 中若出现中文等字符，某些解析器可能处理失败，所以要先编码，需要时再解码。

怎么做：

var msg = "var address = '上海'";
// console.log(address); // 报错：address 未定义
eval(msg);
console.log(address); // 上海

var url = "http://atguigu.com/image/小乐.html?name=101";
var url1 = encodeURI(url);
var url2 = decodeURI(url1);
console.log(url, url1, url2);

易错点： eval 不执行普通字符串；字符串里有语法错误，执行时仍会报错。encodeURI 主要处理 URL 中的中文等字符，编码结果不要再手写猜测；decodeURI 是对编码后的 URL 解码。eval 属于高风险能力，初学先理解含义，不要滥用。

二、BOM 与 DOM：先分清运行环境

为什么需要： 前面学的语法、数组、对象等属于 ECMAScript，是语言本身；但 JS 运行在浏览器里，还要操作浏览器窗口和页面，这就需要浏览器提供的 API。

怎么想： BOM 是 Browser Object Model，浏览器对象模型，典型对象是 window；DOM 是 Document Object Model，文档对象模型，核心是 document，用来操作 HTML。运行环境变了，API 也会变，例如 Node.js 没有 BOM/DOM。

怎么做： 在浏览器中，window 是现成的，window.document 表示整个文档；DOM 操作前通常先获取元素。

易错点： 不要把 DOM 当成 JS 语法本身；也不要把 BOM 当成所有环境都有。浏览器为了用户体验会限制某些行为，例如页面一打开就连续 open 多个窗口，可能被拦截。

三、DOM 入门四步

为什么需要： 想让页面“活”起来，就要用 JS 找到 HTML 元素，再改样式、改内容、加事件。

怎么想： 先获取元素对象，这个对象与页面元素建立映射关系；操作对象，页面元素就变化。事件函数是回调函数：你定义、不调用，用户触发后由事件机制调用。

怎么做：

var boxEle = document.getElementById("box");
boxEle.onclick = function () {
  boxEle.style.backgroundColor = "red";
  boxEle.style.color = "white";
  boxEle.innerHTML = "我被点了一下";
};

易错点： getElementById 参数是字符串 ID；style.backgroundColor 用驼峰，不能写 background-color；innerHTML 的 HTML 大写是规定写法。事件名如 onclick 固定，回调函数后不要加小括号，否则会立即调用。

四、window 弹框

为什么需要： 快速提示、让用户确认、让用户输入，是交互中最基础的三类弹框。

怎么想： 三个方法都属于 window，可省略 window.。重点看返回值：alert 没有返回值；confirm 返回 true/false；prompt 返回用户输入内容或 null。

怎么做：

alert("hello");
var ok = confirm("你确定吗？");
var pwd = prompt("请输入银行卡密码");
console.log(ok, pwd);

易错点： alert 的返回值是 undefined；confirm 点确定是 true，取消是 false；prompt 输入数字也返回字符串，点取消返回 null。

五、打开/关闭窗口

为什么需要： 有时需要新窗口展示页面，或指定在某个窗口/iframe 中打开。

怎么想： open 第一个参数是地址，第二个是窗口名，第三个可写尺寸；close 关闭本窗口，但通常要求该窗口由 open 打开。

怎么做：

window.open(); // 空白窗口
window.open("03-dom/01-dom的几个知识点.html");
window.open("https://www.taobao.com", "大佬");
window.open("https://www.taobao.com", "_blank", "width=400,height=300");
window.close();

易错点： 页面加载时立刻连续 open 可能被浏览器拦截；window.name 默认是空字符串，可给窗口命名；close 不是想关哪个就关哪个，普通打开的当前页通常关不掉。

六、页面滚动

为什么需要： 返回顶部、上一页/下一页、平滑滚动都离不开滚动控制。

怎么想： scrollTo 到指定位置，scrollBy 按距离滚动。两个参数写法是坐标/距离；对象写法可加 behavior: "smooth" 做平滑效果。

怎么做：

window.scrollTo(0, 0);
window.scrollTo({ left: 0, top: 0, behavior: "smooth" });
window.scrollBy(0, 100);
window.scrollBy({ top: 100, behavior: "smooth" });

易错点： scrollBy 是“再滚多少”，连续点击会继续滚；scrollTo(0,0) 回顶部；方向正负不要死记，调试时试一次即可。实际页面应避免左右滚动。

七、多次定时器与清除

为什么需要： 倒计时、时钟、轮播、随机点名都要“每隔一段时间执行一次”。

怎么想： setInterval(回调函数, 毫秒) 会反复调用回调；它返回一个数字标记，用变量保存，clearInterval(标记) 才能停。setTimeout 是单次定时器。

怎么做：

var n = 10;
var box = document.getElementById("box");
var timer = setInterval(function () {
  n--;
  box.innerHTML = n;
  if (n === 0) {
    clearInterval(timer);
  }
}, 1000);

易错点： 回调函数不要写成 fn()，否则会立刻执行；setInterval 的第三个及后续参数会传给回调；倒计时若先减再判断，可能在 0 后还执行一次，必要时用 return 或调整判断顺序。定时器标记不要靠“第几个”硬记，用变量保存最稳。

DOM 是什么：先分清 BOM 与 DOM

本节笔记先给结论：DOM 全称 Document Object Model，译为文档对象模型。它是 HTML 文档为 JavaScript 提供的、能够对 HTML 文档进行相关操作的 API。

为什么需要：前面学的 JavaScript 语法、变量、函数、内置对象，主要解决“程序本身怎么算”的问题；但页面上的按钮、div、文字、样式，JavaScript 默认并不能直接改。JavaScript 运行在浏览器里，浏览器会给它提供操作接口。转写稿里把接口比作方向盘、刹车、油门：编程语言本身没有这些，是宿主环境提供的。BOM 是浏览器对象模型，管浏览器窗口相关能力；DOM 是文档对象模型，管 HTML 文档里的元素。

怎么想：要操作页面，先找到“文档”这个入口。document 就表示整个文档，是最大的 DOM 对象，而且不用自己创建，页面一打开就有。DOM 操作不是凭空改 HTML 源码，而是拿到一个 JS 对象，这个对象和页面元素建立映射关系；操作对象，页面元素就跟着变化。转写稿用“扎小人”作比喻：对象像小人，页面元素像被映射的人，动对象，页面就动。

怎么做：本节先掌握四个基础动作，原笔记代码清单如下（原笔记中 oncilck 是拼写笔误，下面纠正为 onclick）：

1. 获取元素
   document.getElementById()

2. 给元素添加事件
   元素对象.onclick = function() {};

3. 设置元素的 CSS 样式
   元素对象.style.属性名 = '值';

4. 设置元素中的文字内容
   元素对象.innerHTML = '内容';

易错点：DOM 不是“直接改 HTML 文件”，而是通过 JS 对象操作当前页面；document 不需要 new；不要把 BOM 和 DOM 混为一谈。

获取元素：document.getElementById()

为什么需要：页面上元素很多，不能上来就改，必须先明确“我要操作哪一个”。转写稿里反复强调：不管后面做什么操作，一般来说第一步都是获取元素，把 HTML 元素保存成 JS 对象。

怎么想：方法名虽然长，但可以拆开读：get 是获取，element 是元素，by 是通过，id 是 ID，合起来就是“通过 ID 获取元素”。页面里给目标 div 写一个 id="box"，JS 里就写 document.getElementById('box')。

怎么做：

html

<div id="box">我是 box</div>
<script>
  const boxEle = document.getElementById('box');
  console.log(boxEle);
</script>

控制台里看到的对象可能“长得像一个标签”，鼠标放上去页面还会高亮，但它确实是对象。转写稿还通过构造函数看到它是 HTMLDivElement，说明它和普通对象一样有类型、有属性、有方法。

易错点：ID 字符串要写对；方法名大小写要写对；拿到对象后要先用变量存起来，后面添加事件、改样式、改内容都操作这个变量。

给元素添加事件：onclick 与回调函数

为什么需要：页面是给用户看的，很多效果不能一打开就执行，而要等用户点击。比如先让盒子保持原样，用户点一下再变红、再改文字。

怎么想：事件就是“发生了某个动作”。单击事件名固定写 onclick。右边赋一个函数，这个函数不是程序员主动调用，而是等用户点击后由事件机制调用，所以它是回调函数。转写稿的调试过程很关键：刷新页面时函数里的输出没有执行；点一下元素，才执行。

怎么做：

boxEle.onclick = function () {
  console.log('我被点击了');
};

易错点：事件名是 onclick，不是 oncilck；回调函数赋值时不要写成 function(){}() 这种立即调用形式；不要误以为代码一写完就执行，单击事件要等用户点击。事件名固定，后面还会遇到双击、右击等不同事件。

设置 CSS 样式：style 对象与驼峰命名

为什么需要：只改内容不够，很多交互要动态改颜色、字号、背景等。用 JS 改样式，页面才能“活”起来。

怎么想：元素对象上有一个 style 属性，它本身也是对象，里面放的是样式。CSS 里的属性名映射到 JS 对象属性时，带短横线的属性要改成小驼峰。比如 background-color 对应 backgroundColor；也可以直接写复合属性 background。

怎么做：

boxEle.onclick = function () {
  boxEle.style.backgroundColor = 'red';
  boxEle.style.color = 'white';
};

转写稿中先改背景色，页面刷新后点击变红；再改文字颜色，也能生效。

易错点：不能写 boxEle.style.background-color，因为点后面要符合标识符规则；要么写 backgroundColor，要么用中括号 style['background-color']。属性值通常写成字符串，如 'red'、'14px'。

设置文字内容：innerHTML

为什么需要：交互不只是改样式，还要改元素里的文字。比如点击后把原来的文字换成“哈哈哈，我被点了一下”。

怎么想：元素对象有一个规定好的属性 innerHTML，用来设置元素中的内容。转写稿特别提醒：HTML 这四个字母要全部大写，这是文档里规定死的，不需要推理，先记住并会用。

怎么做：

boxEle.onclick = function () {
  boxEle.style.backgroundColor = 'red';
  boxEle.style.color = 'white';
  boxEle.innerHTML = '哈哈哈，我被点了一下';
};

易错点：innerHTML 大小写不要写错；赋值内容要加引号；它改的是元素内容，不是样式。把四个操作串起来时，获取元素放前面，事件里再改样式和内容，调试时先看控制台对象，再点击验证效果。

BOM是什么

BOM 全称 Browser Object Model，译为浏览器对象模型。BOM 是浏览器为 JavaScript 提供的能够对浏览器进行相关操作的 API。
为什么需要：JavaScript 语言本身只规定语法和内置对象，真正运行在浏览器里时，还需要操作窗口、弹框、地址、滚动、定时器等浏览器能力。怎么想：把 BOM 理解成“浏览器这个宿主给 JS 的操作接口”，接口以对象形式存在，最典型的是 window。怎么做：浏览器窗口打开后，BOM 对象通常已存在，可直接使用，很多 window. 可省略。易错点：BOM 不是 ECMAScript 标准的一部分，换到 Node.js 等非浏览器环境就没有 BOM。

全局对象上的三个方法：eval、encodeURI、decodeURI

为什么需要：有时要把字符串当代码执行，或处理 URL 中的中文，避免解析失败。怎么想：eval 是“把字符串作为代码执行”；encodeURI 对 URL 编码，decodeURI 解码。怎么做：

var msg = "var address = '上海'";
console.log(address); // 报错：address 未定义
eval(msg);
console.log(address); // 上海

var url = "https://atguigu.com/image/小乐.html?name=101";
var url1 = encodeURI(url);
console.log(url1); // 中文被编码成 %XX 形式
var url2 = decodeURI(url1);
console.log(url2); // 恢复原 URL

易错点：字符串只是内容，不 eval 不会执行；eval 中字符串有语法错误仍会报错；编码主要处理中文等特殊字符，编码后要解码才能还原。

BOM与DOM：先分清运行环境和操作对象

为什么需要：后面写案例不能只靠 ECMAScript 语法，还要操作浏览器和页面。怎么想：BOM 管浏览器窗口相关能力，DOM 全称 Document Object Model，管 HTML 文档；document 是 DOM 的最大对象。怎么做：操作页面元素前，先用 DOM 获取元素，再改样式、内容或加事件。易错点：DOM 不是 BOM；Node.js 环境没有 DOM/BOM 这套浏览器接口。

DOM入门：获取元素、改样式、加事件、改内容

为什么需要：要让页面“活”起来，必须拿到 HTML 元素并操作它。怎么想：document.getElementById 通过 id 找到元素，返回对象；这个对象与页面元素是映射关系，操作对象，页面就变化。怎么做：

html

<div id="box">内容</div>

var boxEle = document.getElementById("box");
console.log(boxEle);

boxEle.onclick = function () {
  boxEle.style.backgroundColor = "red";
  boxEle.style.color = "white";
  boxEle.innerHTML = "哈哈哈，我被点了一下";
};

易错点：background-color 写成 JS 属性时用 backgroundColor；innerHTML 的 HTML 大写；onclick 后是回调函数，定义时不加小括号调用。

window弹框：alert、confirm、prompt

为什么需要：给用户提示、让用户确认或输入。怎么想：三者都是 window 方法，window. 可省略；重点看返回值。怎么做：

var res1 = alert("警告一下");
console.log(res1); // undefined

var res2 = confirm("你确定吗？");
console.log(res2); // 确定 true，取消 false

var res3 = prompt("请输入银行卡密码");
console.log(res3); // 输入内容为字符串；取消为 null

易错点：alert 没有返回值；confirm 返回布尔值；prompt 输入数字也返回字符串，取消返回 null。

打开与关闭窗口：open、close

为什么需要：用 JS 打开新窗口、指定页面、指定尺寸或关闭窗口。怎么想：open 第一个参数是地址，第二个是窗口名，第三个是尺寸；close 关闭本窗口。怎么做：

btn01.onclick = function () {
  open(); // 空白窗口
};
btn02.onclick = function () {
  open("03-dom/01-dom的几个知识点.html"); // 新窗口打开指定网页
};
btn03.onclick = function () {
  open("https://www.taobao.com", "大佬"); // 在指定窗口/iframe中打开
};
btn04.onclick = function () {
  open("", "", "width=400,height=300"); // 指定尺寸
};
btn05.ondblclick = function () {
  close();
};

易错点：页面加载时立刻 open 可能被浏览器拦截；连续 open 多个新窗口，后面的可能被拦截；close 只能关闭由 open 打开的窗口。

页面滚动：scrollTo与scrollBy

为什么需要：用 JS 控制页面滚到指定位置或滚动指定距离，例如返回顶部、上下翻页。怎么想：scrollTo 是到目标位置，scrollBy 是相对当前滚动距离；方向不要死记，转写稿中就是通过试正负值确认的。怎么做：

btn01.onclick = function () {
  scrollTo(0, 0); // 返回顶部
  // scrollTo({ left: 0, top: 0, behavior: "smooth" });
};
btn02.onclick = function () {
  scrollBy(0, 600); // 每次向下滚动一段距离
};

易错点：scrollTo 坐标方向需实测；scrollBy 可连续点击继续滚；平滑滚动对象参数中 behavior: "smooth" 在转写稿演示中只用这一个值。

多次定时器：setInterval与clearInterval

为什么需要：倒计时、电子时钟、随机点名等都要“每隔一段时间执行一次”。怎么想：setInterval(回调函数, 毫秒) 设置多次定时器，clearInterval(定时器标记) 清除；定时器返回唯一标记。怎么做：

var interId01 = setInterval(function () {
  console.log(Math.round(Math.random()));
}, 1000);

var number = 10;
var boxEle = document.getElementById("box");
var interId03 = setInterval(function () {
  number--;
  boxEle.innerHTML = number;
  if (number === 0) {
    clearInterval(interId03);
  }
}, 1000);

易错点：第二个参数单位是毫秒；不写间隔默认 0，会不停执行；清除时要传对应定时器标记；转写稿调试发现，倒计时若把判断写在自减前，可能到 -1 才停，因此要分析执行顺序；setInterval 第三个及后续参数会原样传给回调函数，回调形参不会每次重新随机。

课堂画面

课堂画面 1

课堂画面 2

课堂画面 3

课堂画面 4

课堂画面 5

课堂画面 6

代码示例

1. Global 内置对象：eval / encodeURI / decodeURI

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Global 内置对象</title>
</head>
<body>
  <script>
    // eval：将字符串作为代码执行
    var code = 'var address = "上海";';
    console.log('eval 前：address 未定义，不能直接输出 address');

    eval(code);
    console.log('eval 后 address =', address);

    // encodeURI / decodeURI：对 URL 进行编码和解码
    var url = 'http://atguigu.com/image/小乐.html?name=101';
    console.log('原始 URL：', url);

    var url201 = encodeURI(url);
    console.log('编码后：', url201);

    var url202 = decodeURI(url201);
    console.log('解码后：', url202);
  </script>
</body>
</html>

要点解释与易错点：

eval(code) 会把字符串当作代码执行，所以执行后能访问 address。
eval 中字符串如果有语法错误，执行时仍然会报错。
encodeURI 主要会把 URL 中的中文等字符编码；decodeURI 是反向解码。
不要滥用 eval，转写稿中也强调它属于比较高级、需要谨慎使用的应用。

2. DOM 基本操作：获取元素、添加事件、设置样式、修改内容

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>DOM 基本操作</title>
  <style>
    #box {
      width: 600px;
      padding: 20px;
      background-color: #ddd;
    }
  </style>
</head>
<body>
  <div id="box">我是 box，点我一下试试。</div>

  <script>
    // 1. 获取元素
    var boxEle = document.getElementById('box');
    console.log(boxEle);

    // 2. 给元素添加单击事件
    boxEle.onclick = function () {
      // 3. 设置元素的 CSS 样式
      boxEle.style.backgroundColor = 'red';
      boxEle.style.color = 'white';
      boxEle.style.fontSize = '14px';

      // 4. 设置元素中的文字内容
      boxEle.innerHTML = '哈哈哈，我被点了一下';
    };
  </script>
</body>
</html>

要点解释与易错点：

document.getElementById('box') 参数是字符串 ID，不要写成 #box。
事件名是 onclick，不是 oncilck。
CSS 的 background-color 映射到 JS 中要写成 style.backgroundColor，使用小驼峰。
修改元素内容使用 innerHTML，注意大小写，不是 innerHtml。
boxEle.onclick = function () {} 中的函数是回调函数，由用户点击触发，不需要手动调用。

3. BOM 综合：弹框、打开/关闭窗口、页面滚动、多次定时器

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>BOM 基本操作</title>
  <style>
    body {
      margin: 0;
      font-family: sans-serif;
    }

    .toolbar {
      position: fixed;
      top: 10px;
      right: 10px;
      width: 230px;
      padding: 10px;
      background: #fff;
      border: 1px solid #999;
    }

    .toolbar button {
      display: block;
      width: 100%;
      margin: 5px 0;
    }

    #box {
      font-size: 30px;
      color: red;
    }

    section {
      height: 500px;
      padding: 20px;
      border-bottom: 2px dashed #999;
      box-sizing: border-box;
    }
  </style>
</head>
<body>
  <div class="toolbar">
    <button id="btnAlert">警告框</button>
    <button id="btnConfirm">确认框</button>
    <button id="btnPrompt">输入框</button>
    <button id="btnOpen">打开空白窗口</button>
    <button id="btnOpenPage">打开本页新窗口</button>
    <button id="btnOpenSize">打开指定尺寸窗口</button>
    <button id="btnClose">关闭本窗口</button>
    <button id="btnTop">返回顶部 scrollTo</button>
    <button id="btnBy">向下滚动 scrollBy</button>
    <div id="box">10</div>
  </div>

  <section>第一部分</section>
  <section>第二部分</section>
  <section>第三部分</section>
  <section>第四部分</section>

  <script>
    // 1. 弹框
    document.getElementById('btnAlert').onclick = function () {
      alert('这是一个警告框');
    };

    document.getElementById('btnConfirm').onclick = function () {
      var res = confirm('你确定吗？');
      console.log('确认框返回值：', res);

      if (res) {
        alert('你点了确定');
      } else {
        alert('你点了取消');
      }
    };

    document.getElementById('btnPrompt').onclick = function () {
      var value = prompt('请输入您的银行卡密码');
      console.log('输入框返回值：', value, typeof value);
      // 点确定返回字符串；点取消返回 null
    };

    // 2. 打开窗口 / 关闭窗口
    document.getElementById('btnOpen').onclick = function () {
      window.open(); // 打开空白窗口
    };

    document.getElementById('btnOpenPage').onclick = function () {
      window.open(location.href); // 打开本页新窗口
    };

    document.getElementById('btnOpenSize').onclick = function () {
      // 第二个参数空着，表示打开新窗口；第三个参数指定窗口尺寸
      window.open('', '', 'width=400,height=300');
    };

    document.getElementById('btnClose').onclick = function () {
      window.close(); // 通常只有通过 open 打开的窗口，脚本才能关闭
    };

    // 3. 页面滚动
    document.getElementById('btnTop').onclick = function () {
      window.scrollTo(0, 0);
      // 平滑返回顶部可写成：
      // window.scrollTo({ left: 0, top: 0, behavior: 'smooth' });
    };

    document.getElementById('btnBy').onclick = function () {
      window.scrollBy(0, 600); // 在当前位置纵向滚动 600px
      // 平滑滚动可写成：
      // window.scrollBy({ top: 600, behavior: 'smooth' });
    };

    // 4. 多次定时器倒计时
    var number = 10;
    var boxEle = document.getElementById('box');

    var timerId = setInterval(function () {
      number--;
      boxEle.innerHTML = number;

      if (number === 0) {
        clearInterval(timerId);
      }
    }, 1000);
  </script>
</body>
</html>

要点解释与易错点：

alert 没有返回值；confirm 返回 true / false；prompt 点确定返回字符串，点取消返回 null。
window.open() 可打开空白窗口；第二个参数写窗口名，第三个参数可指定尺寸。
浏览器通常会限制页面一加载就自动 open 多个窗口；通过按钮点击触发更符合演示场景。
window.close() 一般只能关闭由 open 打开的窗口，普通页面直接关闭可能被浏览器阻止。
scrollTo 的两个参数是目标坐标；scrollBy 的两个参数是滚动距离。对象参数中可加 behavior: 'smooth' 实现平滑滚动。
setInterval 的时间单位是毫秒；clearInterval 需要传入 setInterval 返回的定时器标记。
定时器回调函数不要写成 function () {}()，否则会立即调用，而不是交给定时器调用。

常见错误

页面一加载就调用 window.open，新窗口不弹出或被拦截
现象→刷新页面无新窗口，或连续 open 只成功一个。
原因→浏览器限制非用户手势触发的弹窗，并阻止连续打开多个窗口。
修法→把 open 放进按钮点击等用户交互回调中；一次交互只打开必要窗口。
调用 close() 关不掉当前页面
现象→双击/点击后窗口未关闭，控制台或浏览器提示脚本不能关闭该窗口。
原因→脚本只能关闭由 open 打开的窗口，不能随意关闭用户直接打开的窗口。
修法→保存 open 的返回值，只关闭该返回值对应窗口；不要对非 open 窗口调用 close()。
clearInterval() 清除定时器无效
现象→调用清除后回调仍在执行。
原因→没有保存 setInterval 返回值，或清除时传入的标记不对应。
修法→用变量保存每个定时器的返回值，调用 clearInterval(保存的标记)；多个定时器分别保存、分别清除。
setInterval 回调写成 fn() 导致立即执行或只执行一次
现象→定时器未按间隔运行，函数被提前调用。
原因→传入了函数调用结果，而不是函数本身。
修法→传函数名时不加括号，如 setInterval(fn, 1000)；需要传参时用匿名函数或箭头函数包裹。
倒计时到 0 后继续变成负数或停不下来
现象→数字到 0 后仍继续减，或清除逻辑不生效。
原因→先减再判断、判断后未 return/未清除，导致边界多执行一次。
修法→到 0 时立即 clearInterval(标记)，必要时 return；用“先判断再更新”或明确验证减减顺序。
用点语法设置带短横线的 CSS 属性
现象→element.style.background-color 报错或无效。
原因→点语法属性名需符合标识符规范，短横线不能直接写在点后面。
修法→改为小驼峰 element.style.backgroundColor，或使用 element.style['background-color']。
事件绑定前元素为 null
现象→报 Cannot read properties of null。
原因→getElementById 的 ID 写错，或脚本在目标元素之前执行。
修法→核对 ID；把脚本放到目标元素之后，或等 DOM 加载完成后再获取并绑定事件。

练习

实现一个 #box：页面初始保持原样；点击 #box 后修改其背景色、文字颜色、字号和文字内容。要求分别使用 style 与 innerHTML。
实现“打开窗口 / 关闭窗口”两个按钮：点击“打开”用 open 打开一个指定页面，并保存返回值；点击“关闭”只关闭该窗口。说明为什么不能直接关闭用户手动打开的当前窗口。
实现“返回顶部”和“下一页”两个按钮：返回顶部使用 scrollTo 的平滑滚动；下一页使用 scrollBy 按固定距离滚动。注意区分“目标坐标”和“滚动距离”。
实现倒计时 10 → 0：每 1 秒更新 #box，到 0 停止。要求保存定时器标记，并测试“先判断再更新”和“先更新再判断”的结果差异。
实现弹框判断流程：用 confirm 询问是否继续；确认后再用 prompt 输入内容并更新页面；取消则不更新。要求正确处理返回值类型。

原视频对照

#	视频	时长
1	内置对象-Global	09:04
2	BOM和DOM	09:29
3	DOM部分知识点	19:02
4	window对象-弹框	05:55
5	window对象-打开关闭窗口	22:41
6	window对象-页面滚动	21:24
7	多次定时器	30:40

小结

eval、encodeURI、decodeURI 属于全局方法；URL 中出现中文等字符时，编码/解码要成对使用。
DOM 操作的基本链路是：获取元素对象 → 绑定事件 → 修改样式或内容；元素对象与页面元素是映射关系。
style 属性对应 CSS 样式，短横线属性需转小驼峰或改用中括号；innerHTML 用于修改元素内容。
window 的方法通常可省略 window.；三种弹框的返回值不同，判断逻辑要按返回值类型写。
open / close 受用户手势和窗口来源限制；保存 open 返回值，才能可靠关闭目标窗口。
scrollTo 面向目标坐标，scrollBy 面向滚动距离；对象参数配合 behavior: 'smooth' 可实现平滑滚动。
setInterval 必须保存唯一标记并用 clearInterval 清除；回调传函数名不加括号，定时器后续参数会原样传给回调。
定时器边界问题要看执行顺序：判断与减减的先后会直接影响倒计时是否多执行一次或停在 0。

内置对象与DOM 部分知识点介绍（Day11 2/3） ​

学习目标 ​

知识点 ​

一、Global 与三个全局方法 ​

二、BOM 与 DOM：先分清运行环境 ​

三、DOM 入门四步 ​

四、window 弹框 ​

五、打开/关闭窗口 ​

六、页面滚动 ​

七、多次定时器与清除 ​

DOM 是什么：先分清 BOM 与 DOM ​

获取元素：document.getElementById() ​

给元素添加事件：onclick 与回调函数 ​

设置 CSS 样式：style 对象与驼峰命名 ​

设置文字内容：innerHTML ​

BOM是什么 ​

全局对象上的三个方法：eval、encodeURI、decodeURI ​

BOM与DOM：先分清运行环境和操作对象 ​

DOM入门：获取元素、改样式、加事件、改内容 ​

window弹框：alert、confirm、prompt ​

打开与关闭窗口：open、close ​

页面滚动：scrollTo与scrollBy ​

多次定时器：setInterval与clearInterval ​

课堂画面 ​

代码示例 ​

常见错误 ​

练习 ​

原视频对照 ​

小结 ​

内置对象与DOM 部分知识点介绍（Day11 2/3）

学习目标

知识点

一、Global 与三个全局方法

二、BOM 与 DOM：先分清运行环境

三、DOM 入门四步

四、window 弹框

五、打开/关闭窗口

六、页面滚动

七、多次定时器与清除

DOM 是什么：先分清 BOM 与 DOM

获取元素：document.getElementById()

给元素添加事件：onclick 与回调函数

设置 CSS 样式：style 对象与驼峰命名

设置文字内容：innerHTML

BOM是什么

全局对象上的三个方法：eval、encodeURI、decodeURI

BOM与DOM：先分清运行环境和操作对象

DOM入门：获取元素、改样式、加事件、改内容

window弹框：alert、confirm、prompt

打开与关闭窗口：open、close

页面滚动：scrollTo与scrollBy

多次定时器：setInterval与clearInterval

课堂画面

代码示例

常见错误

练习

原视频对照

小结