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

「爱情、让人受尽委屈。」 2022-09-09 00:19 176阅读 0赞

补课部分：

[JS必会的DOM BOM操作][JS_DOM BOM]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6aqo54Gw57qn5pS26JeP5a62_size_20_color_FFFFFF_t_70_g_se_x_16]  
**1、什么是dom？（必会）**

什么是dom
      1、DOM 是 W3C（万维网联盟）的标准
      2、DOM 定义了访问 HTML 和 XML 文档的标准
      什么是W3C
      1、“W3C 文档对象模型 （DOM） 是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”
      2、W3C DOM 标准被分为 3 个不同的部分
           2.1）核心 DOM - 针对任何结构化文档的标准模型
           2.2）XML DOM - 针对 XML 文档的标准模型
           2.3）HTML DOM - 针对 HTML 文档的标准模型
           备注：DOM 是 Document Object Model（文档对象模型）的缩写

**2、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动画控制能力很强, 可以在动画播放过程中对动画进行控制：开始、暂停、回放、终止、取消都是可以做到的。
              2.2）动画效果比css3动画丰富,有些动画效果，比如曲线运动,冲击闪烁,视差滚动效果，只有JavaScript动画才能完成。
              2.3）CSS3有兼容性问题，而JS大多时候没有兼容性问题。
            缺点：
              2.1）JavaScript在浏览器的主线程中运行，而主线程中还有其它需要运行的JavaScript脚本、样式计算、布局、绘制任务等,对其干扰导致线程可能出现阻塞，从而造成丢帧的情况。
              2.2）代码的复杂度高于CSS动画
            总结：如果动画只是简单的状态切换，不需要中间过程控制，在这种情况下，css动画是优选方案。它可以让你将动画逻辑放在样式文件里面，而不会让你的页面充斥 Javascript 库。然而如果你在设计很复杂的富客户端界面或者在开发一个有着复杂UI状态的 APP。那么你应该使用js动画，这样你的动画可以保持高效，并且你的工作流也更可控。所以，在实现一些小的交互动效的时候，就多考虑考虑CSS动画。对于一些复杂控制的动画，使用javascript比较可靠。
         3、css 动画和 js 动画的差异
               3.1）代码复杂度，js 动画代码相对复杂一些 。
               3.2）动画运行时，对动画的控制程度上，js 能够让动画，暂停，取消，终止，css动画不能添加事件。
               3.3）动画性能看，js 动画多了一个js 解析的过程，性能不如 css 动画好。

[JS_DOM BOM]: https://www.bilibili.com/video/BV1k4411w7sV
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6aqo54Gw57qn5pS26JeP5a62_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/1647faba6c9c41c7af7c327c0e522c33.png