WebAPI_DOM笔记

WebAPIWebAPI分为DOM文档对象模型和BOM浏览器对象模型文章目录WebAPIDOMDOM树DOM 节点DOM对象获取DOM对象CSS选择器获取DOM元素1.选择匹配的第一个元素2. 获取多个DOM对象3.其他获取DOM元素的方法操作元素内容innerText属性innerHTML属性操作元素属性操作元素常用属性操作元素样式属性通过style属性操作CSS1.通过类名修改样式2.通过classList操作类控制CSS操作表单元素属性自定义属性定时器-间歇函数开启定时器关闭定时器DOM事件事件监听绑定什么是事件什么是事件监听事件监听语法事件监听三要素随机点名案例事件类型鼠标事件焦点事件键盘事件文本事件事件对象获取事件对象部分事件对象常用属性环境对象回调函数事件流事件捕获事件冒泡阻止冒泡阻止元素默认行为解绑事件传统解绑新式解绑两种鼠标经过方式区别两种注册事件区别事件委托其他事件页面加载事件load和DOMContentLoaded的区别load事件DOMContentLoaded页面滚动事件获取位置获取html元素写法滚动到指定坐标页面尺寸事件获取宽高事件(resize)元素尺寸位置获取元素在页面中的位置页面丝滑滚动日期对象实例化时间戳三种方式获取时间戳节点操作DOM节点节点类型查找节点父节点查找子节点查找兄弟关系查找增加节点创建节点追加节点删除节点M端事件Swiper插件DOMDOMDocument Object Model——文档对象模型是用来呈现以及与任意 HTML 或 XML文档交互的API白话文DOM是浏览器提供的一套专门用来操作网页内容的功能DOM作用开发网页内容特效和实现用户交互DOM树将 HTML 文档以树状结构直观的表现出来我们称之为文档树或**DOM树**描述网页内容关系的名词作用文档树直观的体现了标签与标签之间的关系如下图所示将 HTML 文档以树状结构直观的表现出来我们称之为文档树或 DOM 树文档树直观的体现了标签与标签之间的关系。DOM 节点节点是文档树的组成部分每一个节点都是一个 DOM 对象主要分为元素节点、属性节点、文本节点等。**【元素节点】**其实就是 HTML 标签如上图中head、div、body等都属于元素节点。**【属性节点】**是指 HTML 标签中的属性如上图中a标签的href属性、div标签的class属性。**【文本节点】**是指 HTML 标签的文字内容如title标签中的文字。**【根节点】**特指html标签。其它…DOM对象DOM对象浏览器根据html标签生成JS对象所有的标签属性都可以在这个对象上面找到修改这个对象的属性会自动映射到标签身上DOM的核心思想把网页内容当做对象来处理document对象是DOM里提供的一个对象提供的属性和方法都是用来访问和操作网页内容的网页所有内容都在document里面获取DOM对象根据CSS选择器来获取DOM元素 (重点)其他获取DOM元素方法了解CSS选择器获取DOM元素1.选择匹配的第一个元素语法document.querySelector(css选择器)// 1.获取匹配到的第一个元素constboxdocument.querySelector(div)constboxdocument.querySelector(.box)// 适用于id选择器constboxdocument.querySelector(#nav)// 获取第一个小ul liconstlidocument.querySelector(ul li:first-child)//选择所有的小liconstlisdocument.querySelectorAll(ul li)返回值CSS选择器匹配的第一个元素一个HTMLElement对象。如果没有匹配到则返回null。2. 获取多个DOM对象语法querySelectorAlldocument.querySelectorAll(css选择器)返回值CSS选择器匹配的NodeList对象集合得到的是一个伪数组有长度有索引号的数组没有pop()、push()等数组方法想要得到里面的每一个对象则需要**遍历for**的方式获得Ps.哪怕只有一个元素通过querySelectAll() 获取过来的也是一个伪数组里面只有一个元素而已。3.其他获取DOM元素的方法// 根据id获取一个元素document.getElementById(nav)//根据 标签 获取一类元素 获取页面 所有 divdocument.getElementByTagName(div)//根据 类名 获取元素 获取页面 所有类名为 w 的document.getElementsByClassName(w)操作元素内容innerText属性将文本内容添加/更新到任意标签位置显示纯文本不解析标签innerHTML属性将文本内容添加/更新到任意标签位置会解析标签多标签建议使用模板字符操作元素属性操作元素常用属性通过JS设置/修改标签元素属性比如通过src更换图片等。语法对象.属性值例子//1.获取元素constpicdocument.querySelector(img)//2.操作元素pic.src图片路径pic.titletitle操作元素样式属性通过style属性操作CSS语法对象.style.样式属性值示例constboxdocument.querySelector(div)box.style.width400pxbox.style.backgroundColorblue1.通过类名修改样式//active 是一个css类目元素.classNameactiveclassName是使用新值换旧值如果需要添加一个类需要保留之前的类名box.classNamenavbox.classNamediv nav2.通过classList操作类控制CSS通过classList方式追加和删除类名通过add()进行追加类通过remove()进行删除类通过toggle()进行类的切换​ 注意若该标签已有该类使用toggle()则有去除的操作反之则是追加类语法//1.add()追加类box.classList.add(active)//2.remove()删除类box.classList.remove(active)//3.toggle()切换类 有就删掉没有就加上box.classList.toggle(active)操作表单元素属性表单很多情况也需要修改属性比如点击眼睛可以看到密码本质是把表单类型转换为文本框获取DOM对象.属性名设置DOM对象.属性名 新值表单.typepasword表单.value用户名表单.typepasword自定义属性标准属性标签天生自带的属性比如id、title、class等可以直接使用点语法操作比如disabled、checked、selected自定义属性在html5中推出来了专门的**data-**自定义属性在标签上一律以**data-**开头在DOM对象上一律以dataset对象方式获取divdata-id1data-spm不知道1/divdivdata-id22/divdivdata-id33/divdivdata-id44/divdivdata-id55/divconstonedocument.querySelector(div)console.log(one.dataset.id)// 1console.log(one.dataset.spm)// 不知道定时器-间歇函数每隔一段时间需要自动执行一段代码不需要手动去触发定时器函数可以开启和关闭定时器开启定时器setInterval(函数名间隔时间)作用每隔一段时间自动调用该函数间隔时间单位为毫秒ms函数名不需加括号()若需加括号需使用引号包裹定时器返回的是一个id数字示例functionfn(){document.write(hello)}letidsetInterval(fn,1000)关闭定时器let变量名setInterval(函数名,间隔时间)clearInterval(变量名)DOM事件事件监听绑定什么是事件事件是在编程时系统内发生的动作或者发生的事情。比如用户在网页上单击一个按钮什么是事件监听绑定事件注册事件就是让程序检测是否有事件产生一旦有事件触发就立即调用一个函数做出响应也称为绑定事件或者注册事件。比如鼠标经过显示下拉菜单点击可以播放轮播图等。事件监听语法元素对象.addEventListener(事件类型,要执行的函数)事件监听三要素**事件源**哪个DOM元素被事件触发了要获取DOM元素**事件类型**用什么方式触发比如鼠标单击click、鼠标经过mouseover等**事件调用函数**要做什么事示例constbtndocument.querySelector(button)btn.addEventListener(click,function(){alert(点击了)})随机点名案例h2随机点名/h2divclassboxspan名字是/spandivclassqs要开始随机选人咯/div/divdivclassbtnsbuttonclassstart开始/buttonbuttonclassend结束/button/div*{margin:0;padding:0;}h2{text-align:center;}.box{width:600px;margin:50px auto;display:flex;font-size:25px;line-height:40px;}.qs{width:450px;height:40px;color:red;}.btns{text-align:center;}.btns button{width:120px;height:35px;margin:0 50px;}// 数据数组constarr[马超,黄忠,赵云,关羽,张飞]letn//获取对象constnamedocument.querySelector(.qs)conststartdocument.querySelector(.start)constenddocument.querySelector(.end)//开始随机选人start.addEventListener(click,function(){//运行时先清除其他选择器if(n){clearInterval(n);}nsetInterval(function(){letrandomparseInt(Math.random()*arr.length)name.innerHTMLarr[random]name.style.colorblack},40)})//结束随机选人end.addEventListener(click,function(){clearInterval(n)})事件类型鼠标事件click鼠标点击mouseenter鼠标经过mouseleave鼠标离开焦点事件表单获得光标focus获得焦点biur失去焦点键盘事件键盘触发keydown键盘按下触发keyup键盘抬起触发文本事件表单输入触发input用户输入事件事件对象事件对象也是个对象这个对象里有事件触发时的相关信息例如鼠标点击事件中事件对象就存了鼠标点在哪个位置等信息获取事件对象语法如何获取元素.addEventListener(click,function(e){})function(e)中的e即为事件对象在事件绑定的回调函数的第一个参数就是事件对象一般命名为event、ev、e部分事件对象常用属性type获取当前的事件类型clintX/clientY获取光标相对于浏览器可见窗口左上角的位置offsetX/offsetY获取光标相对于当前DOM元素左上角的位置key用户按下的键盘键的值环境对象环境对象指的是函数内部特殊的变量this它代表着当前函数运行时所处的环境函数的调用方式不同this指代的对象也不同谁调用this就是谁是判断this指向的粗略规则直接调用函数其实相当于是window.函数所以this指代window回调函数将函数A作为参数传递给函数B时称函数A为回调函数简单理解把一个函数当作参数来传递给另外一个函数的时候这个函数就是回调函数回调函数本质还是函数只不过把它当成参数使用使用匿名函数作为回调函数也比较常见事件流事件流指的是事件完整执行过程中的流动路径捕获阶段冒泡阶段说明假设页面里有个div当触发事件时会经历两个阶段分别是捕获阶段、冒泡阶段简单来说捕获阶段是从父到子冒泡阶段是从子到父事件捕获**概念**从DOM的根元素开始去执行对应的事件 (从外到里)事件捕获需要写对应代码才能看到效果代码DOM.addEventListener(事件类型,事件处理函数,是否使用捕获机制)示例document.addEventListener(click,function(){alert(111)},true)事件冒泡概念当一个元素的事件被触发时同样的事件将会在该元素的所有祖先元素中依次被触发。这一过程被称为事件冒泡简单理解当一个元素触发事件后会依次向上调用所有父级元素的同名事件事件冒泡默认存在阻止冒泡**问题**因为默认就有冒泡模式的存在所以容易导致事件影响到父级元素前提阻止事件冒泡需要拿到事件对象语法事件对象.stopPropagation()注意此方法可以阻断事件流动传播不光在冒泡阶段有效捕获阶段也有效阻止元素默认行为某些情况下需要阻止默认行为的发生比如阻止链接的跳转表单域跳转语法e.preventDefault()解绑事件传统解绑新式解绑注意匿名函数无法被解绑 需抽取成单独的方法再进行解绑两种鼠标经过方式区别两种注册事件区别事件委托**概念**事件委托是利用事件流的特征解决一些开发需求的知识技巧**优点**减少注册次数可以提高程序性能原理事件委托其实是利用事件冒泡的特点。​ 给父元素注册事件当我们触发子元素的时候会冒泡到父元素身上从而触发父元素的事件实现事件对象.target. tagName可以获得真正触发事件的元素**示例if(e.target.tagNameLI){e.target.style.colorred}其他事件页面加载事件加载外部资源如图片、外联CSS和JavaScript等加载完毕时触发的事件window.addEventListener(load,function(){//要执行的操作})关键字load用于监听页面所有资源加载完毕注意不光可以监听整个页面资源加载完毕也可以针对某个资源绑定load事件关键字DOMContentLoadeddocument.addEventListener(DOMContentLoaded,function(){//执行的操作constbtndocument.querySelector(button)btn.addEventListener(click,function(){alert(11)})//结束})load和DOMContentLoaded的区别load事件监听整个页面资源给windowDOMContentLoaded给document加无需等待样式表、图像等完全加载页面滚动事件**滚动事件**滚动条在滚动的时候触发的事件事件名scroll**作用**监听整个页面滚动//页面滚动事件window.addEventListener(scroll,function(){//执行的操作})PS.监听某个元素的内部滚动直接给某个元素加即可获取位置scrollLeftscrollTop这俩属性的作用获取被卷去的大小获取元素内容往左、往上滚出去看不到的距离这两个值是可读写的尽量在scroll事件里获取被卷去的距离特别注意得使用window.addEventListener(scroll,function(){})进行包裹或使用其他元素的事件捕获window.addEventListener(scroll,function(){console.log(this.scroll);})获取html元素写法document.documentElement console.log(document.documentElement.scrollTop)document.documentElement.scrollTop滚动到指定坐标**scrollTo()**方法可以将内容滚动到指定的坐标语法元素.scrollTO(x,y)例如// 让元素滚动到y轴1000像素位置window.scrollTo(0,1000)页面尺寸事件获取宽高clientWidth宽度clientHeight高度获取元素可见部分的宽高不包括边框、margin、滚动条等事件(resize)resize会在窗口尺寸改变的时候触发事件window.addEventListener(resize,function(){//执行的代码})检测屏幕宽度window.addEventListener(resize,function(){//获取屏幕宽度letwdocument.documentElement.clientWidth console.log(w)})元素尺寸位置获取元素在页面中的位置获取宽高1.获取元素的自身宽高、包含元素自身设置的宽高、padding、border2.offsetWidth和offsetHeight3.获取出来的是数值方便计算4.注意获取到的是可视宽高如果盒子是隐藏的获取到的结果是0获取位置1.获取元素距离自己定位父级元素的左、上距离offsetLeft和offsetTop是只读属性2.element.getBoundingClientRect():方法返回元素的大小及其相对于视口的位置页面丝滑滚动html{scroll-behavior:smooth;}日期对象实例化使用new关键字该操作称之为实例化创建一个时间对象并获取时间获得当前时间const date new Date()获得指定时间const date new Date(2008-8-8)时间戳三种方式获取时间戳getTime()方法constdatenewDate()console.log(date.getTime())new Date()console.log(newDate())Date.now()console.log(Date.now())无序实例化但是只能看到当前时间的时间戳前面两种可以返回指定时间的时间戳节点操作DOM节点DOM树里每一个内容都称之为节点节点类型元素节点所有的标签比如divbodyhtml是根节点属性节点所有的属性比如href文本节点所有的文本其他查找节点父节点查找parentNode属性返回最近一级的父节点找不到返回null子元素.parentNode子节点查找childNodes获得所有子节点、包括文本节点空格、换行、注释节点等children属性仅获得所有元素节点返回的还是一个伪数组父元素.children兄弟关系查找下一个兄弟节点nextElementSibling属性上一个兄弟节点previousElementSibling属性增加节点创建节点即创造出一个新的网页元素再添加到网页内一般先创建节点然后插入节点语法document.createElement(标签名)追加节点插入到父元素的最后一个子元素//插入到这个父元素的最后父元素.appendChild()插入到父元素中某个子元素的前面//插入到某个子元素的前面父元素.insertBefore(要插入的元素,在哪个元素前面)示例constuldocument.querySelector(ul)constlidocument.createElement(li)document.body.appendChild(div)ul.appendChild(li)ul.insertBefore(li,ul.children[0])删除节点若一个节点在页面中已经不需要的时候可以删除他要删除元素必须通过父元素删除语法:父元素.removeChild(要删除的元素)注意不存在父子关系则删除不成功删除节点和隐藏节点display:none 有区别的 隐藏节点还是存在的但是删除则从html中删除节点M端事件Swiper插件Ø 熟悉官网,了解这个插件可以完成什么需求 https://www.swiper.com.cn/Ø 看在线演示,找到符合自己需求的demo https://www.swiper.com.cn/demo/index.htmlØ 查看基本使用流程 https://www.swiper.com.cn/usage/index.htmlØ 查看APi文档,去配置自己的插件 https://www.swiper.com.cn/api/index.htmlØ 注意: 多个swiper同时使用的时候, 类名需要注意区分