微网站建设开发工具网站开发使用软件环境

微网站建设开发工具,网站开发使用软件环境,泰州网站优化公司,电子商务类型的网站JavaScript 核心知识点笔记#xff08;数组方法 DOM 事件#xff09; 一、JavaScript 数组核心方法 数组是 JS 中存储有序数据的核心结构#xff0c;其方法可分为「不修改原数组」和「修改原数组」两类#xff0c;以下是高频方法的详细解析#xff1a; #xff08;一数组方法 DOM 事件一、JavaScript 数组核心方法数组是 JS 中存储有序数据的核心结构其方法可分为「不修改原数组」和「修改原数组」两类以下是高频方法的详细解析一不修改原数组的方法1. slice() - 截取数组片段功能从数组中提取指定范围的元素返回新数组原数组不变。参数规则第一个参数截取起始索引包含该索引元素第二个参数截取结束索引不包含该索引元素省略则截取到数组末尾支持负索引-1 表示最后一个元素-2 表示倒数第二个以此类推。示例constarr[孙悟空,猪八戒,沙和尚,唐僧];constres1arr.slice(0,2);// [孙悟空, 猪八戒]constres2arr.slice(2);// [沙和尚, 唐僧]constres3arr.slice(-2);// [沙和尚, 唐僧]截取最后2个console.log(arr);// 原数组不变[孙悟空, 猪八戒, 沙和尚, 唐僧]2. concat() - 拼接多个数组/值功能连接两个或多个数组或单个值返回新数组原数组不变。参数可传任意数量的数组或单个值会直接作为元素加入新数组。示例constarr1[孙悟空,猪八戒];constarr2[沙和尚,唐僧];constarr3[白骨精];constresarr1.concat(arr2,arr3,牛魔王);// 结果[孙悟空, 猪八戒, 沙和尚, 唐僧, 白骨精, 牛魔王]console.log(arr1);// 原数组不变[孙悟空, 猪八戒]3. join() - 数组转字符串功能将数组所有元素拼接成一个字符串返回该字符串原数组不变。参数可选指定分隔符默认用逗号,分隔。示例constarr[孙悟空,猪八戒,沙和尚];constres1arr.join();// 孙悟空,猪八戒,沙和尚默认分隔符constres2arr.join(-);// 孙悟空-猪八戒-沙和尚自定义分隔符constres3arr.join();// 孙悟空猪八戒沙和尚无分隔符console.log(typeofres1);// string返回值类型为字符串二修改原数组的方法1. splice() - 删除/插入/替换数组元素功能多功能方法可删除、插入、替换数组元素返回被删除的元素组成的数组原数组直接修改。参数规则第一个参数操作起始索引第二个参数删除的元素数量传 0 则不删除第三个及以后参数要插入到起始索引位置的新元素可选。示例constarr[孙悟空,猪八戒,沙和尚];// 1. 删除从索引0删除2个元素constdelResarr.splice(0,2);console.log(delRes);// [孙悟空, 猪八戒]被删除的元素console.log(arr);// [沙和尚]原数组已修改// 2. 插入从索引0删除0个插入新元素arr.splice(0,0,牛魔王,铁扇公主);console.log(arr);// [牛魔王, 铁扇公主, 沙和尚]// 3. 替换从索引1删除1个插入新元素arr.splice(1,1,唐僧);console.log(arr);// [牛魔王, 唐僧, 沙和尚]2. reverse() - 反转数组功能将数组元素顺序完全反转直接修改原数组返回反转后的原数组与修改后的数组是同一个引用。示例constarr[孙悟空,猪八戒,沙和尚];constresarr.reverse();console.log(arr);// [沙和尚, 猪八戒, 孙悟空]原数组已修改console.log(resarr);// true返回值是原数组本身3. sort() - 数组排序功能对数组元素排序直接修改原数组返回排序后的原数组。核心注意点默认按Unicode 编码排序非数值大小纯数字数组直接排序会出错需传入自定义比较函数实现数值排序。示例// 1. 字符串排序默认规则可用conststrArr[b,d,e,a,c];strArr.sort();console.log(strArr);// [a, b, c, d, e]// 2. 数字排序必须传比较函数constnumArr[12,3,25,7];// 升序a - b降序b - anumArr.sort((a,b)a-b);console.log(numArr);// [3, 7, 12, 25]正确数值升序// 错误示例直接排序数字数组numArr.sort();console.log(numArr);// [12, 25, 3, 7]按Unicode编码排序结果错误二、DOM文档对象模型一DOM 核心概念定义HTML 文档加载后浏览器将其解析为「树形结构」DOM 树文档中的每个标签、文本、属性等都对应树中的一个「节点Node」。DOM 树结构示例对应简单 HTMLhtmlheadtitle标题/title/headbodypHello/p/body/html对应的 DOM 树Document根节点 └── html元素节点 ├── head元素节点 │ └── title元素节点 │ └── 标题文本节点 └── body元素节点 └── p元素节点 └── Hello文本节点常用节点类型元素节点HTML 标签如div、p是 DOM 操作的核心对象文本节点标签内的文本内容如pHello/p中的 “Hello”文档节点整个 HTML 文档document对象。二DOM 节点查询获取元素DOM 查询分为「通过document全局调用」和「通过已获取的元素节点调用」两类核心方法如下1. 基础快捷获取document.body直接获取body标签元素document.documentElement直接获取html根标签元素document.all获取页面中所有元素类数组兼容性差不推荐使用。2. 按标识/属性查询document 调用方法功能返回值注意点getElementById(id)通过 id 属性查询单个元素节点无匹配则返回 nullid 是唯一的优先使用getElementsByTagName(tag)通过标签名查询HTMLCollection类数组标签名不区分大小写如 “div” / “DIV” 均可getElementsByClassName(class)通过 class 属性查询HTMLCollection类数组支持多个类名空格分隔如 “box red”getElementsByName(name)通过 name 属性查询NodeList类数组常用于表单元素如input nameusername3. 按 CSS 选择器查询推荐方法功能返回值document.querySelector(selector)通过 CSS 选择器查询第一个匹配的元素节点无则 nulldocument.querySelectorAll(selector)通过 CSS 选择器查询NodeList类数组包含所有匹配元素4. 节点关系查询通过已获取的元素调用方法/属性功能注意点getElementsByTagName(tag)查询当前元素下指定标签名的子元素仅查当前元素的后代不包含自身childNodes获取当前节点的所有子节点包含文本节点含空白/换行、元素节点等children获取当前元素的所有子元素节点仅返回元素节点忽略文本/空白节点推荐使用firstChild获取当前节点的第一个子节点可能是空白文本节点lastChild获取当前节点的最后一个子节点可能是空白文本节点parentNode获取当前节点的父节点元素节点/文档节点无父节点则返回 nullpreviousSibling获取当前节点的上一个兄弟节点包含文本节点nextSibling获取当前节点的下一个兄弟节点包含文本节点示例DOM 查询// 1. 按 id 查询constboxdocument.getElementById(box);// 2. 按 CSS 选择器查询constpListdocument.querySelectorAll(.content p);// 3. 子元素查询constdivChildrenbox.children;// box 的所有子元素constfirstDivChildbox.firstElementChild;// 第一个子元素忽略文本节点// 4. 父节点查询constparentbox.parentNode;三DOM 节点增删改DOM 增删改1. 创建节点方法功能示例document.createElement(tag)创建元素节点const p document.createElement(p);document.createTextNode(text)创建文本节点const textNode document.createTextNode(Hello World);2. 添加/替换/删除节点方法功能语法appendChild(child)向父节点末尾添加子节点父节点.appendChild(子节点);replaceChild(new, old)用新节点替换旧节点父节点.replaceChild(新节点, 旧节点);removeChild(child)删除父节点下的子节点父节点.removeChild(子节点);或子节点.parentNode.removeChild(子节点);示例DOM 增删改// 1. 创建元素 文本constpdocument.createElement(p);consttextdocument.createTextNode(新增的段落);p.appendChild(text);// 文本节点加入元素节点// 2. 添加到页面document.body.appendChild(p);// 3. 替换节点constoldPdocument.getElementById(old-p);document.body.replaceChild(p,oldP);// 4. 删除节点p.parentNode.removeChild(p);四元素属性/内容操作1. 内容操作innerHTML获取/设置元素内部的 HTML 代码支持标签解析innerText/textContent获取/设置元素的纯文本内容不解析标签区别innerText受 CSS 样式影响如隐藏文本不获取textContent忽略样式获取所有文本。2. 属性操作普通属性如id、src、value直接用元素.属性名获取/设置class属性需用className而非class因class是 JS 关键字自定义属性推荐用dataset如div>示例属性/内容操作constinputdocument.getElementById(username);constdivdocument.getElementById(info);// 1. 内容操作div.innerHTMLspan用户名/span;// 设置HTML内容div.innerText纯文本内容;// 设置纯文本// 2. 普通属性操作input.value张三;// 设置输入框值console.log(input.id);// 获取id属性// 3. class属性操作div.classNamebox red;// 设置class// 4. 自定义属性操作div.dataset.id1001;console.log(div.dataset.id);// 1001三、JavaScript 事件一事件核心概念定义文档/浏览器窗口中发生的「特定交互瞬间」如点击按钮、页面加载完成、键盘按下是 JS 与 HTML 交互的核心方式。事件三要素事件源触发事件的元素如按钮、输入框事件类型事件的名称如点击click、双击dblclick、鼠标移动mousemove事件处理程序事件触发后执行的函数也叫「响应函数」。二事件绑定方式1. 行内绑定不推荐方式直接在 HTML 标签中写on事件名属性值为 JS 代码缺点结构HTML与行为JS耦合代码维护性差。示例buttononclickalert(点击了按钮)点击我/buttonbuttononmousemoveconsole.log(鼠标移上来了)鼠标移动/button2. 脚本绑定推荐方式通过 JS 获取元素给元素的on事件名属性赋值为函数优点结构与行为分离代码清晰易维护。示例buttonidbtn点击我/buttonscript// 获取事件源constbtndocument.getElementById(btn);// 绑定事件处理程序btn.onclickfunction(){alert(点击了按钮脚本绑定);};// 双击事件btn.ondblclickfunction(){console.log(双击了按钮);};/script三页面加载问题onload 事件1. 问题场景浏览器从上到下解析代码若script写在head中执行时body内的 DOM 元素尚未解析会导致「无法获取 DOM 元素」。headscript// 错误此时 p 还未解析p 为 nullconstpdocument.querySelector(p);p.innerText修改内容;// 报错Cannot set property innerText of null/script/headbodyp原始内容/p/body2. 解决方法window.onload 事件window.onload页面所有资源DOM、图片、样式加载完成后触发把 DOM 操作代码写在onload事件处理程序中确保执行时 DOM 已加载。示例headscript// 页面加载完成后执行window.onloadfunction(){constpdocument.querySelector(p);p.innerText修改后的内容;// 执行成功};/script/headbodyp原始内容/p/body四常见事件类型拓展事件分类常用事件触发时机鼠标事件click单击元素dblclick双击元素mousemove鼠标在元素上移动mouseover/mouseout鼠标移入/移出元素键盘事件keydown/keyup键盘按下/松开表单事件change表单元素值改变如下拉框选择、输入框失焦后值变submit表单提交页面事件load页面/资源加载完成resize浏览器窗口大小改变四、核心要点总结1. 数组方法区分「修改原数组」splice/reverse/sort和「不修改原数组」slice/concat/joinsplice 是多功能方法需牢记参数规则sort 排序数字必须传比较函数。2. DOM 操作DOM 树是 HTML 的树形抽象操作 DOM 本质是操作节点查询节点优先用querySelector/querySelectorAll支持 CSS 选择器操作子节点时children比childNodes更实用仅返回元素节点增删改节点需先创建再通过父节点完成添加/替换/删除。3. 事件事件绑定优先用「脚本绑定」避免行内绑定页面加载问题用window.onload解决确保 DOM 加载完成后执行代码事件三要素源、类型、处理程序是理解事件的核心。一、事件对象Event核心概念1. 事件对象的定义与作用当事件的响应函数被触发时浏览器会自动创建一个「事件对象event」并将其作为实参传递给响应函数部分低版本浏览器例外。事件对象封装了当前事件的所有相关信息鼠标事件鼠标坐标clientX/clientY、按下的鼠标按键、触发事件的元素等键盘事件按下的键盘按键keyCode、是否按住 Shift/Ctrl 等通用信息事件类型click/mousemove、事件源触发事件的元素等。核心价值通过事件对象能精准控制事件的行为如获取鼠标位置、阻止默认行为、停止事件冒泡等。2. 事件对象的获取基础用法以「鼠标移动事件onmousemove」为例在响应函数中接收事件对象参数// 获取事件源id为areaDiv的元素constareaDivdocument.getElementById(areaDiv);// 获取用于显示坐标的元素id为showMsg的元素constshowMsgdocument.getElementById(showMsg);// 绑定鼠标移动事件areaDiv.onmousemovefunction(event){// event为事件对象形参可自定义名称如e// 1. 获取鼠标坐标clientX水平、clientY垂直constxevent.clientX;// 鼠标相对于浏览器可视区的水平坐标constyevent.clientY;// 鼠标相对于浏览器可视区的垂直坐标// 2. 在showMsg中显示坐标showMsg.innerHTMLx ${x}, y ${y};};二、事件对象的浏览器兼容性问题重点1. 兼容性差异核心浏览器版本事件对象传递方式现代浏览器Chrome/Firefox/IE9自动将事件对象作为实参传递给响应函数IE8 及以下浏览器不传递事件对象而是将事件对象作为window对象的属性window.event保存2. 兼容性处理方案确保event存在方案1条件判断通俗易懂版areaDiv.onmousemovefunction(event){// 若event不存在IE8及以下则从window.event获取if(!event){eventwindow.event;}// 后续正常使用eventconstxevent.clientX;constyevent.clientY;showMsg.innerHTMLx ${x}, y ${y};};方案2短路运算符简洁版工业级常用利用「逻辑或||」的特性如果左侧为假undefined/null则取右侧值。areaDiv.onmousemovefunction(event){// 一行代码兼容所有浏览器优先用传递的event否则用window.eventeventevent||window.event;constxevent.clientX;constyevent.clientY;showMsg.innerHTMLx ${x}, y ${y};};三、事件对象的常用属性拓展以鼠标事件为例补充事件对象的高频属性属性作用兼容性clientX/clientY鼠标相对于浏览器可视区的坐标不包含滚动条偏移所有浏览器支持含IEpageX/pageY鼠标相对于文档整个页面的坐标包含滚动条偏移IE8及以下不支持需兼容处理screenX/screenY鼠标相对于电脑屏幕的坐标所有浏览器支持target触发事件的「原始元素」事件源IE8及以下用srcElement替代type事件类型如mousemove、“click”所有浏览器支持拓展pageX/pageY 的兼容性处理areaDiv.onmousemovefunction(event){eventevent||window.event;// 处理pageX/pageY兼容IE8无pageX需用clientX 滚动条偏移constpageXevent.pageX||(event.clientXdocument.documentElement.scrollLeft);constpageYevent.pageY||(event.clientYdocument.documentElement.scrollTop);showMsg.innerHTML页面坐标x ${pageX}, y ${pageY};};四、封装通用事件绑定函数实战拓展结合「事件对象」和「兼容性处理」封装一个「指定元素绑定单击事件」的通用函数适配所有浏览器/** * 给指定id的元素绑定单击响应函数 * param {string} idStr - 元素的id属性值 * param {Function} callback - 单击事件的响应函数 */functionbindClickEvent(idStr,callback){// 1. 获取元素constelemdocument.getElementById(idStr);if(!elem)return;// 元素不存在则终止// 2. 绑定单击事件elem.onclickfunction(event){// 3. 兼容处理事件对象eventevent||window.event;// 4. 执行回调函数并将事件对象传递给回调callback(event);};}// 调用示例给id为btn的按钮绑定单击事件打印鼠标坐标bindClickEvent(btn,function(event){constxevent.clientX;constyevent.clientY;alert(单击位置坐标x${x}, y${y});});五、核心要点总结事件对象的本质浏览器自动创建的、封装事件所有信息的对象是控制事件行为的核心兼容性核心IE8及以下不传递event需从window.event获取通用写法event event || window.event;坐标获取clientX/clientY相对可视区最常用无兼容坑pageX/pageY相对文档需兼容IE8结合滚动条偏移封装思想将兼容性处理封装到通用函数中避免重复代码提升可维护性。