《网页设计与 Web 前端开发》课件 莫小梅 第6-10章 使用JavaScript脚本- 网站设计综合实训、课业拓展

网页设计与Web前端开发案例教程第6章使用JavaScript脚本CONTENT目录初识JavaScript01JavaScript基本元素02操作属性与样式03条件语句04循环语句05JavaScript函数06对象操作语句07JavaScript常用内置对象08DOM对象09BOM对象10localStorage对象及操作1101初识JavaScriptJS简介：发展历程、组成、安全性发展历程LiveScript→JavaScript→ECMAScript标准组成要素ECMAScript（核心语法）+DOM（文档对象）+BOM（浏览器对象）安全性特点禁止访问本地硬盘不允许对网络中的文本修改或删除使用方式：标签嵌入、外部引用、事件属性标签嵌入在HTML文档中，可直接通过标签嵌入JavaScript代码，将脚本放置于标签内，能实现页面交互逻辑，随页面加载而执行，方便快捷地添加简单功能。如：<script>for(i=0;i<3;i++)document.write("Hello!");</script>外部引用把JavaScript代码写在独立文件中，通过在HTML中引用。这种方式可实现代码复用，多个页面共享同一脚本，便于维护和管理，提升开发效率。如：<scriptsrc="js/script.js"></script>事件属性HTML元素可通过事件属性直接绑定JavaScript代码。

如：<ahref="javascript:alert(newDate());">单击显示当前时间</a>或<inputtype="button"value="单击显示当前时间"onclick="alert(newDate());"/>JavaScript代码规范严格区分大小写字符串区分大小写变量名、函数名、关键字大小写敏感英文输入法所有内置API和符号都是英文输入法，也就是半角符号。书写格式忽略语句间空白，即语句间的空格、空行、缩进等。使用这些格式的目的：使程序更加清晰，可读性更高例如，可以使用Tab键缩进，不同的语句应当换行。分号的使用基础规范：完整语句结尾需加分号（推荐显式添加）换行符可能隐式插入分号循环结构或者选择结构的条件语句后面不需要用分号注释语句单行的注释以//开始，其格式为：//注释内容多行注释以/*开头，以*/结尾，其格式为：/*注释内容注释内容*/弹窗与调试方法​​​​用途​​及示例返回值示例效果alert()信息通知alert("你好，我是一个警告框！");undefinedconsole.log()调试输出a=5;b=6;c=a+b;console.log(c);-confirm()二元选择confirm("按下按钮");true/falseprompt()获取用户输入prompt("请输入你的名字","HarryPotter");string/null02JavaScript基本元素数据类型类型示例特点number（数值）3.14

/

NaN包含特殊值string（字符串）"Hello"单/双引号包裹boolean（布尔）true

/

false条件判断基础null（空）leta=null;空对象指针undefined（未定义）letb;未初始化变量object（对象）{name:"Tom"}键值对集合symbol（符号）-ES6引入,避免属性名冲突JavaScript常量——基本概念定义不可修改的固定值（字面量）与变量核心区别：初始化后不可变感ES5vsES6​​ES5​​​​ES6​​无命名常量const关键字声明命名常量直接使用字面量（如0,

"hi"）语法：constPI=3.14;JavaScript常量——六大核心规则不可重赋值PI=3.15;→静默失败块级作用域​​只在{}内有效（同let）​​禁止重复声明constX=1;constX=2;→报错声明即赋值​​constX;→语法错误无变量提升先声明后使用作用域隔离​​内外同名常量互不影响JavaScript常量类型常量类型​​​​子类/形式​​​​描述​​​​表示方式示例​​​​特殊说明​​​​数值型常量​​​​整型​​整数，支持十进制/八进制/十六进制42（十进制）0o52（八进制52，十进制42）0x2A（十六进制2A，十进制42）ES5中以0开头的八进制写法已过时（如020）​​实型/浮点型​​小数，支持标准写法或科学计数法3.14（标准）6.02e23（科学计数法，6.02×10²³）​​布尔型常量​​-逻辑值，表示真/假true（真）false（假）​​严禁​​用1/0替代（与C语言不同）​​字符串型常量​​​​常规字符串​​引号包裹的文本"Hello'World'单/双引号等效​​特殊字符常量​​反斜杠转义的控制字符（需在字符串中使用）详见下页转义字符表​​空值常量​​-表示空或无定义null（主动赋空值）undefined（未定义默认值）区别：null是类型为object的值JavaScript特殊字符常量转义字符​​​​名称​​​​功能说明​​​​使用示例​​​​输出结果​​\b退格(Backspace)删除前一个字符"a\bc""c"（终端环境）\f换页(FormFeed)打印机分页符"Page1\fPage2"打印时分页\n换行(NewLine)光标移到下一行行首"Line1\nLine2"两行文本\r回车(CarriageReturn)光标回行首"Hello\rWorld""World"（覆盖效果）\t水平制表符(Tab)插入Tab空白"Name:\tTom""Name:Tom"（4空格）\'单引号在单引号字符串中显示单引号'It\'sOK'"It'sOK"\"双引号在双引号字符串中显示双引号"Hesaid:\"Hi\""'Hesaid:"Hi"'\\反斜杠显示字面反斜杠"C:\\Windows""C:\Windows"运算符与表达式概述表达式定义变量、常量与运算符的组合（算术/字符串/布尔表达式）运算符作用​​关联值进行计算或比较操作数分类​​类型​​​​操作数数量​​​​示例​​双目运算符2个a+b,

