首页 > 其他分享 >2021年Web前端面试宝典WebAPI部分

2021年Web前端面试宝典WebAPI部分

时间:2024-09-06 12:52:17浏览次数:13  
标签:WebAPI Web 触发 动画 DOM 2021 dom 节点 事件

DOM是一种树形结构的数据结构

3、dom操作的常用api有哪些?(必会)

dom操作的常用api有以下几种

1、获取dom节点

1.1)document.getElementById(‘div1’)

1.2)document.getElementsByTagName(‘div’)

1.3)document.getElementsByClassName(‘container’)

1.4)document.querySelector(‘p’)

1.5)document.querySelectorAll(‘p’)

2、property(js对象的property)

var p = document.getElementByTagName(‘p’)[0]

console.log(p.nodeName); // nodeName是p的property,即nodeName是p的属性

3、attribute

3.1)p.getAttribute(‘data-name’);

3.2)p.setAttribute(‘data-name’, ‘imooc’);

4、dom节点的Attribute和Property有何区别?(必会)

1、什么是Property

每个DOM节点都是一个object对象,它可以像其他的js Object一样具有自己的property和method,所以property的值可以是任何数据类型,大小写敏感,原则上property应该仅供 js操作,不会出现在html中(默认属性除外:id/src/href/className/dir/title/lang等),和其他js object一样,自定义的property也会出现在object的for…in遍历中

2、什么是Attribute

attribute出现 在dom中,js提供了getAttribute/setAttribute等方法来获取和改变它的值,attribute 的值只能是字符串且大小写不敏感,最后作用于html中,可以影响innerHTML获取的值。可以通过访问dom节点的attributes属性来获取 改节点的所有的attribute。(在IE<9中,attribute获取和改变的实际上是property。)

3、两者之间的区别是:

3.1)自定义的Property与Attribute不同步,不相等

3.2)非自定义的DOM property与 attributes 是有条件同步的

3.3)非自定义的属性(id/src/href/name/value等),通过setAttribute修改其特性值可以同步作用到property 上,而通过.property修改属性值有的(value)时候不会同步到attribute上,即不会反应到html上(除以下几种情况,非自定义属性 在二者之间是同步的)。

5、dom结构操作怎样添加、移除、移动、复制、创建和查找节点?(必会)

1、创建新节点

createDocumentFragment() //创建一个DOM片段

createElement() //创建一个具体的元素

createTextnode() //创建一个文本节点

2、添加、移除、替换、插入

appendChild()

removeChild()

replaceChild()

insertBefore() //并没有insertAfter()

3、查找

getElementsByTagName() //通过标签名称

getElementsByName() //通过元素的Name属性的值(IE容错能力较强,会得到一个数组,其中包括id等于name值的)

getElementById() //通过元素Id,唯一性

6、dom事件的级别?(必会)

DOM级别一共可以分为四个级别:DOM0级、DOM1级、DOM2级和DOM3级。

而DOM事件分为3个级别:DOM 0级事件处理,DOM 2级事件处理和DOM 3级事件处理。由于DOM 1级中没有事件的相关内容,所以没有DOM 1级事件

1、dom0 element.οnclick=function(){}

2、dom2 element.addEventListener(‘click’, function(){}, false) // 默认是false。false:冒泡阶段执行,true:捕获阶段产生。

3、dom3 element.addEventListener(‘keyup’, function(){}, false) // 事件类型增加了很多,鼠标事件、键盘事件

UI事件,当用户与页面上的元素交互时触发,如:load、scroll

焦点事件,当元素获得或失去焦点时触发,如:blur、focus

鼠标事件,当用户通过鼠标在页面执行操作时触发如:dblclick、mouseup

滚轮事件,当使用鼠标滚轮或类似设备时触发,如:mousewheel

文本事件,当在文档中输入文本时触发,如:textInput

键盘事件,当用户通过键盘在页面上执行操作时触发,如:keydown、keypress

合成事件,当为IME(输入法编辑器)输入字符时触发,如:compositionstart

变动事件,当底层DOM结构发生变化时触发,如:DOMsubtreeModified

同时DOM3级事件也允许使用者自定义一些事件

7、dom事件模型?(必会)

DOM事件模型。

DOM事件模型分为两种:事件捕获和事件冒泡。

事件捕获以点击事件为例,同类型事件会由根元素开始触发,向内传播,一直到目标元素。从外到内依次触发:根—目标的祖先素—目标的父元素—目标元素

事件冒泡和事件捕获截然相反。发生点击事件时,事件会从目标元素上开始触发,向外传播,一直到根元素停止。从内到外依次触发:目标元素—目标元素的父元素—父元素的父元素—根

事件传播

事件捕获和事件冒泡都有事件传播阶段,传播阶段就是事件从触发开始到结束的过程。

优先级:先捕获,再冒泡。

两种传播方式的来源:W3C推行DOM2级事件之前网景和IE在打架,网景用的事件传播方式是捕获,IE用的事件传播方式是冒泡

8、dom事件流?(必会)

1、事件捕获阶段:事件传播由目标节点的祖先节点逐级传播到目标节点。先由文档的根节点document(window)开始触发对象,最后传播到目标节点,从外向内捕获事件对象

2、处于目标阶段:事件到达目标对象,事件触发,如果事件不允许冒泡,事件会在这一阶段停止传播

3、事件冒泡阶段:从目标节点逐级传播到document节点

9、event对象的常见应用?(必会)

1、event.preventDefault(); // 阻止默认行为,阻止a链接默认的跳转行为

2、event.stopPropagation(); // 阻止冒泡

3、event.stopImmediatePropagation(); // 按钮绑定了2个响应函数,依次注册a,b两个事件,点击按钮,a事件中加event.stopImmediatePropagation()就能阻止b事件

