码上未来IT培训老师直接接听

400-029-09** 400-029-0997 转 36015
查看完整号码
扫码拨号
微信扫码拨号

AI大模型全栈开发|前端基础：JavaScript基础-DOM（上）

2025/6/13 0:24:46

前端基础JavaScript基础DOM（上）课程前言Cou...

前端基础JavaScript基础DOM（上）

课程前言Course Introduction同学们，本课程聚焦 DOM 基础，解析网页动态交互核心。将系统讲解 DOM 树结构、元素获取（ID / 标签名 / 选择器等）、事件机制（三要素 / 鼠标事件）及元素操作（内容 / 属性 / 样式），结合京东密码切换的实战案例，助你掌握通过 JavaScript 操控网页内容、结构与样式的核心技能，奠定前端动态开发基础。让我们开始今天的课程吧！一DOM

CodingFuture

1.1简介

定义：DOM（Document Object Model，文档对象模型）是 W3C 制定的操作 HTML/XML 文档的标准编程接口，它将文档解析为树形结构，通过操作节点对象实现对网页内容、结构和样式的动态修改。作用：允许 JavaScript 访问和操作网页的各个部分，实现动态交互效果。兼容性：所有现代浏览器均遵循 DOM 标准，提供统一的 API 接口。1.2DOM树

1.文档树结构：根节点：HTML 文档的根元素为 <html>。节点类型：元素节点（标签，如 <div>）：用 element 表示。属性节点（标签属性，如 href）：通过元素对象的属性访问。文本节点（标签内容，如文本字符串）：用 nodeValue 表示。注释节点（<!-- 注释 -->）：较少使用。关系：节点间存在父子、兄弟关系，形成树形结构，例如：<html>  <head>    <title>文档标题</title> <!-- 文本节点是“文档标题” -->  </head>  <body>    <a href="link">我的链接</a> <!-- 元素节点包含属性节点href和文本节点“我的链接” -->  </body></html>核心对象：document 代表整个文档，是 DOM 树的入口。二获取元素

CodingFuture

2.1根据 ID 获取元素

语法：document.getElementById("id值")特点：性：ID 在页面中必须，返回单个元素对象或 null。大小写敏感：参数需与 HTML 中的 ID 完全一致。案例：<div id="time">2019-9-9</div><script>  const timer = document.getElementById("time");  console.log(timer); // 输出<div>元素对象  console.log(typeof timer); // "object"</script>2.2根据标签名获取元素

语法：document.getElementsByTagName("标签名")特点：返回值：伪数组（HTMLCollection），包含所有匹配的元素对象。动态性：实时反映文档变化，新增元素会自动加入集合。案例：<ul>  <li>列表项1</li></ul><script>  const lis = document.getElementsByTagName("li");  console.log(lis[0].innerText); // 输出“列表项1”</script>2.3其它方式获取元素

1.根据类名获取：document.getElementsByClassName("类名")：返回伪数组，匹配所有拥有该类名的元素。2.根据选择器获取：document.querySelector("选择器")：返回第*个匹配的元素。document.querySelectorAll("选择器")：返回所有匹配的元素（静态 NodeList）。注意：选择器需带符号（如 #id、.class、li）。案例：<div class="box">盒子</div><script>  const firstBox = document.querySelector(".box"); // 获取第*个类名为box的元素  const allBoxes = document.querySelectorAll(".box"); // 获取所有类名为box的元素</script>2.4获取特殊元素

获取 <body>：document.body获取 <html>：document.documentElement案例：console.log(document.body); // 输出<body>元素对象document.documentElement.style.backgroundColor = "#f0f0f0"; // 修改<html>背景色三事件基础

CodingFuture

3.1概述

定义：事件是浏览器检测到的用户行为（如点击、鼠标移动）或系统行为（如页面加载完成）。作用：通过事件驱动 JavaScript 执行相应逻辑，实现交互效果。3.2事件三要素

