Lecture07-DOM 与事件

管理员
2026-10-17
前端-基础语法
63
0
文章目录

    [toc]

    单词词性音标含义
    DOMn./ˌdiː əʊ ˈem/文档对象模型，浏览器把 HTML 解析成的一棵可操作对象树
    documentn./ˈdɒkjumənt/代表整棵 DOM 树的入口对象，用它查找和修改页面元素
    elementn./ˈelɪmənt/元素，DOM 树上的一个节点/对象
    querySelectorv./kwɪəri səˈlektə/按 CSS 选择器（如 .类名）查找元素，比 getElementById 通用
    getElementByIdv./ɡet ˈelɪmənt baɪ aɪ diː/按 id 查找元素的经典方法
    addEventListenerv./əd ɪˈvent ˈlɪsnə/给元素绑定事件监听器，写法 addEventListener('事件名', 回调)
    textContentn./ˈtekst ˈkɒntent/元素的文本内容属性，改它就改掉了页面显示的文字

    Lecture07-DOM 与事件

    1、本节讲什么

    从这一节开始进入浏览器环境（Node 跑不了的代码）。用最朴素的一个纯 HTML 文件来体验 DOM：找到元素 → 修改它 → 响应点击。这里还不需要 Vue，先搞懂 DOM 本身。

    2、概念速览

    什么是 DOM：浏览器把 HTML 页面读进来，解析 HTML 标签的结构，把 HTML 标签建成一棵"对象树"（Document Object Model）。你想改页面，就是在这棵树上"找到元素 → 改它"。

    image-20260930083801048

    类比：HTML 是"图纸"，DOM 是浏览器搭好的"实体房子"，document 是这栋房子的入口。

    正确 vs 误区：DOM 不是 HTML 本身，而是浏览器给你的"可操作接口"——别把 document 和 HTML 文本混为一谈。

    • HTML 标签：属于 HTML 标记语言中的语法现象
    • DOM：属于 JavaScript 根据 HTML 标签封装得到的对象实例

    3、先看效果

    新建 dom-demo.html（纯 HTML，不依赖任何工程或框架），用浏览器直接打开，点按钮标题会变：

    <!DOCTYPE html>
<html>
<body>
  <h1 id="title">原始标题</h1>
  <p class="desc">这是一段描述</p>
  <button id="btn">点我改标题</button>

  <!-- 注意：script 放 body 末尾，确保上面的元素已存在 -->
  <script>
    // 找到元素（类似"按 id 找到对象"）
    const title = document.getElementById('title')
    const btn = document.getElementById('btn')

    // 给按钮绑定点击事件
    btn.addEventListener('click', () => {
      title.textContent = '标题被改了！'
      title.style.color = 'red'
    })
  </script>
</body>
</html>

    4、照着做

    1. 新建 dom-demo.html，粘贴上面内容（VS Code 或记事本建都行，纯文本）。
    2. 双击它，用浏览器直接打开，点"点我改标题"，看标题文字和颜色变化。
    3. 再试一步：往 <script> 里加一行，用 document.querySelector('.desc') 找到那段描述并改掉，体会"按 class 找元素"：
    document.querySelector('.desc').textContent = '描述也被改了'
    1. 为什么这段不用 Node？因为 document 是浏览器独有的对象，Node 环境没有，必须放浏览器里跑。

    5、常见疑问

    • Q：为什么 script 要放在 </body> 末尾？ A：JS 从上往下执行。如果 script 在按钮之前，执行到 getElementById('btn') 时按钮还不存在，会返回 null，再 .addEventListener 就报错。放末尾（或包在 DOMContentLoaded 里）保证元素先存在。
    • Q：为什么我 getElementById 老返回 null？ A：基本就是上面这个"时机"问题：script 跑在元素创建之前。检查是否放在末尾，或确认 id 没写错。
    • Q：title.style.color = 'red' 是什么？ A：元素的样式对象，直接改，等价于 CSS 写 color: red。
    • Q：除了点击还能监听什么？ A：click（点击）、change（输入变化）、keydown（按键）、mouseover（移入）等，写法都是 addEventListener('事件名', 回调)。
    • Q：这里为什么不用 Vue？ A：Vue 到第 9 节才学。先用纯 HTML 把"DOM 是什么、怎么操作"搞懂；后面学 Vue 你会发现它自动帮你操作 DOM，你只管改数据。

    6、规范要点

    • 想要批量获取 DOM 对象时，优先 document.querySelector('.类名')，比一堆 getElementById 通用。
    • 事件回调里只写"页面要发生什么"，复杂逻辑另写函数。复杂逻辑拆分成多个函数调用。
    • DOM 操作能少就少——现在手动改，用 Vue 框架后就不用自己动手了。

    7、本节验证

    • 能写一个纯 HTML 文件，用浏览器双击打开并操作 DOM ✅
    • 会用 document.getElementById / document.querySelector 找到页面元素 ✅
    • 会给按钮 addEventListener('click', ...) 绑定点击事件并改标题文字和颜色 ✅
    • 知道 script 要放在 </body> 末尾，否则 getElementById 会返回 null ✅
    • 明白 document 是浏览器独有对象，这段代码在 Node 里跑不了 ✅
    end