AI大模型全栈开发|前端基础：JavaScript基础-DOM（上）
前端基础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 >>>