"Hi"+"!"单目运算符1个-5,

i++算术运算符运算符​​​​描述​​​​示例​​​​结果​​(y=5)+加x=y+27-减x=y-23*乘x=y*210/除x=y/22.5%取模x=y%21++前置递增x=++y6--前置递减x=--y4赋值运算符运算符​​​​示例​​​​等价形式​​​​结果​​(x=10,y=5)=x=y-x=5+=x+=yx=x+y15-=x-=yx=x-y5*=x*=yx=x*y50/=x/=yx=x/y2%=x%=yx=x%y0比较运算符运算符​​​​描述​​​​示例​​(x=5)​​结果​​==值相等x=="5"true===值与类型相等x==="5"false!=不相等x!=8true!==值或类型不等x!=="5"true>

大于x>3true<

小于x<8true>=大于等于x>=5true<=小于等于x<=5true逻辑运算符​​运算符​​​​描述​​​​示例​​(x=6,y=3)​​结果​​&&逻辑与(x<10&&y>1)true||逻辑或(x==5||y==5)false!逻辑非!(x==y)true条件运算符三元操作条件?值1:值2执行逻辑​​条件为真→返回值1条件为假→返回值2​​应用示例greeting=(visitor=="PRES")?"DearPresident":"Dear";如果变量visitor中的值是"PRES"，则向变量greeting赋值"DearPresident"，否则赋值"Dear"位运算符运算符​​​​描述​​​​示例​​​​结果​​&按位与1&31|按位或1|33^按位异或1^32~按位取反~0-1<<

左移8<<232>>

有符号右移-8>>2-2>>>

