keyipatience:个人主页作者简介C/C后端开发学习者专栏传送门《c》《linux》《c高阶数据结构》《c数据结构与算法》《前端学习》⭐️patience is key in lifeJS 整体分为 3 大块ECMAScriptESJS 基础语法变量、数据类型、运算符、if、循环、函数、数组、对象、class、原型等相当于练武扎马步纯语言基础不能操作页面和浏览器DOM API文档对象模型全称Document Object Model作用操作页面 HTML 结构获取并增删改查元素、绑定事件等等BOM API浏览器对象模型全称Browser Object Model作用操作浏览器窗口本身刷新页面、获取地址、弹窗、定时器等WebAPI DOM BOMECMAScript 标准由 ECMA 制定WebAPIDOM/BOM由 W3C 制定两套标准制定组织不一样。ECMAScript基本功马步、拳法理论只有语法碰不到页面WebAPI (DOMBOM)实战招式可以操控网页和浏览器用来做交互页面。DOM 基本概念1. DOM 全称Document Object Model 文档对象模型W3C 提供一套 API用来操作网页网页内容、网页结构、网页样式2. DOM 树浏览器会把 HTML 页面解析成一棵树形结构DOM 树像家族族谱。 示例 HTMLhtml head title文档标题/title /head body a href我的链接/a h1我的标题/h1 /body /html对应的 DOM 树层级document文档→ html 根元素 → head、body 子元素 → 继续往下一层一层嵌套3.console.log()和console.dir()console.log()打印 DOM显示 HTML 标签结构console.dir()打印 DOM把 DOM 节点当成 JS 对象展开展示这个元素身上所有的属性3. 三个核心名词文档 document整个网页页面代码里用document对象代表元素 element页面上所有 HTML 标签html、head、div、a、h1叫元素节点节点 node范围更大网页里所有内容都叫节点包含元素节点、文本节点、属性节点、注释节点等。获取元素JS DOMquerySelector / querySelectorAllquerySelector作用返回匹配选择器的第一个元素找不到返回null// 语法 let elementdocument.querySelector(selectors);参数就是CSS 选择器字符串和 CSS 写法一模一样类选择器.boxid 选择器#id后代选择器h3 span inputeg:div classboxabc/div div ididdef/div h3spaninput typetext/span/h3 script let elem1 document.querySelector(.box); // 取classbox第一个元素 let elem2 document.querySelector(#id); // 取idid元素 let elem3 document.querySelector(h3 span input); console.log(elem1,elem2,elem3); /scriptquerySelectorAll作用返回所有匹配的元素得到一个NodeList 集合类数组let elems document.querySelectorAll(div);哪怕只有 1 个匹配元素返回的依然是集合找不到返回空集合NodeList []可以用循环遍历注意不是真正数组部分数组方法不能直接用egdiv classitem1/div div classitem2/div div classitem3/div script let first document.querySelector(.item); // 拿到第一个div let all document.querySelectorAll(.item); // 拿到全部3个div console.log(all[1]); // 取第二个 for(let i0;iall.length;i)//循环遍历 {} /scriptJS 事件初识事件就是用户在页面上的操作点击、输入、鼠标移动等浏览器捕获这个行为交给 JS 执行代码实现页面交互。事件三要素事件源触发事件的 DOM 元素谁发生的事件事件类型是什么动作比如click点击、input输入、mouseover鼠标移入事件处理程序事件触发后执行的函数回调函数浏览器自动调用我们不用手动调用代码示例点击事件button idbtn点我一下/button script // 1. 获取事件源id选择器要写 #btn let btn document.querySelector(#btn); // 2. 绑定点击事件 btn.onclick function () { alert(hello world); } /script拆解事件源btn按钮事件类型click点击事件事件处理程序function(){ alert(...) }知识点btn.onclick function(){}叫做绑定 / 注册事件这个函数是回调函数不是我们手动调用浏览器检测到点击动作时自动执行。JS 键盘按下事件keydown事件触发时机特点keydown按下按键瞬间触发所有按键都可以识别字母、回车、空格、方向键、Shift长按会连续重复触发keyup松开按键的时候触发松开才执行keypress废弃按下可输入字符才触发不能识别方向键、Shift现在不推荐用代码示例input 输入框input typetext classinp script // 获取输入框 let inp document.querySelector(.inp); // 绑定键盘按下事件 inp.onkeydown function(e){ console.log(按下按键了); // e 就是键盘事件对象保存按键信息 console.log(按下的键, e.key); } /script事件对象两个核心属性e.key字符本身按回车得到Enter、按空格得到 、按 a 得到a推荐使用e.code物理按键编码固定不变按 A 键永远返回KeyA不受大小写影响keyCode老数字编码已经废弃写新项目不要用keyup示例最常用场景输入框输入文字松开按键之后读取输入框内容input typetext idinp script let inp document.querySelector(#inp) inp.onkeyup function(e) { // 松开按键拿到输入框里完整的文字 console.log(inp.value) if(e.key Enter){ alert(回车松开提交内容 inp.value) } } /script小对比输入框打字什么时候用 keydown什么时候用 keyup想在按下瞬间拦截按键keydown 等用户输完、松手后拿到输入内容keyup获取/修改元素内容innerText处理纯文本写进去的 HTML 标签会被当成普通文字不会解析成网页标签innerHTML可以识别HTML 标签能写入标签浏览器会解析渲染网页结构1. innerText只获取 / 修改文字内容不识别 HTML 标签所有标签当成普通文字展示div spanhello world/span spanhello world/span /div script let div document.querySelector(div); // 读取只会拿到文本 hello world hello world丢掉span标签 console.log(div.innerText); // 修改span 不会当成标签直接原样像字符串一样显示在页面上 //覆盖写入把 div 里面旧的全部内容清空 div.innerText hello js spanhello js/span; /script2. innerHTML获取 / 修改完整 HTML 结构识别 HTML 标签div spanhello world/span spanhello world/span /div script let div document.querySelector(div); // 读取拿到内部完整源码包含 span 标签 console.log(div.innerHTML); // 修改浏览器会解析span标签渲染成网页元素 //覆盖写入把 div 里面旧的全部内容清空 div.innerHTML hello js spanhello js/span; /scriptJS 获取 / 修改元素属性DOM元素属性标签上写的属性比如id、class、src、href、type、value.....两种分类原生属性 和 自定义属性1.原生自带属性标签本身就有的属性直接用.访问获取元素。属性名 。修改元素。属性名 新值input typetext classinp value初始文字 img src1.jpg alt图片 a hrefhttps://baidu.com百度/a script let inp document.querySelector(inp);//类选择器 // 获取属性 console.log(inp.value); // 获取输入框内容 console.log(inp.id); // 修改属性 inp.value 新的文字; // 修改输入框value let img document.querySelector(img);//后代选择器 img.src 2.jpg; // 修改图片地址 let a document.querySelector(a); a.href https://google.com; // 修改链接地址 /script注意class 属性特殊不能写 element.class要用element.classNamelet box document.querySelector(.box); box.className new-class; // 修改类名2.通用方法getAttribute /setAttribute推荐原生、自定义属性都能用element.getAttribute(属性名)→获取属性element.setAttribute(属性名, 属性值)→设置 / 修改属性element.removeAttribute(属性名)→ 删除属性div idbox>获取 / 修改样式属性两大方式行内 style 和 className行内样式操作element.style只修改标签style里面的行内样式适合只改少量 1~2 个样式 语法element.style.样式名 值; // 一次性写多个样式cssText element.style.cssText width:100px; background:red;规则CSS 短横线 → 驼峰命名去掉-横杠后面那个单词首字母大写egfont-size → fontSize background-color → backgroundColor示例点击文字放大字体div stylefont-size: 20px; font-weight: 700; 哈哈 /div script let div document.querySelector(div); div.onclick function () { // 拿到当前字体大小转整数cssfont-size → jsfontSize let curFontSize parseInt(div.style.fontSize); curFontSize 10; // 字体10 div.style.fontSize curFontSize px; // 赋值必须带px单位 } /script注意CSS 写在style标签里面不是行内样式的话就不会生效!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDocument/title style div{ font-size: 20px; font-weight: 700; } /style /head body div哈哈/div script let div document.querySelector(div); div.onclick function () { // 拿到当前字体大小转整数 let curFontSize parseInt(div.style.fontSize); curFontSize 10; // 字体10 div.style.fontSize curFontSize px; // 赋值必须带px单位 } /script /body /html类名样式操作className适合大量样式切换提前写好 CSS 类JS 只切换 class 名字语法element.className 类名;示例日间 / 夜间模式切换逻辑点击切换类名light和dark一次性换背景、文字颜色等一堆样式。每一个类名对应独特的样式!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDocument/title /head body style /* 默认 html、body 高度是被内容撑开不会占满浏览器窗口。 设置height:100%让 html 和 body 高度等于浏览器可视窗口高度。 */ body,html{ width: 100%; height:100%; } .light { background: #fff; color: #000; width: 100%; height:100%; } .dark { background: #222; color: #fff; width: 100%; height:100%; } /style div classlight 这是一大段话。br 这是一大段话。br 这是一大段话。br 这是一大段话。br /div script let box document.querySelector(div); box.onclick function () { if (box.className light) { box.className dark; } else { box.className light; } } /script /body /html对比方式写法适用场景特点行内样式 stylediv.style.fontSize只改少量 1、2 个样式优先级很高只操作行内 style驼峰命名classNamediv.className 类名一次性切换很多 CSS 样式推荐代码干净样式写在 CSS 里结构样式分离JS DOM —— 操作节点增、删、改、查节点HTML 里每一个标签 / 文本 / 注释都叫节点我们主要操作元素节点1. 创建节点新建标签document.createElement(标签名)只创建不会自动放到页面上需要追加// 创建一个div元素节点 let newDiv document.createElement(div); newDiv.innerText 我是新建的盒子;2. 添加节点放到页面appendChild () 追加到父元素最后面语法父元素.appendChild(新节点)//末尾添加 div.appendChild(newNode)InsertBefore 任意位置语法父元素.insertBefore(新节点, 参考节点)作用把新节点插到【参考节点的前面】//插到p1前面 div.insertBefore(newNode, document.querySelector(.p1)) //null插到末尾 div.insertBefore(newNode, null)3. 删除节点父元素.removeChild(子节点oldChild element.removeChild(child);重点只能父节点调用 removeChild删除它自己的子元素。 如果 child 不是 element 的子节点 →报错抛出异常返回值 oldChild被删掉的那个节点对象。节点只是从 DOM 树上拿下来页面看不见了但还保存在内存变量里没有销毁。 后面可以再次appendChild(oldChild)把它重新放回页面别的地方两种拿到参考节点的写法页面div p classp1这是一个p标签1/p p这是一个p标签2/p p这是一个p标签3/p /div写法 1querySelector// 通过class选择器直接查找元素 let ref document.querySelector(.p1) div.insertBefore(new_node, ref)写法 2childrenchildren是父元素里所有子元素的集合伪数组// 通过父元素的子元素集合按下标拿 let ref div.children[0] div.insertBefore(new_node, ref)注意1如果针对一个节点插入两次, 则只有最后一次生效(相当于把元素移动了)// 只会移动不会生成2个div container.insertBefore(div, container.children[0]) container.insertBefore(div, container.children[2])注意2: 一旦一个节点插入完毕, 再针对刚刚的节点对象进行修改, 能够同步影响到 DOM 树中的内容let div document.createElement(div) div.innerText 旧文字 container.appendChild(div) div.innerText 新文字 // 直接修改页面立刻变