4、event.currentTarget // 早期的ie不支持,当前绑定的事件

5、event.target

10、JavaScript动画和CSS3动画有什么区别?(必会)

1、CSS动画

优点:

1.1)浏览器可以对动画进行优化。

1.1.1 )浏览器使用与 requestAnimationFrame 类似的机制,requestAnimationFrame比起setTimeout,setInterval设置动画的优势主要是:1)requestAnimationFrame 会把每一帧中的所有DOM操作集中起来,在一次重绘或回流中就完成,并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率,一般来说,这个频率为每秒60帧。2)在隐藏或不可见的元素中requestAnimationFrame不会进行重绘或回流,这当然就意味着更少的的cpu,gpu和内存使用量。

1.1.2)强制使用硬件加速 (通过 GPU 来提高动画性能)

1.2)代码相对简单,性能调优方向固定

1.3)对于帧速表现不好的低版本浏览器,CSS3可以做到自然降级,而JS则需要撰写额外代码

缺点:

1.1) 运行过程控制较弱,无法附加事件绑定回调函数。CSS动画只能暂停,不能在动画中寻找一个特定的时间点,不能在半路反转动画,不能变换时间尺度,不能在特定的位置添加回调函数或是绑定回放事件,无进度报告。

1.2) 代码冗长。想用 CSS 实现稍微复杂一点动画,最后CSS代码都会变得非常笨重。

2、JS动画

优点:

2.1)JavaScript动画控制能力很强, 可以在动画播放过程中对动画进行控制:开始、暂停、回放、终止、取消都是可以做到的。

标签:WebAPI,Web,触发,动画,DOM,2021,dom,节点,事件
From: https://blog.csdn.net/2401_86400095/article/details/141833286

相关文章

  • Webstorm同步设置失败的问题
    因为换新电脑,系统是win11,重新安装了Webstorm,就像把云端的设置同步到本地来,但是同步的时候出错了,错误信息如下:同步失败。C:\Users\Administrator.DESKTOP-DP86MVU\AppData\Roaming\JetBrains\WebStorm2024.1\settingsSync\.gitignore(ps:因为是修复完这个问题之后才进行记录的......
  • webflux使用
    1.生成Mono对象privateMono<String>getEosDuplicateLastScanId(EosProjecteosProject){Mono<String>scanIdMono=webClient.get().uri(uriBuilder->UriComponentsBuilder.fromHttpUrl(HOST)......
  • WebGL入门(031):EXT_frag_depth 简介、使用方法、示例代码
    还是大剑师兰特:曾是美国某知名大学计算机专业研究生,现为航空航海领域高级前端工程师;CSDN知名博主,GIS领域优质创作者,深耕openlayers、leaflet、mapbox、cesium,canvas,webgl,echarts等技术开发,欢迎加底部微信(gis-dajianshi),一起交流。No.内容链接1Openlayers【入门教程】-......
  • node通过ffmpeg将多路rtsp、rtmp流媒体转换为多端口websocket流供前端播放
    node通过ffmpeg将多路rtsp、rtmp流媒体转换为多端口websocket流供前端播放这里写目录标题node通过ffmpeg将多路rtsp、rtmp流媒体转换为多端口websocket流供前端播放1安装node2安装ffmpeg3【重要】使用node搭建rtsp、rtmp转码服务器(必须要提前安装ffmpeg)4前端(vue3)播......
  • Flask:Python轻量级Web框架详解
    Flask是一个用Python编写的轻量级Web应用框架。它被设计为易于使用和扩展,非常适合小型项目和微服务,同时也能够支持大型应用。Flask依赖于少量的外部库,并且提供了一个简单的方式来创建Web应用。Flask的主要特点轻量级:Flask核心非常简单,使得它易于理解和扩展。扩展性:Flask可......
  • JavaWeb - Spring Boot - 请求参数
    @RequestMapping从注解名称上我们可以看到,@RequestMapping注解的作用就是将请求和处理请求的控制器方法关联起来,建立映射关系。SpringMVC接收到指定的请求,就会来找到在映射关系中对应的控制器方法来处理这个请求。@RequestMapping标识一个类:设置映射请求的请求路径的初始信......
  • [python][selenium] Web UI自动化页面切换iframe框架
    关联文章:WebUI自动化8种页面元素定位方式1、切换iframe的方法:switch_to.frame  方法的入参有4种:  1.1、id  1.2、name  1.3、index索引  1.4、iframe元素对象2、返回主文档(最外层的页面)的方法:switch_to.default_content()3、返回到上一级iframe的方法:switch_to.p......
  • C++入门项目:Linux下C++轻量级Web服务器 跑通|运行|测试(小白进)
    TinyWebServer是一个开源的项目,适合小白入门C++网络编程,注意该项目是在linux系统下。Linux下C++轻量级Web服务器,助力初学者快速实践网络编程,搭建属于自己的服务器.使用线程池+非阻塞socket+epoll(ET和LT均实现)+事件处理(Reactor和Proactor均实现)的并发模型使用状......
  • Go - Web Application 8
    Userauthentication  Openupyourhandlers.gofileandaddplaceholdersforthefive newhandlerfunctionsasfollows:func(app*application)userSignup(whttp.ResponseWriter,r*http.Request){fmt.Fprintln(w,"Displayaformforsigningu......
  • ctfshow-web入门-信息搜集(web1-web10)
    提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录web1(查看源代码)右击页面查看源代码web2(js前台拦截===无效操作)打开题目地址采用burp抓包并进行重发数据包web3(没思路的时候抓个包看看,可能会有意外收获)打开题目链接查看源码无果采用burp抓包并......