1.事件源：触发事件的元素（如按钮、文本框）。2.事件类型：事件的类型（如 click、mouseover）。3.事件处理程序：事件触发时执行的函数。案例：<button id="btn">点击我</button><script>  const btn = document.getElementById("btn");  btn.onclick = function() { // 事件源：btn，事件类型：click，处理程序：匿名函数    alert("Hello DOM!");  };</script>3.3 执行事件步骤

1.获取事件源：通过 DOM 方法获取元素对象。2.绑定事件：为元素设置事件处理函数（如 onclick）。3.编写处理逻辑：在函数中实现具体功能。案例：<div class="box">点击我</div><script>  const box = document.querySelector(".box");  box.onclick = function() { // 绑定点击事件    this.style.color = "red"; // 修改当前元素颜色  };</script>3.4鼠标事件

事件名触发条件案例场景onclick鼠标左键点击按钮点击提交onmouseover鼠标移入元素菜单悬浮显示子菜单onmouseout鼠标移出元素菜单移开隐藏子菜单onmousemove鼠标在元素内移动拖拽效果onfocus元素获得焦点（如输入框）输入框提示文字消失onblur元素失去焦点输入框提示文字恢复案例：<input type="text" placeholder="请输入"><script>  const input = document.querySelector("input");  input.onfocus = function() {    this.placeholder = ""; // 获得焦点时清空提示文字  };  input.onblur = function() {    this.placeholder = "请输入"; // 失去焦点时恢复提示文字  };</script>四操作元素

CodingFuture

4.1内容

1.innerText：特点：获取 / 设置元素的文本内容，忽略 HTML 标签，去除空格和换行。场景：纯文本内容操作（如显示时间）。2.innerHTML：特点：获取 / 设置元素的 HTML 内容，包含标签，保留格式。场景：动态插入 HTML 结构（如渲染列表）。区别对比：<p><span>你好</span>，世界！</p><script>  console.log(p.innerText); // 输出“你好，世界！”（忽略<span>，合并空格）  console.log(p.innerHTML); // 输出“<span>你好</span>，世界！”（保留标签）  p.innerHTML = "<b>加粗文本</b>"; // 插入HTML标签</script>4.2属性操作

1.普通属性：直接通过元素对象访问（如 src、href、id）。<img src="img.jpg" alt="图片"><a href="https://baidu.com">百度</a><script>const img = document.querySelector("img");  img.src = "new-img.jpg"; // 修改图片路径const a = document.querySelector("a");  a.href = "https://google.com"; // 修改链接地址</script>2.表单属性：操作表单元素状态（如 type、value、checked）。<input type="checkbox" checked>记住我<script>  const checkbox = document.querySelector("input");  console.log(checkbox.checked); // true（是否勾选）  checkbox.checked = false; // 取消勾选</script>4.3样式属性操作

1.行内样式（element.style）：语法：元素.style.样式属性 = 值（注意驼峰命名，如 backgroundColor）。<div id="box">盒子</div><script>  const box = document.getElementById("box");  box.style.width = "200px";  box.style.backgroundColor = "blue";</script>2.类名样式（element.className）：语法：元素.className = "类名"（会覆盖原有类名）。<div class="default">默认样式</div><script>  const div = document.querySelector("div");  div.onclick = function() {    this.className = "active"; // 切换为active类样式  };</script>4.4案例

仿京东显示隐藏密码核心逻辑：点击眼睛图标时，切换输入框类型（password ? text）。用flag变量记录状态，避免重复代码。代码实现：<input type="password" id="pwd"><img src="close.png" id="eye"><script>  const eye = document.getElementById("eye");  const pwd = document.getElementById("pwd");  let flag = true; // true表示密码状态，false表示文本状态  eye.onclick = function() {    if (flag) {      pwd.type = "text"; // 显示密码      eye.src = "open.png"; // 切换图标      flag = false;    } else {      pwd.type = "password"; // 隐藏密码      eye.src = "close.png";      flag = true;    }  };</script>

五排他操作

CodingFuture

思想：同一组元素中，仅让当前元素生效，其余元素恢复初始状态（“先干掉所有人，再复活自己”）。实现步骤：遍历所有元素，清除样式。为当前元素设置目标样式。案例：按钮高亮效果：<button>按钮1</button><button>按钮2</button><button>按钮3</button><script>const btns = document.querySelectorAll("button");  btns.forEach(btn => {    btn.onclick = function() {// 1. 清除所有按钮的高亮      btns.forEach(btn => btn.style.backgroundColor = "");      // 2. 为当前按钮设置高亮      this.style.backgroundColor = "orange";    };  });</script>

结言陈词Closing statement通过本课程，你已理解 DOM 作为网页编程接口的本质，掌握从获取元素（如getElementById）到事件处理（如onclick）的全流程操作，能运用innerText/innerHTML处理内容、通过style/className修改样式，并通过排他逻辑实现单选效果。后续可结合案例练习（如时间显示、表单验证）强化技能，为复杂前端交互开发筑牢根基。下期课程预告：JavaScript基础-DOM（下）码上未来为同学们安排统一答疑扫码添加微信领取详细课程大纲

微信号:CodingFuture2020

The CodingFuture&The Future is Already Here<<<  END >>>

添加微信咨询
夏老师 @大连码上未来IT培训

资深职业咨询规划师

微信号：155******12

立即咨询

“大连码上未来IT培训”是码上未来科技(大连)有限公司在教育宝平台开设的店铺，若该店铺内信息涉嫌虚假或违法，请点击这里向教育宝反馈，我们将及时进行处理。

机构评分

环境：5.0师资：5.0服务：5.0效果：5.0

公示信息

店铺名称：大连码上未来IT培训

单位名称：码上未来科技(大连)有限公司

账号名称：mswl（158******92）

所属城市：辽宁大连

入驻时长：6年

在线客服：在线聊

相关课程

微信咨询

返回顶部