无符号右移8>>>22字符串运算符运算符​​​​功能​​​​示例​​​​结果​​+字符串连接"Hello"+"World""HelloWorld"+=连接并赋值lets="Hi";s+="!"s="Hi!"​​隐式转换​​与其他类型连接"Age:"+25"Age:25"数据类型转换两种转换类型✅​​显式转换​​：主动调用函数（Number()/String()等）⚡​​隐式转换​​：通过运算符自动触发（+/-/*等）核心差异对比​​类型控制方式典型场景显式转换程序员主动表单数据转数值隐式转换JS引擎触发字符串拼接、运算Number()强制转换规则输入类型转换结果示例数值原来的值Number(123)→123字符串如果可以解析为数值，则转换成相应的数值；如果不可以被解析为数值，返回NaNNumber("123")→123Number("12abc")→NaN空字符串转换为0Number("")→0布尔值true返回1；false返回0Number(true)→1Number(false)→0undefined返回NaNNumber(undefined)→NaNnull返回0Number(null)→0对象返回NaN，除非包含单个数据的数值数组只有一个数组项为数值的时候返回的是本身值，其它的就是NaNparseInt()&parseFloat()parseInt()核心行为从首位数字解析→遇非数字停止（parseInt("12.3")→12）基数参数：parseInt("1f",16)→31(16进制解析)parseFloat()区别​​解析首个小数点→parseFloat("9.6.1")→9.6​​对比表函数处理小数进制支持示例结果parseInt()❌截断✅(基数)parseInt("0xA")→10parseFloat()✅保留首个❌parseFloat("0xA")→0String()&Boolean()String(值)一切类型转字符串（true→"true"）Boolean()转换逻辑​​false的值：0、""、null、undefined、NaN

true：其他值（包括"0"、[]、{}）​​示例console.log(Boolean(1),String(1))→true"1"隐式转换（场景化解析）运算符的陷阱字符串与非字符串→拼接转换（1+"1"→"11"）非字符串+空字符串→强制转字符串（true+""→"true"）其他算术运算符​​自动转数值（如布尔值在做算数运算的时候，true=1；false=0）​​取反运算符转布尔值（!"5"→false）运算符行为示例-,*,/,%字符串转数值"15"*1→15(number)++

,--​​强制转数字​​lety="20"++→20​​练习分析"10"-5+"2"的结果（"52"）03操作属性与样式属性操作：属性分类体系四象限属性模型┌───────────────────┬──────────────────────┐│HTML标签属性│JS对象属性│├───────────────────┼─────────────────────┤│常规标签属性│JS对象自身属性││(id,class,title)│(console.dir可查看)│├───────────────────┼──────────────────────┤│自定义标签属性│JS对象自定义属性││(setAttribute)│(点运算符动态添加)│└───────────────────┴──────────────────────┘​​关键特征对比存储位置：HTML标签属性→DOM结构；JS对象属性→内存可见性：标签属性在Elements面板可见；JS属性在Console可见HTML标签属性操作——常规标签属性​操作方式​​点运算符（.）特殊规则​​​​示例演示结果：<divclass="textactive"title="新标题">

HTML标签属性操作——自定义标签属性​核心API​​setAttribute(name,value)//设置属性getAttribute(name)//获取属性特点​​​​示例结果：<div...data-index="1">值自动转为字符串类型会直接修改DOM结构JS对象属性操作——JS对象自身属性​查看方式​​console.dir()特征标识​​​​操作方式🔧方法→带括号click()🔢属性→无括号id:"wrap"JS对象属性操作——JS对象自定义属性​创建方式​​点运算符（.）关键特征​​​​示例仅存在于JS内存中不修改DOM结构支持复杂数据类型样式操作概览三种操作路径​​操作范围外部样式表→JS无法直接操作内部/内联样式→JS可直接修改┌──────────────┬──────────────┬──────────────┐│内部样式│内联样式│类名操作││(style标签)│(style属性)│(className)│├──────────────┼──────────────┼──────────────┤│操作innerHTML│点语法/cssText│设置/追加类名││❗不推荐│✅精细控制│⭐️首选方案│└──────────────┴──────────────┴──────────────┘操作内部样式​实现方式​​关键注意事项​​​​示例⚠️​​前提​​：页面必须已存在<style>标签⚠️​​风险​​：覆盖已有样式（建议用+=追加）⚠️​​缺点​​：难以维护性能低下不推荐实际使用操作内联样式——操作单一样式属性​基础语法​​特殊规则​​​​示例🐫​​驼峰命名​​：background-color→backgroundColor⚠️​​保留字处理​​：float→cssFloat元素.style.属性="值"结果：<divstyle="width:200px;height:200px;background-color:blue;">操作内联样式——操作多个样式属性​高效语法​​优势​​​​注意单次操作设置多个样式避免重复DOM操作元素.style.cssText="属性:属性值;属性:属性值;..."会覆盖现有内联样式​​示例通过类名操作样式（最佳实践）​语法​​优势​​​​示例复用预定义样式样式与逻辑解耦支持复杂样式规则标签元素.calssName="类名";元素.calssName+="类名";04条件语句条件语句概述条件判断本质​​​核心语句类型if语句：单分支/双分支/多分支switch语句：多路分支选择┌───────────────┬──────────────────────────────┐│条件成立│条件不成立│├───────────────┼──────────────────────────────┤│true值│false值││•非0数值│•0││•非空字符串│•“”(空字符串)││•true/真表达式│•false/假表达式││•对象/函数│•undefined/null/NaN│└───────────────┴──────────────────────────────┘单分支选择​语法​​​​时间案例if(条件){//条件成立执行}双分支选择​语法​​​​时间案例if(条件){//成立执行}else{//不成立执行}多分支选择​语法​​​​时间案例if(条件1){//...}elseif(条件2){//...}else{//...}switch语句​语法​​​​关键要素switch(表达式){case值1://代码块1break;case值2://代码块2break;default://默认代码块}break：防止穿透执行（必须！）default：默认处理（可选）​​星期案例05循环语句循环类型语句概述循环的核心作用重复执行代码块避免重复编写相似代码循环三要素​​​​初始化​​：设置循环起点​​条件​​：决定是否继续循环​​迭代​​：更新循环变量​​循环类型​​for：明确循环次数while：条件满足时循环dowhile：至少执行一次for循环语句基础语法for(变量=开始值;变量<=结束值;变量=变量+步长值){

需执行的代码}标题生成案例​​for(leti=1;i<=6;i++){document.write("<h"+i+">本行是"+i+"级标题</h"+i+">");}​​输出效果​​​关键说明步长值可正可负（负步长需调整条件）适用场景：循环次数已知while循环语句基础语法while(条件){

需执行的代码}标题生成改写​​i=1;while(i<=6){document.write("<h"+i+">本行是"+i+"级标题</h"+i+">");i++;}​​注意事项⚠️​​手动更新条件​​：避免无限循环⚠️​​适用场景​​：循环次数未知（依赖复杂条件）dowhile循环语句基础语法do{

需执行的代码}while(条件)标题生成改写​​i=0;do{i++;document.write("<h"+i+">本行是"+i+"级标题</h"+i+">");}while(i<6)​​核心特点​​先执行，后判断​​→保证至少运行一次适用场景：需优先执行循环体再检查条件）流程控制：break作用立即终止整个循环案例​​for(leti=1;i<=6;i++){if(i===4)break;//i=4时终止document.write("<h"+i+">本行是"+i+"级标题</h"+i+">");}​​输出效果​流程控制：continue作用跳过本次循环剩余代码，进入下一次迭代案例​​for(leti=1;i<=6;i++){if(i%2===0)continue;//跳过偶数document.write("<h"+i+">本行是"+i+"级标题</h"+i+">");}​​输出效果​06JavaScript函数函数定义：函数声明/函数表达式双类型函数模型核心区别​​提升机制（声明提升vs表达式不提升）定义位置（全局作用域vs赋值位置）┌──────────────────────┬──────────────────────┐│函数声明│函数表达式││(函数定义)│(匿名/变量赋值/IIFE)│├──────────────────────┼──────────────────────┤│functionfn(){...}│letfn=function..││提升机制│无提升││命名函数│匿名/命名│└──────────────────────┴──────────────────────┘函数声明定义与语法function函数名(){//函数体}位置​​​​示例通常位于<head>部分命名规范​​描述性单词/短语（如calculateSum）函数调用直接调用函数名()事件绑定​​对象.事件=函数名特性​​函数提升（可在声明前调用）函数表达式定义形式//事件绑定形式document.onclick=function(){//函数体};关键特征​​​匿名函数（可命名但通常匿名）无提升（必须定义后调用）调用方式​​//变量赋值形式constmyFunction=function(){//函数体};//变量形式调用constsayHi=function(){console.log("Hi!");};sayHi();//必须在定义后调用//自执行形式(function(){console.log("立即执行!");})();IIFE（立即执行函数）两种写法应用场景​​创建独立作用域（避免变量污染）初始化代码封装函数参数参数的双向角色核心概念​​形参：函数定义时的接口实参：函数调用时的实际值不定参：动态参数处理机制┌───────────────┬─────────────────┐│定义阶段│调用阶段│├───────────────┼─────────────────┤│形参（形式参数）│实参（实际参数）││•占位符│•具体输入值││•变量声明│•常量/变量/表达式│└───────────────┴─────────────────┘形参定义与语法//多个形参间用逗号隔开，以此类推function函数名(形参名1,形参名2){函数体}关键特性​​​​作用域隔离作用域限制在函数内部命名与外部变量互不冲突实参调用方式参数匹配​​场景​​结果实参>形参多出参数可通过arguments获取实参<形参缺少参数为undefined类型不匹配JS自动转换不定参（arguments对象）​动态参数处理arguments特性类数组对象（非真正数组）包含所有传入参数无视形参个数限制返回语句​实战示例核心作用📤返回值传递└─将函数结果输出到外部⏹️终止执行└─立即停止函数运行（后续代码不执行）基础语法function函数名(){//...return值;//显式返回值

return;//终止函数（返回undefined）}

返回值类型任意JS数据类型（值/对象/函数等）

未显式返回→undefined作用域基础概念12定义作用域：变量的可访问性范围（代码中特定部分）ES5vsES6var→全局/局部作用域let/const→块作用域全局作用域vs局部作用域​​​全局作用域范围：所有<script>标签内变量：函数外用var声明（全局变量）特性：随处可访问/修改局部作用域（函数作用域）范围：函数体内部变量：函数内用var声明（局部变量）特性：仅当前函数及嵌套作用域可访问关键规则作用域链：当前作用域→上层作用域→全局（未找到则报错）避免意外全局变量：未用var声明的变量变为全局变量（不推荐！）变量提升（Hoisting）​​​​​机制var声明的变量提升至​​当前作用域顶部​​（赋值不提升）初始值：undefined示例对比​例6-33​​：未声明直接赋值→意外改变全局变量​​例6-34​​：变量声明在尾部→提升至顶部（不影响赋值）​​例6-35​​：声明未赋值→值为undefined（全局变量不受影响）​​控制台输出对比例6-34输出效果例6-35输出效果ES6块作用域​​​​定义范围：{}包含的区域（如if/for/switch）​​let/const特性示例6-36图6-26(a)正常输出(b)报错场景关键字作用域初始化要求是否可修改var无块作用域否是let块作用域否是const块作用域​​必须​​​​否​​跨块访问测试：var可访问，let/const报错常量修改测试：const赋值后不可修改（报错）07对象操作语句对象操作概述​​JavaScript对象本质大多数事物都是对象（字符串/数组/API/自定义对象）作用：数据封装与模块化开发操作目标简化对象访问实现对象遍历与属性管理with语句：简化对象引用​​​​​问题背景重复书写对象名（如Math.PI/Math.cos）导致代码冗余语法结构with(对象名){//直接使用属性/方法}示例对比​​适用场景集中操作同一对象的多个属性/方法for...in循环：遍历对象属性​​​​​​​​核心功能遍历对象所有可枚举属性无需提前知道属性数量语法结构for(let变量in对象){//操作属性}示例演示​​输出结果letstudent={name:"Tom",gender:"male",age:18};for(letkeyinstudent){document.write("student."+key+"="+student[key]+"<br/>");}this关键字​​​​​​​​核心概念指向​​当前执行上下文​​的对象引用绑定规则关键示例场景this指向示例全局环境window对象例6-38对象方法调用该方法的对象例6-39：o.f()→o事件处理程序触发事件的元素-in关键字​​​​​​​​功能检查对象是否包含指定属性语法示例"属性名"in对象名in关键字​​​​​​​​功能检查对象是否包含指定属性语法示例"属性名"in对象名delete操作符​​​​​​​​​功能删除对象属性语法示例delete对象名.属性名;08JavaScript常用内置对象JavaScript内置对象概述​​​​​​​​​定义嵌入系统的共享代码，由开发商优化的常用操作代码集合（无需重复编写）。常用类型​​分类与访问方式数组对象、字符串对象、数学对象、日期对象（最核心的4类）​​动态对象​​：需用new创建实例，通过实例名.成员访问（如数组、字符串）​​静态对象​​：无需new，直接通过对象名.成员访问（如数学对象Math）数组对象​​​​​​​​​​格式var数组对象名=newArray(数组列表);var数组对象名=Array(数组列表);var数组对象名=[数组列表];核心属性​​​常用方法length：获取数组长度（最大索引+1）方法功能示例sort()排序（默认字典序）[3,1,2].sort()//[1,2,3]reverse()反转数组[1,2,3].reverse()//[3,2,1]concat()合并数组[1,2].concat([3,4])//[1,2,3,4]slice(start,end)截取子数组[1,2,3].slice(0,2)//[1,2]splice(index,count,item)增删改查[1,2].splice(1,0,'a')//[1,'a',2]案例演示用户交互排序（图6-30至图6-32）输入1升序→图6-30效果输入-1降序→图6-31效果无效输入→图6-32提示字符串对象​​​​​​​​​​格式字符串变量名=newString("字符串");字符串变量名=String("字符串");字符串变量名="字符串"核心属性​​​基础方法length：统计字符数（含中文）外观与高级操作​样式方法：.bold()、.italic()、.fontsize(size)表单验证案例（例6-43）：用户名校验规则：6-18位字母开头+数字/字母密码校验规则：≥6位且含字母+数字组合方法功能示例indexOf(char)查找字符首次出现位置"abc".indexOf("b")//1substring(start,end)截取子串"hello".substring(1,3)//"el"split(separator)分割字符串"a,b,c".split(",")//["a","b","c"]数学对象​​​​​​​​​​常用属性Math.PI：圆周率（≈3.14159）Math.E：自然常数（≈2.71828）核心方法​​​案例应用随机背景音乐播放（图6-34至图6-35）通过Math.random()实现随机音乐选择声音图标状态切换（静音↔播放）方法功能示例Math.random()生成[0,1)随机数Math.random()*10//0~10随机数Math.max(a,b,c)返回最大值Math.max(2,5,1)//5Math.ceil(3.2)向上取整//4Math.floor(3.8)向下取整//3日期对象​​​​​​​​​​格式newDate("monthdd,yyyyhh:mm:ss");newDate("monthdd,yyyy");newDate(yyyy,mth,dd,hh,mm,ss);newDate(yyyy,mth,dd);newDate(ms);日期对象创建举例实战案例动态日历显示（图6-36）结合getDay()、getDate()显示星期与日期问候语根据时间动态切换（上午/下午/晚上）方法功能示例getFullYear()获取四位年份newDate().getFullYear()setMonth(month)设置月份（0-11）date.setMonth(0)//设置为1月日期对象方法举例日期对象中的格式转换​​​​​​使用语法描述Date.parse(string)静态方法，将合法的描述日期的字符串转换为日期对象并返回Date.UTC(yyyy,mth,dd,hh,mm,ss,ms)静态方法，将日期统一转换为自GMT时间1970年1月1日起经过的毫秒数日期实例名.toLocaleString()将Date对象转换为字符串，以用户计算机上设置的时间格式显示日期和时间日期实例名.toString()将Date对象转换为字符串，以用户本地时区显示日期和时间（是Date对象转换为字符串的默认规则）日期实例名.toGMTString()将Date对象转换为字符串，以GMT格式显示日期和时间09DOM对象HTMLDOM简介​​​​​​​​​​文档对象模型（DOM）将HTML/XML文档解析为节点树，允许脚本语言（如JavaScript）动态操作文档结构、样式和内容。​​关键作用​​：建立页面内容与程序的桥梁。树形结构​​​文档节点（根节点）→元素节点（如<div>）→文本节点（如文字内容）。​​图示​​：DOM树状结构（图6-38）节点类型与属性​​​​​​​主要节点类型示例​​​节点类型nodeTypenodeNamenodeValue元素节点1标签名null文本节点3#text实际文本内容属性节点2属性名属性值DOM节点相邻关系与访问​​​​​​相邻节点的三大分类示例说明​​​节点类型定义关键访问属性​​子节点​​当前节点的直接下级节点childNodes（所有子节点）、children（仅元素子节点）​​父节点​​当前节点的直接上级节点parentNode（通用父节点）​​兄弟节点​​与当前节点同属一个父节点的同级节点nextSibling（下一个兄弟）、previousSibling（上一个兄弟）场景​​：以左边代码为例：parent.childNodes→包含文本节点（换行符）和<p>、<span>；parent.children→仅<p>和<span>；<p>的parentNode→#parent；<span>的previousSibling→<p>（文本节点可能干扰，需过滤）。子节点集合访问​​​​​​核心属性示例​​​<divid="box">

第一行文字

<p>第一段文字</p>

第二行文字

<p>第二段文字</p>

第三行文字</div><script>varoBox=document.getElementById("box");console.log(oBox.childNodes);console.log(oBox.children);console.log(oBox.childNodes[0]);console.log(oBox.children[0]);</script>childNodes：获取所有子节点（含文本节点）。children：仅获取元素节点（忽略文本节点）。输出效果第一个子节点访问​​​​​​核心属性示例​​​<divid="box">

第一行文字

<p>第一段文字</p>

第二行文字

<p>第二段文字</p></div><script>varoBox=document.getElementById("box");console.log(oBox.firstChild);console.log(oBox.firstElementChild);</script>firstChild：第一个子节点（可为文本节点）。firstElementChild：第一个元素节点。输出效果最后一个子节点访问​​​​​​核心属性示例​​​<divid="box">

第一行文字

<p>第一段文字</p>

第二行文字

<p>第二段文字</p></div><script>varoBox=document.getElementById("box");console.log(oBox.lastChild);console.log(oBox.lastElementChild);</script>lastChild：最后一个子节点（可为文本节点）。lastElementChild：最后一个元素节点。输出效果父节点与定位父级​​​​​​​​核心属性示例​​​<divid="wrap"style="position:relative"><divid="box"><pid="content">

文章内容

</p></div></div><script>varoP=document.getElementById("content");console.log(oP.parentNode);console.log(oP.offsetParent);</script>parentNode：直接父节点（与定位无关）。offsetParent：最近有定位属性的父节点（默认为body）。输出效果下一个兄弟节点访问​​​​​​​核心属性示例​​​<div>

第一行文字

<pid="p1">第一段文字</p>

第二行文字

<p>第二段文字</p></div><script>varoP1=document.getElementById("p1");console.log(oP1.nextSibling);console.log(oP1.nextElementSibling);</script>nextSibling：下一个兄弟节点（可为文本节点）。nextElementSibling：下一个元素节点。输出效果上一个兄弟节点访问​​​​​​​核心属性示例​​​<div>

第一行文字

<pid="p1">第一段文字</p>

第二行文字

<pid="p2">第二段文字</p></div><script>varoP2=document.getElementById("p2");console.log(oP2.previousSibling);console.log(oP2.previousElementSibling);</script>previousSibling：上一个兄弟节点（可为文本节点）。previousElementSibling：上一个元素节点。输出效果DOM节点的操作​​​​​​节点操作四大类型​查​​：定位目标节点（详见6.1.5节内容）；​​增​​：新增节点到文档中；​​删​​：从文档中移除节点；​​改​​：修改现有节点内容或属性增加节点的前置条件​​​​​获取现有节点​​（作为父容器或参考位置）：示例：varparent=document.getElementById("list");（获取列表容器）。​​创建新节点​​（需先创建再插入）：元素节点：document.createElement("li")；文本节点：document.createTextNode("新项")；克隆节点：existingNode.cloneNode(true)（可选）。关键逻辑总结​​​操作流程​​：查（定位）→增（创建/获取→插入）→改（内容/属性）→删（移除）​​核心依赖​​：增删改操作均需先明确节点位置（通过“查”或“获取”）创建元素和文本节点​​​​​​​​​​​创建元素节点方法document.createElement(nodename)功能​​​根据标签名生成新元素节点示例​​​​​​​创建文本节点方法document.createTextNode(text)功能​​​生成包含指定文本的文本节点示例​​​复制节点​​​​​​方法​node.cloneNode(deep)参数​deep=true：深度克隆（含子节点）；deep=false（默认）：浅克隆（仅当前节点）。示例​​​<ulclass="List"><li>Coffee</li><listyle="color:red">Tea</li></ul><script>varoList=document.querySelector("ul.List"),clnLi1=oList.cloneNode(true),clnLi2=oList.cloneNode();console.log(clnLi1);console.log(clnLi2);</script>输出效果元素节点的操作​​​​​​元素节点三大基础操作​​​插入节点​​appendChild(newNode)：在父节点末尾追加新节点。insertBefore(newNode,existingNode)：在指定子节点前插入新节点。​​删除节点​​removeChild(targetNode)：移除父节点中的指定子节点。​​替换节点​​replaceChild(newNode,oldNode)：用新节点替换旧节点。操作原则​​​必须通过父节点调用方法​插入节点——末尾追加（appendChild()）​​​​​​​格式​parent.appendChild(newnode)功能​将新节点添加到父节点的子节点列表末尾。示例​​​<ulid="list"><li>HTML5</li><li>CSS3</li></ul><button>插入列表项"JavaScript"</button><script>letoList=document.getElementById("list"),oBtn=document.getElementsByTagName("button")[0];oBtn.onclick=function(){letnewItem=document.createElement("LI"),textnode=document.createTextNode("JavaScript");

newItem.appendChild(textnode);oList.appendChild(newItem);this.disabled=true;//使用一次后禁用该按钮

}</script>输出效果插入节点前插入节点后插入节点——指定位置前插入（insertBefore()）​​​​​​​​格式​parent.insertBefore(newNode,existingNode);功能​将新节点插入到指定子节点之前。示例​​​<ulid="list"><li>CSS3</li><li>JavaScript</li></ul><button>插入列表项"HTML5"</button><script>letoList=document.getElementById("list"),oBtn=document.getElementsByTagName("button")[0];oBtn.onclick=function(){letnewItem=document.createElement("LI"),textnode=document.createTextNode("HTML5");newItem.appendChild(textnode);

oList.insertBefore(newItem,oList.children[0]);this.disabled=true;//使用一次后禁用该按钮

}</script>输出效果插入节点前插入节点后删除节点——removeChild()方法​​​​​​​​格式​parent.removeChild(targetNode);功能​移除父节点中指定的子节点。示例​​​<ulid="list"><li>HTML5</li><li>CSS3</li><li>ES5</li><li>JavaScript</li></ul><button>删除列表项"ES5"</button><script>letoList=document.getElementById("list"),oBtn=document.getElementsByTagName("button")[0];oBtn.onclick=function(){

oList.removeChild(oList.children[2]);this.disabled=true;//使用一次后禁用该按钮

}</script>输出效果删除节点前删除节点后替换节点——replaceChild()方法​​​​​​​​​格式​parent.replaceChild(newNode,oldNode);功能​用新节点替换父节点中的旧节点。示例​​​<ulid="list"><li>HTML5</li><li>CSS3</li><li>JavaScript</li></ul><button>替换第一个列表项</button><script>letoItem=document.getElementById("list").children[0],oBtn=document.getElementsByTagName("button")[0];oBtn.onclick=function(){lettextnode=document.createTextNode("H5");

oItem.replaceChild(textnode,oItem.firstChild);this.disabled=true;//使用一次后禁用该按钮

}</script>输出效果替换节点前替换节点后属性节点操作——获取属性节点​​​​​​​​​​方法​element.getAttributeNode(attributename)示例​​​<divid="box"title="top"></div><script>vart=document.getElementById("box");varidAttr=t.getAttributeNode("title");console.log(idAttr);console.log(idAttr.nodeType);console.log(idAttr.nodeName);console.log(idAttr.nodeValue);</script>输出效果属性节点操作——创建与添加属性​​​​​​​​​​创建属性​varnewAttr=document.createAttribute("class");示例​​​<script>letoDiv=document.getElementById("box"),oBtn=document.getElementsByTagName("button")[0],att=document.createAttribute("class");att.value="democlass";oBtn.onclick=function(){

letdivSetAttr=oDiv.setAttributeNode(att);//添加属性节点

console.log(divSetAttr);//输出添加属性节点方法的返回值

}</script>输出效果绑定属性​element.setAttributeNode(newAttr);//将属性添加到元素添加属性节点前添加属性节点后第一次单击第二次单击10BOM对象BOM简介​​​​​​​​​​核心功能​实现JavaScript与浏览器的交互（非文档内容）。提供独立于内容的浏览器控制接口。层次结构图对象层次​window是顶层对象，包含其他子对象（如document、location、history）。窗口对象（window）​​​​​​​​​​​核心方法​​动态交互案例​场景​​：登录按钮跳转并自动返回首页。方法描述示例alert()显示警告框window.alert("登录成功！")prompt()用户输入对话框letinput=prompt("请输入姓名:","默认值")open()打开新窗口window.open("page.html","_blank")setTimeout()延迟执行setTimeout(()=>alert("5秒后"),5000)​步骤​​：点击按钮打开欢迎页面（login.html）；5秒后自动跳转回首页（index.html）。窗口对象（window）——核心方法​​​​​​​​​​​核心方法​​动态交互案例​场景​​：登录按钮跳转并自动返回首页。方法描述示例alert()显示警告框window.alert("登录成功！")prompt()用户输入对话框letinput=prompt("请输入姓名:","默认值")open()打开新窗口window.open("page.html","_blank")setTimeout()延迟执行setTimeout(()=>alert("5秒后"),5000)​步骤​​：点击按钮打开欢迎页面（login.html）；5秒后自动跳转回首页（index.html）。窗口对象（window）——核心属性​​​​​​​​​​​核心属性​​动态交互案例​场景​​：自动弹窗与关闭属性描述示例status​​设置状态栏文本window.status="加载中...";//部分浏览器限制screenLeft/screenTop​​窗口相对于屏幕的位置console.log(‘窗口坐标：’+screenLeft+screenTop);closed​​判断窗口是否关闭if(childWindow.closed){console.log("子窗口已关闭");}opener​​获取打开当前窗口的父窗口letparentWindow=window.opener;)​步骤​​：打开登录页时自动弹出提示窗口；关闭登录页时自动关闭提示窗口。文档对象（document）​​​​​​​​​​​核心属性​​​文档元信息​​：document.title​​：获取/设置页面标题（<title>标签内容）。​​document.URL​​：返回当前页面完整URL。​​document.lastModified​​：显示文档最后修改时间。样式控制​​：​​document.bgColor​​：设置页面背景色（如document.bgColor="blue"）。​​document.linkColor​​：定义链接颜色（如document.linkColor="red"）。​​document.fgColor​​：设置文本前景色（默认黑色）。核心方法​​​内容操作​：​​document.write()​​：向文档输出内容（可追加多个参数）。document.writeln()​​：与write()类似，但每个参数后添加换行符。文档流控制​​​：​​​​document.open()​​：清空当前文档内容，准备写入新内容。​​document.close()​​：结束写入并渲染文档。文档对象案例实践​​​​​​​​​​​动态样式修改​​​​​场景​​：通过按钮点击修改页面背景色、链接颜色。核心代码及效果：文档替换​​初始效果单击链接后的效果​场景​​：点击按钮后用新内容替换原页面核心代码及效果：初始效果单击按钮后的效果位置对象（Location）​​​​​​​​​​​核心属性​​​URL组成部分：protocol​​：返回协议（如http:或https:）。​​host​​：返回主机名和端口（如:8080）。​​pathname​​：返回路径部分（如/path/to/page.html）。​​search​​：返回查询参数（如?id=123）。​​hash​​​**​：返回锚点（如#section）。可读写属性​​：href​​：完整URL，可读写（修改会触发跳转）。​​hash​​：可修改锚点，不刷新页面。核心方法​​​页面跳转​：​​assign(URL)​​：加载新页面并记录历史。​​replace(URL)​​：替换当前页面，不可回退。​​​页面刷新：​​​​强制刷新（force=true忽略缓存）。位置对象案例实践​​​​​​​​​​​功能需求​​​​​​点击按钮1：弹出当前页面完整URL；点击按钮2：跳转至同级页面02.html。效果演示​​点击第一个按钮后点击第二个按钮后核心代码​​​​​初始效果浏览器信息对象（navigator）​​​​​​​​​​​核心属性​​浏览器标识​：userAgent​​：关键标识字符串（最常用但需解析）​​appName​​：浏览器名称（多数返回"Netscape"，兼容性设计）​​appVersion​​：平台/版本信息（含兼容性标记）环境检测：​​platform​​：操作系统类型（如Win32、MacIntel）​​cookieEnabled​​：Cookie支持状态（布尔值）​​language​​：浏览器语言（如zh-CN）核心方法​​​功能检测​​：javaEnabled()​​：检测Java支持taintEnabled()​​：历史方法（现代浏览器已废弃）浏览器信息对象案例实践​​​​​​​​​​​功能需求​​​​​信息可视化页面​效果演示​​Chrome浏览器测试结果核心代码​​​​​典型返回值​​​​​11localStorage对象及操作Web存储基础​​​​​​​HTML5Web存储特性​​​与传统Cookie对比​​存储容量​​：Cookie(4KB)<<localStorage(默认5MB)​​传输方式​​：Cookie随HTTP请求发送，localStorage纯本地操作​​应用场景​​：Cookie：用户认证、会话跟踪localStorage：客户端数据缓存​​​​类型​​​​生命周期​​​​典型场景​​sessionStorage会话级别（关闭标签页即销毁）临时表单数据localStorage永久存储（手动清除）用户偏好设置localStorage核心方法​​​​​​​数据操作API​​​​复杂数据处理​​​​​​方法​​​​语法​​​​功能说明​​保存数据localStorage.setItem(key,value)存储键值对获取数据localStorage.getItem(key)读取指定键的值删除数据localStorage.removeItem(key)删除单个键值对清空存储localStorage.clear()清除所有数据localStorage对象及操作案例​​​​​​​功能设计——​​三大核心模块​​​​模块​​​​功能​​​​交互元素​​数据保存输入键值对并存储文本输入框+保存按钮数据显示实时展示所有存储数据动态结果区域数据清除按需删除或清空存储键名输入框+清除按钮第二次数据输入及保存、显示按需清除及显示全部清除及显示初始效果第一次