2024年最全2024年Web前端面试宝典WebAPI部分(1)，2024前端面试webpack

最后

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

最后写上我自己一直喜欢的一句名言：世界上只有一种真正的英雄主义就是在认清生活真相之后仍然热爱它

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动画

文末

我一直觉得技术面试不是考试，考前背背题，发给你一张考卷，答完交卷等通知。

首先，技术面试是一个 认识自己 的过程，知道自己和外面世界的差距。

更重要的是，技术面试是一个双向了解的过程，要让对方发现你的闪光点，同时也要 试图去找到对方的闪光点，因为他以后可能就是你的同事或者领导，所以，面试官问你有什么问题的时候，不要说没有了，要去试图了解他的工作内容、了解这个团队的氛围。

前端面试题汇总

JavaScript

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

性能

linux

前端资料汇总